I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
Related
I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.
I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?
Here is a example JSFiddle
The code I am using:
<header>
<nav style="background-color: #FAD10E; height:50px">
<div class="menu-button">Mobile Menu</div>
<ul class="flexnav" data-breakpoint="800">
<li>Home</li>
<li>Stuff
<!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
<ul>
<li>Stuff 1</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
<li>Stuff 6</li>
</ul>
</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
</ul>
</nav>
</header>
<div>
<!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
<div class="autoplay">
<div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
</div>
</div>
You only need to add two lines of CSS
Example fiddle
CSS
.flexnav{
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width:90%;
position: relative; /* <-- Added */
z-index: 1; /* <-- Added */
}
The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).
The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.
Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
I want to create a CSS navigation with submenus that appear when the heading tab is clicked. Here's example HTML of how I'd like to see it work:
<ul id="menu">
<li id="nav-1">Home</li>
<li id="nav-2">Menu 1
<ul id="subnav-2">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li id="nav-3">Menu 2
<ul id="subnav-3">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li id="nav-4">Other tab without submenu
</li>
</ul>
I can't seem to find anything online to make this work. Any ideas?
If you don't mind using libraries I would recommend using bootstrap. It makes really easy creating menus with drop-down submenus and it comes with a default style that is quite neat. You should have a look at this:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
If you need to do it on click, you'll need javascript. If you're ok with doing it on hover, you can do this:
#menu ul{
dispaly: none;
}
#menu > li:hover ul{
display: block;
}
Caveats: this will only work in IE7+. You'll also still need to position the dropdowns appropriately (absolute positioning, most likely).
Edit: Whoops! You said "click", not "hover". Sorry. I'll just leave this here in case it helps someone else.
I have an example of four techniques for pure CSS hierarchical menus from semantic markup here:
http://phrogz.net/JS/ul2menu/purecss_testsuite.html
Here's an example of a single technique:
http://jsfiddle.net/FX4Dz/1/
<nav><ul>
<li>Header 1<ul>
<li class="sub">Subhead 1.1<ul>
<li>Subhead 1.1.1</li>
<li>Subhead 1.1.2</li>
</ul></li>
<li>Subhead 1.2</li>
<li>Subhead 1.3</li>
</ul></li>
<li>Header 2<ul>
<li>Subhead 2.1</li>
<li class="sub">Subhead 2.2<ul>
<li>Subhead 2.2.1</li>
</ul></li>
</ul></li>
</ul></nav>
nav li {
display:inline-block;
padding:0 0.4em;
height:1.4em; line-height:1.4em;
position:relative;
}
nav li ul { display:none }
nav li li { display:block; width:8em }
nav li:hover > ul {
display:block;
position:absolute;
top:1.4em; left:-1px; /* align with respect to horizontal row */
width:8em; z-index:2
}
nav li li:hover ul {
left:8em; top:-1px /* subnav menus align next to their menu item */
}
The Swimbi app generates rather clean CSS code of drop down menu. You can use the app or just copy the CSS from the demo page http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea
http://css3menu.com/
Download this and make yourself one, then go through the code, edit, and learn
Can anybody give a reference or is it possible to create a menu entirely depending on
CSS and not a single bit of javascript?
The Requirement is a dropdown menu, which can have many children ( submenu ).
Will anything if created like this will be cross browser compatible?
Any help on this topic will be appreciated!.
EDIT
Thanks for all your inputs one more doubt
Can this be implemented rather than using ul li
say div span combination as that may help me achieving a menu which won't change my current html structure!
The trick is the :hover pseudo-class.
<ul class="menu">
<li>
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.
Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.
Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.
Check this out: http://www.cssplay.co.uk/menus/final_drop.html
See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.
What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.
Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.
Others have already provided links to some good examples, so I won't repeat them here.
I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
I removed the <a> tags (because now our drop-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:
.menu > li:not(:focus) > .submenu { display: none; }
Check out this Codepen for my Mobile Menu:
NO javascript
Responsive
Stylable
HTML Hamburger menu symbol!
How could I have the tab to be on hover mode while I rollover the drop down sub-menu.
Does it require javascript or it could be done solely on CSS?
<li id="anchor" class="title dropdown">Main Tab
<div class="column">
<ul>
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</div>
</li>
As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.
As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)
Update;
Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).
Something like this...
<li id="anchor" class="title dropdown">Main Tab
<ul class="column">
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</ul>
</li>
/* styles */
li#anchor:hover {
/* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}
li#anchor ul.column {
display: none;
/* Styles for this ul, float, position etc */
}
li#anchor:hover ul.column {
display: block;
}
Its untested, but I've done more of these than I'd care to remember :P
you can do it with CSS but need JS for older crappier browsers(ie6) e.g.
li .column{
display: none;
}
li:hover .column{
display: block
}
IE6 only supports hover on anchor tags hence the need for JS.