CSS / Javascript - Mobile responsive menu for smaller screens

Question

I'm helping out a friend setup a responsive menu for his website, and from some initial research we failed to find ways we could achieve this with CSS3, and it seems like it's only achievable through javascript / jquery. Having never worked with such languages I was hoping you could help us achieve this:

We'd like to make the sub-menus expand by clicking their parent li whenever the screen resolution is 1200px or less.

Below is the HTML and CSS for the menu in question which currently expands on mouse hover.

HTML

<nav id="main_navbar_container" class="navbar navbar-default ">
    <div class="container">
        <div class="row">
            <!-- Brand and expand button get grouped for better mobile display -->
            <div id="main_logo_container" class="navbar-header">
                <!--Main logo container-->
                <div="container">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='test' rel='home'>
                                            <div>
                                <img src='http://localhost/wordpress/wp-content/uploads/2015/10/2015.10.13-jbits.png'width="100px">
                        </div><!-- site-logo --> 
                                      </a>

            </div>
            <!--main logo container-->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="menu_container">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <nav id="primary_menu" class="nav navbar-nav">
                        <div class="menu-home-screen-menu-container">
                            <ul id="menu-home-screen-menu" class="menu">
                                <li id="menu-item-447" class="menu-item-447"><a href="http://localhost/wordpress/index.php/home-2/">Home</a>

                                </li>
                                <li id="menu-item-428" class="menu-item-428"><a href="http://localhost/wordpress/index.php/about-us/">About us</a>

                                </li>
                                <li id="menu-item-429" class="menu-item-429"><a href="http://localhost/wordpress/index.php/recommendations/">Recommendations</a>

                                </li>
                                <li id="menu-item-427" class="menu-item-427"><a href="http://localhost/wordpress/index.php/slogans/">Gallery</a>

                                </li>
                                <li id="menu-item-13" class="menu-item-13"><a>Services</a>

                                    <ul class="sub-menu">
                                        <li id="menu-item-421" class="menu-item-421"><a href="http://localhost/wordpress/index.php/evacuation-plans/">Evacuation Plans</a>

                                        </li>
                                        <li id="menu-item-425" class="menu-item-425"><a href="http://localhost/wordpress/index.php/risk-assessment/">Risk Assessment</a>

                                        </li>
                                        <li id="menu-item-417" class="menu-item-417"><a href="http://localhost/wordpress/index.php/fire-safety-advice/">Fire safety advice</a>

                                        </li>
                                        <li id="menu-item-424" class="menu-item-424"><a href="http://localhost/wordpress/index.php/risk-management/">Risk Management</a>

                                        </li>
                                        <li id="menu-item-423" class="menu-item-423"><a href="http://localhost/wordpress/index.php/fire-training/">Fire Training</a>

                                        </li>
                                        <li id="menu-item-422" class="menu-item-422"><a href="http://localhost/wordpress/index.php/fire-drills/">Fire Drills</a>

                                        </li>
                                    </ul>
                                </li>
                                <li id="menu-item-16" class="menu-item-16"><a>Products</a>

                                    <ul class="sub-menu">
                                        <li id="menu-item-430" class="menu-item-430"><a href="http://localhost/wordpress/index.php/fire-blankets/">Fire blankets</a>

                                        </li>
                                        <li id="menu-item-431" class="menu-item-431"><a href="http://localhost/wordpress/index.php/fire-extinguishers/">Fire extinguishers</a>

                                        </li>
                                        <li id="menu-item-432" class="menu-item-432"><a href="http://localhost/wordpress/index.php/fire-alarms/">Fire alarms</a>

                                        </li>
                                    </ul>
                                </li>
                                <li id="menu-item-426" class="menu-item-426"><a href="http://localhost/wordpress/index.php/faqs/">FAQs</a>

                                </li>
                                <li id="menu-item-420" class="menu-item-420"><a href="http://localhost/wordpress/index.php/contact-us/">Contact Us</a>

                                </li>
                            </ul>
                        </div>
                        </ul>
                </div>
            </div>
        </div>
    </div>
    </nav>

CSS

#main_navbar_container{
    margin-bottom:0;
    background:white;
}

.navbar-collapse {
  text-align:center;
}

#menu_container{
    width:80%;
    float:right;
    display:block;
}

#primary_menu{
    display:block;
    float:left;
    width:100%;
}

#primary_menu ul{
    list-style: none;
    margin: 0;
    padding-left: 0;
}

#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
    color:#ea474b;
    font-weight: 600;
    display: block;
    text-decoration: none;
    padding: 15px 20px;
    margin:auto;
}
#primary_menu a:hover{
    color:#F9690E;
    background: #f1f1f1;
}

#primary_menu li{
    float:left;
    position:relative;
    margin:0
}

#primary_menu ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 4px 4px;
    border-width:0 !important;
    border: 1px solid #dadada;
    background: #fff;
    width:100%;
    color: #8c9398;
    position: absolute;
    top: 3.5em;
    max-height:0;
    overflow-y: hidden;


}
#primary_menu ul li:hover ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 4px 4px;
    border-width:0 !important;
    border: 1px solid #dadada;
    background: #fff;
    width: 200px;
    position:absolute;
    padding:0;
    margin:0;
    max-height:400px;
    left:-50px;
    z-index:999;
        transition: max-height 1s;   
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
 }

 .sub-menu li{
    width:100%;
 }

 #primary_menu ul li ul a{
    color:#ea474b;
 }

