CSS3 Responsive menu

CSS3 Responsive menu

38 302
CSS3 Responsive menu

CSS3 Responsive menu

Today I’m going to tell how to create a responsive navigation menu using only CSS3. Why responsive? I think it is important and essential. As you know, today, many people browse the Internet via mobile devices (such as ipad, iphone or android). And it is important that mobile members could navigate through your website. Some solutions which you can find in internet offer you to use jquery or javascript to achieve a necessary behavior. But today I will give you a solution without the use of javascript.

By default, this is usual UL-LI drop-down menu. But, if our screen is small (in case of mobile browsers), this menu turns into a click-based menu. In this case your visitors will be able to click to top elements of menu to open submenus. Please look how it works:

Responsive menu

Live Demo

Step 1. HTML

Here is the markup for the demo page with our responsive menu:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Responsive menu | Script Tutorials</title>

        <!-- add styles -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#s1">Menu 1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">Header a</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header b</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Menu 2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">Header c</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header d</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="http://www.script-tutorials.com/css3-responsive-menu/">Back to Responsive menu tutorial</a></li>
            </ul>
        </div>
    </body>
</html>

You can notice here one trick – meta with name=’viewport’. This tag is required to scale page content inside your screen properly. At can be any screen – of your monitor or a screen of your mobile device. Rest code should be easy to understand – multilevel UL-LI menu.

Step 2. CSS

Now – styles. In the most beginning I defined base styles for our page:

css/main.css

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #fff;
    height: 100%;
}
body {
    color: #333333;
    font: 0.75em/1.5em Arial,sans-serif;
}
.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
}

Now, we can define styles for top level elements:

/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

And now – styles for drop down (submenu):

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

Well done. Now, the most interesting part – how can we apply responsive rules? Actually, this is easy, we can use media queries (CSS3) which is made to define custom styles for certain screen resolutions (breakpoints). As you know, different mobile devices have different screen resolution, so – we can use it to define our own custom styles. I’m going to turn our dropdown menu into click-action menu using another one simple trick. Did you notice hidden SPAN elements which I put right after top level menu elements? I’m going to pass active state to them (:target pseudo element) by clicking on top level elements, it will open sub-levels then. Please look what I did:

/* responsive rules */
@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}

Live Demo

Conclusion

We have just made the great responsive menu for your website from scratch. I’m sure that it will be very useful for you. Good luck and welcome back

SIMILAR ARTICLES


