Responsive Nav - How to change menu icon when clicked

Question

I'm using this responsive menu: http://www.hongkiat.com/blog/responsive-web-nav/

I would like to have these two little improvements to the nav, but I can't seem to know how to do it:

1: When clicked on the menu icon I want the icon to change to a different icon. To be precise, I just want the menu icon (the 3 lines) to flip vertical when clicked. And when I hover the cursor on the flipped icon, I want to have the title: 'close menu'

2: I would also like the menu to close when I click outside of the menu. I've done what is suggested here, but the suggestion that is given also closes the menu when the menu icon is not shown.

jQuery:

$(function() {
    var pull       = $('#pull');
        menu       = $('.nav-top ul');
        menuHeight = menu.height();
    $(pull).on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        menu.slideToggle();
    });
    $(document).on('click',function(e){
        if(!menu.is(":hidden")){
            menu.slideToggle();
        }
    });
    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

CSS:

a#pull{display:none}
@media all and (min-width: 150px) and (max-width: 319px) { 
    .nav-top ul {
        display: none;
        height: auto;
        width: 100%
    }
    .nav-top li {
        width: 100%
    }
    .nav-top a {
        width: 100%;
        text-align: left;
        text-indent: 5px;
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979
    }
    .nav-top a#pull {
        background-color: #283744;
        display: block;
        position: relative;
        width: 100%
    }
    .nav-top a#pull:after {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAJklEQVQ4y2P8//8/AzUB438qmzhCDWQYeQaOJpvRZDMay0M/2QAA9B1Hzdwz85IAAAAASUVORK5CYII=)no-repeat;
        content: "";
        display: inline-block;
        height: 30px;
        position: absolute;
        right: 0;
        top: 10px;
        width: 22px
    }
}

EDIT 1:

JQUERY

$(function() {
            var pull    = $('.pull');
            menu        = $('.nav-top ul');
            menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.stopPropagation();
                e.preventDefault();
                menu.slideToggle();
            });if(pull.is(':visible')){
            $(document).on('click',function(e){
                if(!menu.is(":hidden")){
                    menu.slideToggle();
                }
            });}

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

            });
        });

html

<nav class="nav-top clearfix">
<ul class=clearfix>
<li><a class="home-link" href="/">Home</a></li>
<li><a class="biography-link" href="/biography">Biography</a></li>
<li><a class="music-link" href="/music">Music</a></li>
<li><a class="gallery-link" href="/gallery">Gallery</a></li>
<li><a class="agenda-link" href="/agenda">Agenda</a></li>
<li><a class="contact-link" href="/contact">Contact</a></li>
</ul>
<a href="#" class="pull" title="Open Menu">Menu</a>
<a href="#" class="pull" title="Close Menu">Menu</a>
</nav>

CSS

a.pull{display:none}
@media all and (min-width: 150px) and (max-width: 319px) { 
    .nav-top ul {
        display: none;
        height: auto;
        width: 100%
    }
    .nav-top li {
        width: 100%
    }
    .nav-top a {
        width: 100%;
        text-align: left;
        text-indent: 5px;
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979
    }
    .nav-top a.pull {
        background-color: #283744;
        display: block;
        position: relative;
        width: 100%
    }
    .nav-top a.pull:after {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAJklEQVQ4y2P8//8/AzUB438qmzhCDWQYeQaOJpvRZDMay0M/2QAA9B1Hzdwz85IAAAAASUVORK5CYII=)no-repeat;
        content: "";
        display: inline-block;
        height: 30px;
        position: absolute;
        right: 0;
        top: 10px;
        width: 22px
    }


.vertical {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAeElEQVQ4jcWSwQmAMBAEB7EAidp/JRpEEQyKDwvShxeU/DYPXQiBwAxH9uDDeOB8nU4VjIngVAUO2HIFDbAbtOYIggG7TTICgyKYgAWoFei/NMAM9ArkuRfD8fx2UASxltjzAbQ5gthzpcCpQNrzwu4peS/VCbJzAb0PK1vzdF+uAAAAAElFTkSuQmCC);
    content: "";
    display: inline-block;
    height: 30px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 22px;}

Kalip · Answer 1 · 2013-12-28T16:28:21.870

You could add a class when a click is done.

$(pull).on('click', function(e) {
pull.addClass('.vertical')

Then you edit the vertical class :

.yourbutton .vertical {
    ...
    float: left;
    height: 18px;
    margin-right: 5px;
    margin-top: 1px;
    width: 2px;}

You will have to remove the class, so this code is better than the first :

if(!menu.is(":hidden")){
    pull.addClass('.vertical');
} else {
    pull.removeClass('vertical');
}

And finally, add an attribute title : a href"#" title="Close menu" id="pull"

Make the animation only if pull is visible :

if(pull.is(':visible')){
// Do your stuff
}

Then, your css file should be like this :

#pull{display:none;}

@media only screen and (max-width : 320px) {
    #pull{display:block}
}

Hoping it will help you !

I've done what you said, but the close menu button always shows beneath the open menu button. The second solution only works if I reload the page when the window width is <320, but if I then maximize the window and click outside of the menu, the menu items disappears. Please see post edit, maybe I did something wrong. — Eric, Dec 29 '13 at 18:23

Responsive Nav - How to change menu icon when clicked

1 Answers1