Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add sub menus on a responsive css menu

Tags:

html

css

menu

I have this html for my css menu:

<nav class="clearfix">
    <ul class="clearix">
        <li><a href="http://www.domain.co.uk/">Homepage</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/project-gallery">Project Gallery</a></li>
        <li><a href="/contact-us">Contact Us</a></li>  
    </ul>
    <a href="#" id="pull">Menu</a>  
</nav>

 

nav {
    height: 50px;  
    width: 100%;  
    background: #F00;  
    font-size: 14pt;  
    font-family: Arial;
    position: relative;  
    border-bottom: 5px solid #FFFFFF;  
}  
nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 100%;  
    height: 50px;
    text-align: center;
}
nav li {  
    display: inline;
}  
.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  
nav a {  
    color: #FFFFFF;  
    display: inline-block;  
    width: auto;

    text-align: center;  
    text-decoration: none;  
    line-height: 50px;  
}  
nav li a {
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;
    padding-left: 10px;
    padding-right: 10px;
}  
nav li:last-child a {  
    border-right: 0;  
}  
nav a:hover, nav a:active {  
    background-color: #000000;
    color:#FFFFFF;  
} 
nav a#pull {  
    display: none;  
}  
@media screen and (max-width: 600px) {  
    nav {   
        height: auto;  
    }  
    nav ul {  
        width: 100%;  
        display: block;  
        height: auto;  
    }  
    nav li {  
        width: 50%;  
        float: left;  
        position: relative;  
    }  
    nav li a {  
        border-bottom: 1px solid #FFFFFF;  
        border-right: 1px solid #FFFFFF;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
}  
@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;
        color:#FFFFFF;
        background-color: #F00;  
        width: 100%;  
        position: relative;  
    }  
    nav a#pull:after {  
        content:"";  
        background: url('nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        rightright: 15px;  
        top: 10px;  
    }  
}  
@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #FFFFFF;  
    }  
}  

I am looking for a way to add sub menus and then second sub menus on on the first ones but still keep it as responsive as it is.

How can I do this?

http://jsfiddle.net/EYjnG/

like image 744
charlie Avatar asked Oct 17 '13 23:10

charlie


People also ask

How do I create a menu and sub menu?

Example ExplainedUse any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.

Which tag is used to add sub menus?

HTML - <menu> Tag.


2 Answers

JSFIDDLE DEMO logic is just simple and have with this code

#submenu,#submenu2,#submenu3{
    visibility:hidden;       /*turn all the submenus visibility hidden */
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2     li.second:hover #submenu3{
    visibility:visible;      /*On hover turn on visibility visible */
}      

Complete code :

HTML:

<div id="top_menu">  <!--MAIN MENU -->                      
    <ul>
        <li class="first">menu1                 
            <div id="submenu">   <!--First Submenu -->
                <ul class="abc">
                    <li class="second">item1    
                        <div id="submenu2">  <!--Second Submenu -->
                            <ul class="abc">
                                <li class="second">item1_1
                                    <div id="submenu3">  <!--Third Submenu -->
                                        <ul class="abc">
                                            <li class="second">item1_1_1</li>
                                            <li class="second">item1_1_2</li>
                                            <li class="second">item1_1_3</li>
                                        </ul>
                                    </div>  <!--third Submenu Ends here-->
                                </li>
                                <li class="second">item1_2</li>
                                <li class="second">item1_3</li>
                            </ul>
                        </div>  <!--Second Submenu Ends here-->                         
                    </li>
                    <li class="second">item2
                                <div id="submenu2">
                                    <ul class="abc">
                                        <li class="second">item2_1</li>
                                        <li class="second">item2_2</li>
                                        <li class="second">item2_3</li>
                                    </ul>
                                </div>                              
                    </li>
                    <li class="second">item3
                                <div id="submenu2">
                                    <ul class="abc">
                                        <li class="second">item3_1</li>
                                        <li class="second">item3_2</li>
                                        <li class="second">item3_3</li>
                                    </ul>
                                </div>                              
                    </li>
                </ul>
            </div>
        </li>   

        <li class="first">menu2
            <div id="submenu">
                <ul class="abc">
                    <li class="second">item1</li>
                    <li class="second">item2</li>
                    <li class="second">item3</li>
                    <li class="second">item4</li>
                </ul>
            </div>
        </li>

    </ul>   
</div>

CSS:

ul{
    padding:10px;
    padding-right:0px;
}
li.first{
    display:block;
    display:inline-block;
    padding:5px;
    padding-right:25px;
    padding-left:25px;
    cursor:pointer;
}
li.second{
    list-style:none;
    margin:0px;
    padding:5px;
    padding-right:25px;
    margin-bottom:5px;
    cursor:pointer;
}
#submenu li.second:hover{
    background:red;
    border-radius:5px;
}

#submenu2 li.second:hover{
    background:green;
    border-radius:5px;
}
/*********MAIN LOGIC***************/

#submenu,#submenu2,#submenu3{
    visibility:hidden;
}
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{
    visibility:visible;
}
/**********STYLING SUBMENUS**************/
#submenu{
    padding-right:0px;
    text-align:left;
    position:absolute;
    background:white;
    box-shadow:0px 0px 5px;
    border-radius:5px;
}
#submenu2{
    text-align:left;
    position:absolute;
    left:70px;
    top:0px;
    background:red;
    box-shadow:0px 0px 5px;
    border-radius:5px;
}
#submenu3{
    text-align:left;
    position:absolute;
    left:80px;
    top:0px;
    background:green;
    box-shadow:0px 0px 5px;
    border-radius:5px;
}

just understand the logic behind this code and you can made as many submenus as you want.

like image 84
AmanS Avatar answered Sep 20 '22 20:09

AmanS


There are many ways to go ahead about this.

I usually hide the sub menu uls with display: none and take them out of the content flow with position: absolute. Give the li containing the sub menu position: relative so that the sub menus are relative to their direct parents, then position the sub menus however you please using the top, right, bottom and left properties. Finally, change the sub menu to display: block through a :hover or whatever.

Here's a bare-bones example of this:

Markup:

<nav>
  <ul>
    <li><a>Link</a>
      <ul>
        <li><a>Sub link</a></li>
        <li><a>Sub link</a></li>
        <li><a>Sub link</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS:

nav li {
  position: relative;
}

nav li > ul {
  position: absolute;
  top: 100%;
  display: none;
}

nav li:hover > ul {
  display: block;
}

Here's a pen with this example. It looks like crap but you get the drill.

You can just keep nesting more sub-menus, but you'll probably want to use different positioning for second-and-lower-levels of sub menus.

However, please note that mobile browsers don't really support :hover. At least they don't treat it the same. You shouldn't make your sub menus accessible only on :hover. Consider adding some sort of class name toggle on click with javascript instead.

like image 35
Nils Kaspersson Avatar answered Sep 20 '22 20:09

Nils Kaspersson