38 COMMENTS

    • Why? I think that 980px is good, because my HTC Evo 3D has width – 960px, and, I hope that all we know, that usual resolution for 15″ monitors is 1024×768. I’m not sure if someone else use smaller monitors nowadays

  1. Nicely done – I like it. Just curious, though, why Menu 2 is “highlighted” – even when you mouse off it, it doesn’t return to the default colors. Of is that just my Safari acting up again??

    John

      • Yes, I know, but this demo has only single page. You need to care about ‘active’ pages in case if you use it for multiple pages. I just prepared all the necessary styles for active element.

      • How possible to set ‘active’ a link where I am? This is not working for me:

        #nav a:active {
        background-color: #000000;
        color: #fdb400;
        }

      • All you need – it so apply ‘active’ class for a LI element for your active page.
        Let’s assume that Menu1 is linked to page1.php, and Menu2 is linked to page2.php, then, if you are on page1.php, you should apply ‘active’ class for ‘Menu1′ element, in case if you are on page 2, you should set ‘active’ for ‘Menu2′ element

  2. trieed using the menu but when screen goes into lower pixels the menu covers the content of the page, i do not know how to place it above the content ad not over it

    • Hi Joe,
      I think that you should check styles of layout of your page. Make sure that your content is not places as a static (or absolute) block on your page.
      Try to make it in ‘relative’ position.

  3. I am using this menu right now. I like it allot except I am new to using CSS and am having 2 issues that I was wondering if anyone could help me with.

    First, I would love for the drop down to be right bellow the button, rather then at the very left. I made my drop down boxes kind of small , but perhaps I am not understanding something. Does the content go in the white block that is the drop down? And if so, does the content exist in other html files or css file and how is it called.

    Sorry if these questions sound stupid; but I am pretty new to CSS and love the abilities it give you.

    Thank you,

    Cheers

    PS: thank you for sharing this code! It is very clean.

    • Hi TZiady,
      Yes, everything is in the html code of the menu (top menu elements and submenu elements). Submenu elements are supposed to be in the white popup section. This section is wide (nearly 100% of the screen). Submenu elements are presented in multiple-column layout.

  4. i have a question about, this menu cannot toggle open and close (collapse) dropdown level-2 while we clikced the parent menu for 2nd times this just happened when we clicked at another parent menu while previous menu collapse automatically, could you do that make parent menu collapse when user click for 2nd time, is that just possible with css3 or maybe need js to make it happen?. another q is that possible with css3 not to show menu when first load ie. make a link with indicator like menu+ when click show menu- and all parent menu and so do parent+ when click parent- child+ and soon

    i looking for responsive menu that accessible even with javascript off, i found several solution in the internet but too much js dependency, another i found css3 responsive menu but doesn’t support multi level i.e child menu just 1 parent level. Your css3 menu nearly my requirementdid but, i need solution for issues just like above.

    • Hello Bekam,
      The second and third menu levels are not supposed to be able to collapse. They are ordinary links. Only the first level (top menu elements) are collapsible.
      You can also hide the whole menu if you need it and display only a toggler (to toggle the menu) – the mentioned ‘+’ button.

      • You say that ‘Only the first level (top menu elements) are collapsible.’ but there seems to be no way to toggle the submenu once you have clcked the top level menu. If you are using this on a mobile then this can be quite frustrating as you may want to view the submenu but may not necessarily click on a link, so it would bo good to be able to toggle the submenu to hide.

        Is this possible? (I think Bekam asked the same question but I couldn’t make out from your answer whether this is possible…)

        Thanks, and great menu btw!

      • Hi David,
        This is possible to add the ‘closing’ element. The easiest way is to add it (as icon, or text) with the following hyperlink: #x
        It will force the menu to close any active submenu.

      • Hi can you show me how to activate the on click event toggle toe menu? THanks and great menu!

      • Hi Larry,
        If you need to show submenus on click event instead onhover, you may use the following styles:
        #nav li #s1:target + ul.subs,
        #nav li #s2:target + ul.subs {
           display: block;
        }

    • Hi Jorge,
      You might need to change quite a lot properties to center it. Because by default it is left aligned, and all it’s elements use ‘float:left’ rule. You might need to use tables to center it, or you may use auto-margins with certain width of the menu.

  5. Andrey, great menu! I believe many developers use it for their templates now!

    I am going to use it for my site – exactly what I have been looking for :). Will let you know how I get on with this :).

    Spasibo ogromnoe! Tak derzhat!

  6. Hi Andrei!

    Really enjoying your menu :).

    Is there any chance to make the mega menu contain 3 or 4 columns as sub-headings in it please?

    At the moment, the script only allows me 2 columns with sub-menus in them. The issue here is that the right-hand side looks very empty.

    So I was just wondering how we could fill it :), with 3 or 4 columns.

    Thanks very much!
    Irina

    • Hi Irina,
      Styles depends only on your imagination. You can try with:
      #nav ul.subs > li {
      display: block;
      float: left;
      width: 47%;
      }
      for the responsive section to make it as 2 columns, and, don’t forget to add overflow:hidden to their parent.

  7. WOW! Awesome stuff man! That is some advance CSS styling. Hope I can use this properly in some of my sites.

    CHEERS :)

  8. The trick with the anchors in combination with :target is the essential trick. Everything else is simple CSS and adjustable to the own needs.
    Thanks!

  9. Hello

    I need to know how to put a link on the first level of menu, if I replace the anchor “# s1″ the menu is not displayed on the mobile version :(

    thanks!

    • Hi Marina,
      When we use # in links – it refers to local objects, thus, if you need to point it to external pages – you need to put here real urls

  10. Hello, I would like to know if their is anyway down arrows could be placed beside the items with drop downs letting a person now that their is a drop down menu for example beside Menu 1 and Menu 2. Thank You for a nice Menu!

  11. Hello, earlier I asked you if their was anyway down arrows could be placed on the items with drop downs, I went to W3schools online and found some code that worked, if you put ∇ in the html code beside the menu name you will get a down arrow they also have other symbols and helpfull code at W3schools online, I had one more question that someone asked earlier but you may have forgotten to answer, is their any way that when the menu is collapsed you can click once on an item with a sub menu then click on that item again to have the sub menu close. Thanks very much! Robert

    • Hi Robert,
      Instead of pure text, I recommend that you display here one image object, that has two different background images (depending on the state: collapsed or not)

  12. great menu, the better.
    just missing a little thing :)
    in the mobile version, could i implement the appearance of the menu clicking on the icon sandwich???
    sorry for my english,thanks

Leave a Reply