I have a menu bar, whose menu li stretch down on mouse hover. It pushes sidewards a div below this menu bar div. But I want those stretch down lis to display over the mentioned div, without pushing it sidewards.
You can have a look at what I am trying to tell here.
Anybody got a solution?
http://jsfiddle.net/bpu2r/
I've simply added float: left; to the menu and clear: both; to the container.
Related
I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.
The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.
I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list.
Any idea how to fix it?
https://codesandbox.io/s/scrolling-with-react-yq81r
I change a couple of code on CodeSandbox.
.right {
background-color: #cacaca;
}
.right ul {
top: 0;
position: sticky;
}
If I understood correctly this gonna work.
Hey so I have a bunch of tabs made up of like this:
<li><h6>Tab1</h6></li>
<li><h6>Tab2</h6></li>
<li><h6>Tab3</h6></li>
<li><h6>Tab4</h6></li>
<li><h6>Tab5</h6></li>
<li><h6>Tab6</h6></li>
There are all horizontally aligned with display: table-cell;
The problem is that some of them have text that wraps onto a second line, and the hover state when I mouse over an item isn't going to the full height of the row.
You can see the table I'm refering to on this site here: http://perennial.chkpt.com.au/invest-with-us/
You can add :hover style on li instead of a.
Example: apply this style for the website you provided
li.ui-state-default.ui-corner-top:hover {
background: red;
}
For a website i'm making I have a little problem. I have a mobile menu which activates when I press the menu button (done with javascript).
I want it to push the div with the 3 blocks (the maincontent div) down, but sadly it's not doing what it's supposed to.
I have tried everything with positions and so on, without success. You can check out the website at dev.hotelkom.nl
It's not working because your main menu is positioned absolutely and its parent has a fixed height. Also your wrapper-content is positioned absolutely hence it's not moving.
Few reasons how you may fix it:
.mainmenu {
position: relative;
height: auto;
}
.wrapper-content {
position:relative;
}
Apply these properties on mobile.
My current responsive site has slide down menus. I intend to make it so that as the window gets wider the items organize into columns (1,2, and 3). This much is working but when I slidetoggle an element in the first column, the elements in the first column goes down as well. Sometimes the elements hop from one column to the other.
I just need a general idea of what to do?
the menu items are floated
the menus themselves are not
Give your columns a position of relative with some padding and your menus a position of absolute. Then you can position your menu's above the text in the columns, and they won't push the text down when you use slideToggle()
.col{
padding:20px;
position:relative;
}
.menu{
position:absolute;
top:0;
}
Here's a jsFiddle to show it in action
I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...
You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.