CSS/Jquery - Navigation dropdown when viewing on mobile/tab

Question

I have a navigation bar with a drop-down hover on the sub menu which works fine on a desktop but doesn't work very well on a mobile device as it covers all the other tabs and also doesn't work well on a touch-screen, as soon as you take your finger off the dropdown the hover will disappears. I would like to be able to click the dropdown on the sub-menu and then stay there in a line. much like the navigation itself when in mobile view.

Jsfiddle Demo

HTML



    
        
        Home
        

        
        other tab
        

        
        dropdown
            
                
                other sub tab
                

                
                other sub tab
                

                
                other sub tab
                

                
                other sub tab
                

                
                other sub tab
                

                
                other sub tab
                

                
                other sub tab
                
            
        

        
        other tab
        

        
        other tab
        

        
        other tab
        

        
        other tab
        
    

Menu

CSS

nav {
    height:40px;
    width:100%;
    color:#fff;
    background:#86c024;
    font-size:11pt;
    position:relative
}

nav a {
    color:#fff;
    display:inline-block;
    width:auto;
    text-align:center;
    text-decoration:none;
    line-height:40px
}

nav ul {
    padding:0;
    margin:0 auto;
    max-width:1000px;
    width:100%
}

nav li {
    display:inline;
    float:left;
    height:40px;
/* this should be the same as your nav height */
    position:relative
/* this is needed in order to position sub menus */
}

nav li a {
    padding:0 15px;
    border-right:1px solid #fff;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
}

nav a:hover {
    background:#2098d1;
    color:#fff;
    width:100%
}

nav ul ul {
/* this targets all sub menus */
    display:none;
/* hide all sub menus from view */
    position:absolute;
    left:0;
    top:40px
/* this should be the same height as the top level menu -- height + padding + borders */
}

nav li li a {
    border:none;
    font-size:10pt
}

nav ul ul li {
/* this targets all submenu items */
    float:none;
/* overwriting our float up above */
    width:100px
/* This needs to match the value we set below */
}

nav ul ul li a {
/* target all sub menu item links */
    padding:5px 10px
}

nav ul li:hover > ul {
    display:inline-block;
/* show sub menus when hovering over a parent */
    background:gray;
    text-align:center;
    border:0;
    z-index:100
}

nav li a:link,a:visited {
    color:#fff
}

nav li:last-child a {
    border-right:0
}

nav ul li.current-menu-item a:link,nav ul li.current-menu-item a:visited,nav ul li.current-page-ancestor a:link,nav ul li.current-page-ancestor a:visited {
    font-weight:700;
    background:#2098d1;
    color:#fff
}

nav #pull {
    display:none
}

@media screen and (max-width: 600px) {
nav {
    height:auto
}

nav ul {
    width:100%;
    display:block;
    height:auto
}

nav li {
    width:100%;
    float:left;
    position:relative
}

nav li a {
    border-bottom:1px solid #fff;
    border-right:1px solid #fff
}

nav a {
    text-align:left;
    width:100%;
    text-indent:25px
}
}

@media only screen and (max-width : 600px) {
nav {
    border-bottom:0
}

nav ul {
    display:none;
    height:auto
}

nav #pull {
    display:inline-block;
    background:#86c024;
    width:100%;
    position:relative
}

nav #pull:after {
    content:"";
    background:red;
    width:30px;
    height:30px;
    display:inline-block;
    position:absolute;
    right:15px;
    top:10px
}
}

@media only screen and (max-width : 320px) {
nav ul li ul li {
    width:100%;
    height:auto
}

nav li {
    display:block;
    float:none;
    width:100%
}

nav li a {
    border-bottom:1px solid #576979
}
}

Javascript

$(function() {
        var pull        = $('#pull');
            menu        = $('nav .menu');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

nirmal · Accepted Answer

First of all you needed to correct some HTML, css and JS thing.

1) I kept your a menu opener tag before ul.

2) then disabled css menu hover open in 600 and 320 view

3) binded jquery click event if it has subchild menu.

$(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
});

You can view the below jsFiddle AND compare with your ones.

View Here

And I will suggest you, if you are newer then use bootstrap. It will be helpful for you. And will help you for faster developing.

Else if you were trying to learn, then it was good try. But remember there is always a chance of improvement.

CSS/Jquery - Navigation dropdown when viewing on mobile/tab

Answers (2)

Related Questions