Published on: 03 August, 2013

How to create vertical flyout menu using CSS

Posted by andy | 48204 views 10 likes 6 favourites 21 comments
Tumblr Digg Google Plus

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
Commented on: 17 Feb, 2016 03:14:07 PM
Pls what type of navigation is used in this website. I want something like this but don't know the name
andy
Commented on: 17 Feb, 2016 03:16:03 PM
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?
andy
Commented on: 03 May, 2016 11:28:47 PM
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.
Rebecca
Commented on: 03 May, 2016 11:24:45 PM
I do not see the Javascript example in the demo files, only CSS.
PAL
Commented on: 03 May, 2016 11:24:18 PM
This is awesome . It solved my problems . thanks
Elizabeth
Commented on: 12 Aug, 2016 09:51:43 AM
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
Commented on: 12 Aug, 2016 09:52:35 AM
Do you have an url so I can actually see it?
andy
Commented on: 17 Aug, 2016 09:06:48 AM
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
Commented on: 17 Aug, 2016 08:56:28 AM
Please tell me how to get it to open to the left instead of the right. Thank you.
George
Commented on: 18 Aug, 2016 01:29:37 PM
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
Commented on: 18 Aug, 2016 01:40:11 PM
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
Commented on: 23 Aug, 2016 11:20:44 PM
Thanks, Andy. This is probably over my head, but I'll give it a shot.
George
Commented on: 29 Aug, 2016 10:05:03 AM
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
Commented on: 29 Aug, 2016 10:12:30 AM
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.
andy
Commented on: 23 Aug, 2016 11:24:25 PM
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?
Steve
Commented on: 23 Aug, 2016 11:21:03 PM
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?
Jonathan
Commented on: 24 Aug, 2016 11:16:27 PM
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
Commented on: 28 Aug, 2016 12:28:17 AM
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
Commented on: 24 Aug, 2016 11:16:29 PM
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
Commented on: 06 Feb, 2017 01:20:48 PM
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
Commented on: 23 May, 2017 09:06:54 AM
My problem is that the width of the wrapper is 250px so the submenu goes under the wrapper.
andy
Commented on: 23 May, 2017 09:09:06 AM
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.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
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.
Published on: 31 January, 2016
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 the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.
Related Tutorials
Published on: 10 August, 2013
z-index is a css property that allows to position an object/element in front/behind of other elements.