I have this HTML code:
<nav id="menu">
<ul>
<li>
Item1
Item1
</li>
<li>
Item2
Item2
</li>
</ul>
</nav>
Demo page
As you can notice, it's a menu with 2 links for each item. The menu is horizontal, and the aim is to hide the "alt" link when the item is not hovered and to show it when it is hovered.
Each <li> element is therefore a box with a specific height (34px) and each link has a height of 34px as well, so that the "alt" link is below the main link, and is hidden.
When the item is hovered, a negative top margin of 34px is applied to the main link, making the "alt" one appear.
But when "hovering out" the top margin of 0 is not really applied back by Google Chrome as you can notice on the demo page I made. Just hover several times on the links and you will notice that elements are not put back to their correct positions.
How can I solve that? I need to keep 2 links (main and "alt") for more complex reasons, the demo being simplified.
For your information, here is the CSS:
nav#menu {
background-color: #e9e9e9;
}
nav#menu > ul {
margin: 0;
height: 39px;
display: block;
list-style-type: none;
}
nav#menu > ul > li {
display: inline-block;
height: 34px;
overflow: hidden;
width: 200px;
}
nav#menu > ul > li > a {
display: block;
height: 34px;
line-height: 34px;
}
nav#menu > ul > li > a:first-child {
margin-top: 0;
}
nav#menu > ul > li:hover > a:first-child {
margin-top: -34px;
}
nav#menu > ul > li > a.alt {
color: white;
background-color: #8d8d8d;
}
Sorry for all the comments. I was trying to get it to work and just thinking out loud. Here is the solution you are looking for...
You need to change two of the styles.
/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul { .... overflow: hidden; }
/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }
Here is the working link jsFiddle
Related
I have found this question, and this question. I tried to apply whitespace: nowrap; to my code, but had no luck. The second question I simply cannot discern what is relevant and what isn't.
I have this HTML:
<ul id="main-menu-list">
<li><a class="box-link" href="#/home">Home</a></li>
<li><a class="box-link" id="shop-link" href="#/shop">Shop</a>
<ul>
<li>
Test
</li>
<li>
Test 2
</li>
</ul>
</li>
<li ng-repeat="linkData in coreCtrl.mainMenuData"><a class="box-link" href="#/{{ linkData.linkUrl }}">{{ linkData.value }}</a></li>
</ul>
In that last bit I'm using Angular to create some links from JSON which don't have sub-menus.
I also have this CSS:
#main-menu-list, #main-menu-list ul {
padding: 0;
margin: 0;
list-style: none;
}
#main-menu-list > li {
float: left;
margin-right: 20px;
line-height: 65px;
}
#main-menu-list > li > a {
font-weight: bold;
font-size: 20px;
color: #6e6e6e;
border: 2px solid #6e6e6e;
padding-top: 5px;
padding-bottom: 5px;
}
#main-menu-list > li > a:hover {
border: 2px solid #a1b489;
color: #a1b489;
text-decoration: none;
}
#main-menu-list > li > ul > li {
background-color: #fff;
position: relative;
z-index: 5;
margin: 0;
}
#main-menu ul a {
white-space: nowrap;
}
The end goal here is to create a sub-menu for the "Shop" link which contains the shop's categories. However, the drop-down needs to be wider that the parent list item. I can increase the width of the sub-menu, but at the cost of increasing the width of the parent <li> element, which throws off the layout of the main menu.
Is there any way to make the sub-menu larger than the parent element without sacrificing the parent's layout?
i would make the parent li relative positioned and the sub-nav absolute positioned, this should sort out your problem.
#main-menu-list li {position: relative;}
#main-menu-list li > ul {position: absolute; top: 100%; left: 0;}
Use css property position : absolute for the drop-down ul and position : relative for the parent ul
After that define top and width of the drop-down ul and it will work
I've tried different tactics on making my menu fluid but none seem to work. I current have an interactive menu. Sometimes I want 6 items to show and sometimes I want 7 items to show.
When I have 7 items the menu is properly aligned over the entire width but when I have 6 items there's a lot of space on the right side of the menu.
I don't want to change the entire code every time I have deactivated an item and hope to be able to resolve this problem with just CSS.
Is it possible to fill this space up with the items?
I know I can do this with tables but I don't want to use tables.
HTML:
<nav id="menu_container">
<ul id = "menu">
<li class="menu_1 active">Home</li>
<li class="menu_2">test</li>
<li class="menu_3">test 2</li>
<li class="menu_4">bigger-menu-item</li>
<li class="menu_5">another-big-menu-item</li>
<li class="menu_6">Contact</li>
</ul>
</nav>
CSS:
#menu_container {
background: transparent url('/img/menu-bg.png') no-repeat;
float:left;
position:relative;
z-index: 999999;
width: 690px;
height:42px;
margin:29px 0 29px 19px;
}
#menu_container > ul {
padding: 0;
margin: 0;
margin-left:29px;
}
#menu_container > ul > li {
color: #ffffff;
float: left;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
When I add a width to the items some show the text on two rows and I don't want that.
I hope I made it clear what I want to do. Thank you.
Update: jsFiddle: http://jsfiddle.net/UDv2A/1/
If you just want to center the contents you could remove the float and display the lis as inline-block:
#menu_container > ul {
padding: 0;
text-align: center;
}
#menu_container > ul > li {
color: #ffffff;
display: inline-block;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
See jsFiddle.
If you want to expand the widths of the lis aswell, use display: table;:
#menu_container > ul {
padding: 0;
margin: 0 auto;
display: table;
width: 100%
}
#menu_container > ul > li {
color: #ffffff;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
display: table-cell;
width: auto;
}
See jsFiddle.
And if you want this to be fluid when you resize down... make sure to give #menu_container a width of 100%.
I'd have another solution:
jsfiddle
/* five items */
#menu_container > ul > li:first-child:nth-last-child(5),
#menu_container > ul > li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
/* six items */
#menu_container > ul > li:first-child:nth-last-child(6),
#menu_container > ul > li:first-child:nth-last-child(6) ~ li {
width: 16.66%;
width: calc(100% / 6);
}
Or you can try using 100% insted of fixed width.
#pscheuller just gave the right way to fill the container.
But I think this kind of styles has one problem, just in my point of view, that is the paddings of items are not the same. Items with longer text will have larger paddings. So I prefer to have space in both left and right, put <ul> in the center of container and give each item the same padding.
I have the following menu:
CSS:
ul.menu {
padding: 0;
margin: 0;
font-size: 16px;
}
ul.menu > li {
display: block;
width: 100%;
margin: 0;
}
ul.menu > li:hover {
color: red;
}
ul.menu > li a {
display: block;
background:transparent url("http://placehold.it/25x25") right center no-repeat;
background-size: 15px 15px;
}
ul.menu > li > a:hover {
background-color: #F7F7F7;
}
HTML:
<div style="width: 200px; background-color: lightgrey;">
<ul class="menu">
<li>
Line 1
</li>
<li>
Line 2
</li>
<li>
Line 3
</li>
<li>
Line 4
</li>
</ul>
</div>
JSFiddle: http://jsfiddle.net/8TzMc/
So far so good, but I want there to be padding on the left and right sides of the li's (about 10px) and I would also like the height of the li's to be a little greater (so that there's some space between the lines of text). I tried adding this line to the ul.menu > li CSS, but it messes up the menu in two ways:
There is now a non-clickable gap between the tops and bottoms of the menu items
The background image is messed up
JSFiddle: http://jsfiddle.net/HXrgq/
How can this be fixed?
Add the padding to the a element instead of the li element.
ul.menu > li a { padding:10px;}
for example
Updated Fiddle link
Add padding to ul.menu > li a instead, it gets rid of the gaps.
http://jsfiddle.net/HXrgq/1/
On the li element, do:
text-indent: 10px;
line-height: 1.5em;
seems this is what you searched: text indented (I suppose this is only one line?) and line-height.
This question seems crazy long, but I wanted to clearly explain everything.
Desired Result
I have a horizontal menubar with submenus. I created it from scratch, so I am not using any existing framework. It uses a combination of buttons, anchors, and spans for semantic markup.
anchors for items that go to a new page
buttons for items that don't go anywhere but have submenus
spans for disabled items
Note: This site is for a limited number of specific users so I am not concerned about the lack of accessibility.
Submenus should be as wide as the widest menu item that it contains. And each menu item should fill the width of the submenu so that the cursor and focus outlines display as desired.
The Problem
In Firefox, a submenu does not expand to the width of the widest item in the following scenario:
submenu is absolutely positioned
submenu is contained within a block that has position other than static
longest menuitem is a button
I've tested with Chrome, IE 8, Firefox 12, and Firefox 20. It displays as desired in Chrome and IE, but not in either version of Firefox.
I created a scaled down version with JavaScript, images, disabled items, and many of the menu items removed. Code is below and also on jsFiddle. Here's a screenshot in Firefox 20.
Note how the Section Titles item is squished. The submenu is only as wide as the Page Titles item (with padding). Also note how this is not a problem in the top level submenu - that menu expanded to the width of Customize PDF Titles.
The Section Titles item is a button. If I change it to an anchor, the submenu expands as desired. If I change the button CSS to remove width: 100%, then the submenu expands as desired. But then, menu items that are narrower than the submenu no longer fill the width (even if I add display: block).
Here's a screenshot of how the above fix breaks other parts of the menu.
Note how the cursor is not a pointer when hovering outside the text. Yes, I could fix that by changing the cursor for the li, but the other problem is the focus outline. I want the focus outline to be around the whole menu item not just the text (which is how it works with width: 100%).
I also tried playing around with -moz-box-sizing, but still no joy.
As a simple workaround, for this particular case, I've just added a few to Page Titles to make it longer. But that solution won't work when the menu is created dynamically.
HTML Code (jsFiddle)
<ul id="navAdminMenu">
<li>Companies</li
><li class="hasSubmenu"><button type="button">Books</button>
<ul>
<li>Manage Books</li
><li>PDF Profiles</li
><li class="hasSubmenu"><button type="button">Customize PDF Titles</button>
<ul>
<li>Page Titles</li
><li class="hasSubmenu"><button type="button">Section Titles</button>
<ul>
<li>Profile Section</li
><li>Index Section</li>
</ul>
</li>
</ul>
</li>
</ul>
</li
><li class="hasSubmenu"><button type="button">Lists</button>
<ul>
<li class="hasSubmenu"><button type="button">Categories</button>
<ul>
<li>Manage</li
><li>Reports</li>
</ul>
</li
><li>Key Contact Positions</li>
</ul>
</li>
</ul>
CSS Code
#navAdminMenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
list-style: none;
margin: 0;
padding: 0;
background-color: #efefef;
}
#navAdminMenu button {
margin: 0;
padding: 0;
vertical-align: baseline;
border: none;
background-color: transparent;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}
#navAdminMenu button::-moz-focus-inner {
padding: 0;
border: none;
}
#navAdminMenu a {
text-decoration: none;
}
#navAdminMenu li {
display: inline-block;
margin: 0;
border-right: 1px solid #ccc;
}
#navAdminMenu li:hover {
background-color: #4b545f;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
display: inline-block;
height: 2.3em;
line-height: 2.6;
padding: 0 10px;
}
#navAdminMenu > li > button, #navAdminMenu > li > a {
color: #06c;
}
#navAdminMenu > li > button:focus, #navAdminMenu > li > a:focus {
outline: 0; /* Firefox displays outline outside the menu box-shadow */
box-shadow: 0 0 0 3px #06c;
}
#navAdminMenu > li:hover > button, #navAdminMenu > li:hover > a {
color: #fff;
}
#navAdminMenu > li.hasSubmenu > button:after {
content: "v";
display: inline-block;
width: 13px;
margin-left: 5px;
}
#navAdminMenu ul {
display: none;
position: absolute;
padding: 0;
background-color: #5f6975;
}
#navAdminMenu li:hover > ul {
display: block;
}
#navAdminMenu ul > li {
display: block;
position: relative;
border-top: 1px solid #999;
border-bottom: 1px solid #000;
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
height: 2em;
line-height: 2;
padding: 0 30px 0 10px;
white-space: nowrap;
}
#navAdminMenu ul > li > button {
width: 100%; /* full width of submenu */
text-align: left;
}
#navAdminMenu ul > li > a {
display: block; /* full width of submenu */
}
#navAdminMenu ul > li > button, #navAdminMenu ul > li > a {
color: #fff;
}
#navAdminMenu ul > li > button:focus, #navAdminMenu ul > li > a:focus {
outline: #fdcb01 solid 3px;
}
#navAdminMenu ul > li.hasSubmenu > button:after {
content: ">";
width: 16px;
position: absolute;
right: 0;
}
#navAdminMenu ul ul {
left: 100%;
top: 0;
}
Question
Is there something simple I am missing? Or should I report this as a bug to Mozilla?
Note: I don't want to change the buttons to anchors.
I spent way too much time on this tiny glitch, but I am like a dog with a bone.
After all the trial and error and the time spent drafting the question, I found a very simple solution. I thought of just discarding my question, but maybe it can help someone else.
Very, very simple solution. So simple I could almost cry.
#navAdminMenu ul > li > button {
/* full width of submenu (even when its the longest item) */
min-width: 100%;
}
Note the use of min-width.
For a website I need to make a css/html menu like this:
As you can see there some yellow borders to the left and also to the right of the menu links that fill up the availabe width. Also there is a background image underneath the menu with a gradient in it.
Does somebody has any idee on how to achive this menu style?
Code so far:
<div id="submenu">
<ul>
<li class="selected">
Wirtschaft<div></div>
<ul>
<li>Kurzeinführung Wirtschaft</li>
<li>Wirtschaftstheorie</li>
<li>Arbeitsmarkt</li>
<li class="selected">Geld- und Konjunktur</li>
<li>Staatsfinanzen</li>
<li>Wirtschaft: alle Beiträge</li>
</ul>
</li>
</ul>
</div>
#submenu {
width: 225px;
}
#submenu ul {
list-style-type: none;
}
#submenu ul li a {
border-left: 6px solid transparent;
padding-left: 4px;
display: block;
margin-bottom: 15px;
color: #222624;
font-size: 17px;
}
#submenu ul li a:hover,
#submenu ul li.selected > a {
border-left: 6px solid #CAB106;
}
#submenu ul li ul li a {
margin-bottom: 7px;
font-size: 14px;
}
EDIT: the gradient in the picture actually resides in the body and i think it can not be done with pure css so it has to be a background image.
EDIT2: the solution provided by PeterVR works great! unfortunately i am stuck with another list with the same style but without the blocks ending complete when the ul ends. any idea on how to achive this with the code provided by PeterVR?
something like this perhaps: http://jsfiddle.net/AXze7/1/
I changed a few thing in your css:
- set the main ul to overflow hidden
- removed the display block from your <a> tags
- set the <a> tags to position relative, for the following to work:
#submenu ul li a:hover:after,
#submenu ul li.selected > a:after {
background: #CAB106;
content: ' ';
display: block;
height: 100%;
width: 225px;
margin-left: 4px;
position: absolute;
left: 100%;
top: 0;
}
This adds the green blocks after the anchor tags.
EDIT:
I updated my fiddle for your second case: http://jsfiddle.net/AXze7/2/
A short overview of what changed:
I removed the overflow:hidden from the ul, and put it on the li
I tweaked the styling and played with the pixels to make it look a bit more like your screenshot. Comparing this with the previous example should help you understand how to achieve what.
I added an extra pseudo-class :before for the arrow icon that appears to change on hover/select.
The code looks like this:
#submenu ul li a:before,
#submenu ul li.selected > a:before {
background: #fcc; /* put your black arrow image here */
content: ' ';
display: block;
height: 12px;
width: 12px;
margin-left: 2px;
position: absolute;
left: -18px;
top: 2px;
}
#submenu ul li a:hover:before,
#submenu ul li.selected > a:before {
background: red; /* put your colored arraw image here */
}
check this demo in js fiddle.make an image one pixel height with the grenadine shown on the picture , and replace #eee with that image.