IMG-LOGO

How to create vertical flyout menu using CSS?

andy - 03 Aug, 2013 71819 Views 28 Comment

This tutorial will show you how you can create your web design menu in css vertical layout step by step. See the demo below:


Firstly create a html file named it css_flyoutverticalmenu.html and copy the following code.

<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet" />
<div id="menuwrapper">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a>
                    <ul>
                        <li><a href="#">Sub Product 1</a></li>
                        <li><a href="#">Sub Product 2</a></li>
                        <li><a href="#">Sub Product 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">Faqs</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Where are we?</a></li>
            </ul>
        </li>
        <li><a href="#">Help</a>
    </ul>
</div>

Second step is to create a css file and named it as css_flyoutverticalmenu.css, please place this file on the same folder of the html file you created above.

    
/* Define the body style */
body {
    font-family:Arial;
    font-size:12px;
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    background-color:#7f95db;
    border-bottom:solid 1px white;
    width:150px;
    cursor:pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:150px;
    top:0px;
    display:block;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
    background-color:#cae25a;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
    background-color:#b1b536;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:120px;
}

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{
    position:absolute;
    display:none;
}

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{
    display:block;
    left:150px;
    top:0;
}

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{
    background:#86d3fa;
}

/* We change the background color for the level 3 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover ul li:hover{
    background:#358ebc;
}

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{
    color:#ffffff;
}

/* Clear float */
.clear{
    clear:both;
}

Issue for Internet Explorer under version 9

If you are using IE under version 9, it might not work for you because the browser doesnt support the hover function in LI list. I have included a javascript example in the demo file, so you can check it out how it works in Internet Explorer.

Download Demo Files

Download Flyout Vertical Menu Files

We will create more free navigation menu design for you to use. You can downloads free of navigation menu templates on this link.

Thanks to George that had contribute a demo zip file using Bootstrap 4. If you are interested to see his demo file, please click here to download the css menu flyout using bootstrap 4.

Comments

