CSS Build vertical menu with sub-menus
The following tutorial shows you how to use CSS to do «CSS Build vertical menu with sub-menus».
CSS Style
The CSS style to do «CSS Build vertical menu with sub-menus» is
.split_button !-- w w w. d e m o 2 s . c o m--> display:block; margin-left:0px; margin-right:0px !important; box-sizing:border-box; float:left; > .split_button.button_left < width:80%; > .split_button.button_right < width:20%; border-left:1px solid black; > .WMenu < background:url("../images/WMenu/bg.png"); background-repeat:repeat-z; background-attachment:fixed; list-style-type:none; font-family:Verdana,Geneva,sans-serif; font-size:12px; height:100%; width:200px; margin:0 0 0 10px; padding:0; > .WMenuPopup < list-style-type:none; clear:both; float:none; > .WButton < background:#feffff; background:-moz-linear-gradient(top, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef)); background:-webkit-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background:-o-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background:-ms-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background:linear-gradient(to bottom, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); padding:4px; margin-right:2px; margin-bottom:2px; width:auto; height:auto; > .WButton:hover < cursor:pointer; background:#87e0fd; background:-moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); background:-webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background:-o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background:-ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background:linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); padding:4px; margin-right:2px; margin-bottom:2px; font-weight:bold; width:auto; >
HTML Body
body> ul >"WMenu"> li id="" >"split_button button_left WButton"> Item 1 li >"split_button button_right WButton"> click! ul for="AddPageBtn" >"WMenuPopup"> li >"WButton">Sub-Item 1 li >"WButton">Sub-Item 2 li >"WButton">Sub-Item 3 li >"WButton">Sub-Item 4 li >"WButton">Item 2 li >"WButton">Item 3 li >"WButton">Item 4
The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .split_button < display: block; margin-left: 0px; margin-right: 0px !important; box-sizing: border-box; float: left; > .split_button.button_left < width: 80%; > .split_button.button_right < width: 20%; border-left: 1px solid black; > .WMenu !-- w w w . d em o 2 s . c o m--> background: url("../images/WMenu/bg.png"); background-repeat: repeat-z; background-attachment: fixed; list-style-type: none; font-family: Verdana,Geneva,sans-serif; font-size: 12px; height: 100%; width: 200px; margin: 0 0 0 10px; padding: 0; > /*. . -. */ .WMenuPopup < list-style-type: none; clear:both;float:none; > .WButton < background: #feffff; background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef)); background: -webkit-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background: -o-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background: -ms-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background: linear-gradient(to bottom, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); padding: 4px; margin-right: 2px; margin-bottom: 2px; width: auto; height: auto; > .WButton:hover < cursor: pointer; background: #87e0fd; background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); padding: 4px; margin-right: 2px; margin-bottom: 2px; font-weight:bold; width: auto; > body> ul >"WMenu"> li id="" >"split_button button_left WButton"> Item 1 li >"split_button button_right WButton"> click! ul for="AddPageBtn" >"WMenuPopup"> li >"WButton">Sub-Item 1 li >"WButton">Sub-Item 2 li >"WButton">Sub-Item 3 li >"WButton">Sub-Item 4 li >"WButton">Item 2 li >"WButton">Item 3 li >"WButton">Item 4
Related
- CSS Basic
sub-menu not visible on page - CSS Basic
sub-menu not visible on page (Demo 2) - CSS Bootstrap 3 :How to display sub-menu of side navigation bar, bottom of each menu
- CSS Build vertical menu with sub-menus
- CSS change submenu style
- CSS change submenu style (Demo 2)
- CSS change submenu style (Demo 3)
demo2s.com | Email: | Demo Source and Support. All rights reserved.
Create a vertical menu in CSS3 and HTML
Simple menus using CSS3 and HTML5 are becoming quite popular because you don’t need JQuery or JavaScript to add animations. We will demonstrate a quick way to create a nice, clean vertical menu with a sub menu which slides out.
- element to show the sub menu.
HTML 5 Markup
CSS
Parent CSS
p, ul, li, div, nav < padding:0; margin:0; >body < font-family:Calibri; >#menu < overflow: auto; position:relative; z-index:2; >.parent-menu < background-color: #0c8fff; min-width:200px; float:left; >#menu ul < list-style-type:none; >#menu ul li a < padding:10px 15px; display:block; color:#fff; text-decoration:none; >#menu ul li a:hover
Sub Menu
#menu ul li:hover > ul < left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; >#menu ul li > ul < position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; >#menu ul li > ul li a:hover
- element underneath (>) this
. We position it left:200px so it comes in view side by side to the parent menu, and we also give it a height of 100% so it remains equal.
You must set the z-index to -1 so that the menu is underneath the parent menu. This will allow it to slide properly without any jerking.
Notes
If you change the width of the parent or submenu make sure you change the left position value of the submenu.
To change the speed of the animation set the numeric value in this code as you like.
-webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in;
The menu has been tested in Chrome 34+, Firefox 28.0+, and IE 11.0.
21 Comments
Hello my name is Roberto I write from Spain. First thank you for your blog and yours tutorials. I found your blog searching about how to create a vertical menu, and your tutorial is awesome. But I have one question: How can I get the same effect with third level menu, the tutorial is teaching me how to do this effect in the first and second level menu, but I need third level, I am working on this for several days but I can’t get it works. Thanks and sorry for my bad english
Did you ever solve your problem. I have the same problem. I would appreciate any suggestions that you may provide.
Thanks
John T. Morton III
I have this website with a broken css verticle menu that is three levels deep. Someone else provided this code. I think it was developed using opencube. I’m trying to replace it with my own code. I’ve wrote a lots of code but I never tried css. I used this code in this example and have been able to change it to my liking. I have not been able to add a third level and I sure could use some help. Also, when the second and third levels slide out, I’d like to limit the box to the amount of elements in that selected item.
I’ll keep trying but would appreciate some help. Thanks
John T. Morton III
[email protected]
sir how can i fix z-index position in 3rd level and up? bacause although the 3rd level background z-index position is fixed under the two levels but the text seems to be seen transitioning over the 2nd level.
Hello , Thanks for creating such a nice and clean css for us. It is very helpful. How can i get sub menu to align with the parent menu ? So that it doesn’t always start from top instead it will start from the parent. ? What changes are required to achieve that ?
@sachin, i’m interested in doing the same thing so that the submenu pops out inline with the parent li. Were you able to figure it out?
Also, I would like to know what change is required to make the height of the submenu be as tall as the filled elements and not the same height of the entire parent menu. Anyone know how to make that happen?
@sachin, I seem to have made a few additions in order to achieve the height of the submenu only to be as tall as the number of items instead of the entire menu and position the submenu to popout inline with the parent. Firstly, I added the class “submenu” to each submenu ul element. Then in my CSS I did this:
ul.submenu height: auto;
> For the submenu to open in line with the parent menu, I added the following jQuery to my menu file: jQuery(document).ready(function() jQuery(“.submenu”).parent().css();
>);
Actually I am facing some problems.
What will we do if we have more sub-menu i.e:item than the total menu options.
Example: for Home & kitchen, you showed 6 items. But If Have 7 items or more what will be necessary change? Thank You
Hello i have a question, what can i do if a menu has much more submenus than the number of menus, example 8 or 10 or 12 submenus in a menu Thank You very much
Hello! How would I add fixed to the code? Also, How would I put the vertical menu below a right sidebar? The vertical menu is going to be on the right side below the bottom of the sidebar.
You can view the source in this page: https://www.thecodingguys.net/demo/css/css-vertical-menu-multiple-levels.html I believe this is what you’re looking for.
Can you please help me, if the sub menu has more items than the parent menu.. then the sub menu list gets truncated, it shows only the no of items equal to parent menu item. for example the parent menu has 6 items… if the sub menu of any parent item has more than 6 items, it displays only six… though the item is seen view source. your help is highly appreciated. Many Thanks.
Hello there, i really love the way you made it and thanks for your explanations, im new to this and i wanted to ask you, can you please show me how to make everything rtl? im using it for a hebrew website and its all right side here, and if you can please show me how to add another submenu to the submenu so it could open up another mini tab?
like for example parent menu is for categories, sub menu shows the different items in the categories and when you hover over the item, another single line height tab opens up with the price tag or something, thank you very much!
Good afternoon, looking for a simple example of vertical menu have found this one and to be honest it is more than I need.
Now I am looking for having marked an item from main menu at time of going to the second one, and having one item marked from the first and second at time of selecting one from the 3rd one (when i say marked, is selected or background color)
Thks