#primary_menu ul li ul li:hover a{
    color:#F9690E;
    background: #f1f1f1;
}

@media (max-width: 1200px){

    #main_navbar_container .container, #menu_container { width: 100%;}
    #menu_container .navbar-collapse { padding: 0;}
    #primary_menu{
        width:100%;
        margin:0;
    }

    #primary_menu li{
        width:100%;
        margin:5px 0 0 0;
    }
    #primary_menu ul li ul { 
        border-radius: 0 !important; 
        border-color: transparent !important;
        background-color:rgb(238,238,238);
        display:block;
        max-height:0;
        -webkit-transition: all 0s;      
        transition: all 0s;
    }

    #primary_menu ul li:hover{
        background:none;
    }
    #primary_menu ul li:hover a{
        font-color:black;
        /*\color:rgb(207,0,15);*/
    }
    #primary_menu ul li:hover ul{
        display:block;
        position:initial;
        background-color:rgb(238,238,238);
        width:100%;
        padding:0;
        margin:0;
        max-height:400px;
        transition:max-height 1s;

    }
    #primary_menu ul li:hover li:first-of-type{
        border-top:1px solid rgb(238,238,238);
    }

    #primary_menu ul li:hover li:last-of-type{
        border-bottom:1px solid rgb(238,238,238);
    }

    #primary_menu ul li:hover a:link,
    #primary_menu ul li:hover a:visited{
        color:#ea474b;
    }

    #menu-home-screen-menu{
        margin-left:0;
    }
}

Fiddle to explain: http://jsfiddle.net/ee7zdtb4/

Help is greatly appreciated.

Regards, J

score 1 · Answer 1 · answered Nov 04 '15 at 08:08

We'd like to make the sub-menus expand by clicking their parent li whenever the screen resolution is 1200px or less

You would need to use media-queries to detect the screen size and then change your CSS accordingly.

it seems like it's only achievable through javascript / jquery

No. Not at all. You can very well do this with just a clever mix of elements with corresponding pseudo-classes and adjacent sibling selector. Hint: use hidden checkboxes with labels to control the sibling elements.

Here is a small demo. It's based on an old answer of mine, changed to add media-queries to allow for fully expanded accordion style menu when the screen is larger than 768px (you can tweak it to your use-case of 1200). It gets collapsed and then is controlled by click-able first-level menu items. No Javascript, just CSS.

In the fiddle, drag and resize the output pane to see it in action. In the snippet, click full-screen and back to see it in action. Use this demo to then take it forward for your exact use-case.

Demo Fiddle: http://jsfiddle.net/abhitalks/Lqpc2Len/

Demo Snippet:

* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion { 
    display: inline-block; vertical-align: top;
    width: 240px; margin: 16px; border: 1px solid #ddd; 
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label { 
    display: block; background-color: #eee; 
    padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
    font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before { 
    content: '→'; 
    display: inline-block; margin-right: 6px;
    font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
    overflow: hidden; height: 0px; padding: 0px;
    font-family: calibri, sans-serif; font-weight: 300; 
    background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }

@media screen and (min-width: 768px) {
    div.content { height: 64px; padding: 6px; }
    input + label::before { font-weight: 600; transform: rotate(90deg); }
}

<div class="accordion">
    <input id="i12" name="handle2" type="checkbox" />
    <label for="i12">One</label>
    <div class="content">Lorem ipsum</div>
    <input id="i22" name="handle2" type="checkbox" />
    <label for="i22">Two</label>
    <div class="content">Lorem ipsum</div>
    <input id="i32" name="handle2" type="checkbox" />
    <label for="i32">Three</label>
    <div class="content">Lorem ipsum</div>
    <input id="i42" name="handle2" type="checkbox" />
    <label for="i42">Four</label>
    <div class="content">Lorem ipsum</div>
</div>

Thanks for your reply. This seems to achieve what I need, however I'll need to try it as I've never made use of that level of CSS syntax. Would this work on the code found in my fiddle ? — joebegborg07, Nov 04 '15 at 08:19

score 0 · Answer 2 · answered Nov 04 '15 at 08:02

You can achieve all your needs in responsiveness with css media queries. If you specify max-width condition and describe all your necessary css-classes behaviour for specified width, you would have another stylings for current element at different resolution. For example,

.foo-class { background-color: green }

.foo-class:hover { background-color:red; color: white; }

@media only screen and (max-width: 768px) { .foo-class { background-color: blue; } .foo-class:hover { background-color: white; color: green; } }

So in this case when you have monitor/screen with actual width >768px element with class .foo-class will have green background and on hover it will be with red background and white text color. If your screen of width 768px or less, then this element will be of blue background and with white background and green text color on hover action. It does not need any additional javascript logic, its pretty simple.

Also you can use popular ui framework Bootstrap. It's very simple, has a lot of modern ui features and has built in responsive support

Thanks for your reply. I've tried using media, however with css I only managed to achieve the on hover action and not an on click event. Is it possible to achieve expand/collapse on click using Css ? — joebegborg07, Nov 04 '15 at 08:09
yes, with css transitions. i think that you realy need a bootstrap in your project. don't invent a bicycle - its already invented :) just use it and forget about must-have ui components/logic - its already written for you. its also does not matter on which screen width you expand/collapse element — Andrew, Nov 04 '15 at 08:31

CSS / Javascript - Mobile responsive menu for smaller screens

2 Answers2