Runor
17 Feb, 2016
Pls what type of navigation is used in this website. I want something like this but don't know the name
andy
17 Feb, 2016
It uses the default bootstrap menu skin. So you may want to check it out the css of bootstrap. Just wonder do you have any experience on CSS?
Rebecca
29 Apr, 2016
I do not see the Javascript example in the demo files, only CSS.
andy
03 May, 2016
The javascript codes is actually on the html file page. It is only used to support old IE browser. Dont think you need it anymore as most of the browsers are now up to date and support hover function on LI tags.
PAL
29 Apr, 2016
This is awesome . It solved my problems . thanks
Elizabeth
11 Aug, 2016
Can I ask why I have two machines with Win7 64 with IE11 up-to-date on same KB. And on one the fly out (I set it to slightly overlap the first LI level, that the level there seems to be ignoring the z- index that is set to 100, (borrowed flyout menu code, and the third flyout doesn't underlap) So that its flying out but BEHIND the first level. Works great on one and not the other.. all default IE 11 settings, same windows version.
andy
12 Aug, 2016
Do you have an url so I can actually see it?
George
16 Aug, 2016
Please tell me how to get it to open to the left instead of the right. Thank you.
andy
17 Aug, 2016
Look for the following code: #menuwrapper ul li:hover ul and change the left:150px to left:-150px; The negative will force the position of the open menu to the left.
George
17 Aug, 2016
Thanks for the quick response to opening to the left. It also needs to be changed on: #menuwrapper ul li:hover ul li:hover ul, #menuwrapper ul li.iehover ul li.iehover ul{ display:block; left: -150px; /*** remove minus sign to get the navbar to open to the right ***/ top:0; } to get the third level to open to the left. I'm using this in the bootstrap framework, but can't figure out how to get it to, for lack of better terminology, convert to a single column dropdown on small screens. Any suggestions?
andy
18 Aug, 2016
Thanks for adding it up George ;-). Regarding with smaller screen issue you have. In order to make it work, firstly you have to add a media query css target for smaller screen. Reference: http://bytutorial.com/tutorials/css3/media-queries-in-css3 what you need to do is to remove all the styles when it is on the smaller screen. This including removing the float to left or right. so it stays in one drop down line. If you want, you can see the sample responsive framework i created in here: http://bytutorial.com/framework-and-scripts-library/responsive and you can check the demo in here: http://templatesify.com Let me know if you need further help.
George
18 Aug, 2016
Thanks, Andy. This is probably over my head, but I'll give it a shot.
George
29 Aug, 2016
Thanks again for your help. I've been successful in getting your Vertical Flyout Menu to be responsive and added a fourth level. If you're interested, I'll be glad to send you the files. Just tell me where to send them.
andy
29 Aug, 2016
Thanks George. If you want to contribute, you can send your files to info@bytutorial.com and I will put it at the end of the article with your files and name. Let me know if you want to post your email as well. otherwise i will just put your name.
Steve
19 Aug, 2016
When I hover over the link, the flyout appears as it should, but only the left side inside the selection is active. If I click to the right, nothing happens. How do I make the entire box active?
andy
23 Aug, 2016
When you say click to the right nothing happens. Do you want to add some link in here? If you do just remove the hash tag # and replace with the url. Not quite sure what you mean by entire box active. Does it mean you want the sub menus to be active all?
Jonathan
24 Aug, 2016
how can you get the outer layer (menuwrapper in your example, div_content_left in mine) to only be 150px when no flyover is active, and 100% the rest of the time? (if i make it 100% all the time, it prevents click through to items underneath) it's not going to be possible to put my content in the same div, so i need a way of having the menu visible, and working, but not blocking clicks to the page underneath. https://jsfiddle.net/p2khzszt/ note - the css in the fiddle is auto generated, however what you see there is cut and paste from dev tools, minus a few graphics and event clicks. i can edit the script that generates the css.
andy
28 Aug, 2016
Hi Jonathan, thanks for sharing your thought. One of the reason why the underneath is blocked by the menu because you specified the menu position using absolute. I am not quite sure why you need to specify absolute position. It might be you need it in specific location. One thing you can fix this problem is by adjusting the z-index. At the moment it was 100. Try reduce to 1 if you can or simply remove this. To be honest the easy way probably not to use position absolute for the menu. On the other hand the option you have applied worked as well.
Jonathan
24 Aug, 2016
I had an issue with the outer div blocking underlying content (i had posted a js-fiddle asking how to solve it, but have since figured it out) if anyone else has the same issue, i solved it using information found here: http://stackoverflow.com/a/26799885/830899 tldr; add pointer-events: none; to menuwrapper add pointer-events: auto to each child case (you might want to update your css after you have evaluated it's efficacy)
Ray
22 Dec, 2016
I have a responsive side menu that changes width when page is resized. How do I make sure flyout is in the right position always.
Bogdan
23 May, 2017
My problem is that the width of the wrapper is 250px so the submenu goes under the wrapper.
andy
23 May, 2017
What you can do is to use media queries, so you can adjust the width of the wrapper according to the screen width you prefer. You can change the css from width:250px to max-width:250px; You may have to include a min-width css style.
Denk Michael
07 Jun, 2017
Really great job i love this Navbar can youplease make a package with responsive CSS Thank you a lot of Michael Denk
Michelle
29 Jun, 2017
Does this code work for a custom Tumblr theme? I plan on having a fixed vertical menu with sub menu on the bottom right side of a sidebar.
andy
28 Jul, 2017
Well, I havent tested it yet. But you can just simply copy and paste the html and css. it should work by default, but may need a bit of tweak.
George
23 Oct, 2017
Thank you very much indeed. I've been working on converting my drop-down menu into a fly-out one and I've not been lucky in finding a solution during the last two days. Right now I found your clear example and voila my fly-out menu works like a charm. You are very smart and clear in your coding. Many thanks.
Kannan
23 Oct, 2017
Great job. thx buddy
kanagarathinam
08 Mar, 2018
my menu structure is same as like this, but my issue is the main menu is lengthy(up to it reaches the footer), on that time the submenu list is hide, i search for scroll-able main menu but that are all don't have the option the submenu placed under the main menu vertically, but i need the above structure with vertical scroll is it possible...
andy
09 Mar, 2018
Hi Kanagarathinam, try this in your menu wrapper. Let says it based on my example above. You can force to have a vertical scroll with fixed height.
#menuwrapper{
    height:100%;
    overflow-x:hidden;
    overflow-y: scroll;
}
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to style pagination links with CSS?

Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.

Optimizing your site for printing

The easy way to optimize your site for printing is to create a separated external css targeting a media to print only When a printing action is being executed the browser will send over the information from your page to ...