CODEWITHSUNDEEP
javascriptjqueryhtml
Rodge
Rodge

Reputation: 61

Responsive menu disappear when browser expanded after ul was clicked

I'm trying to create a responsive menu (copied from youtube). It works fine when I re-size the browser, however I got a bug when I expand the browser, the menu doesn't appear after I clicked the "ul" tag. I need to refresh the page in order to display. here is my code.

<div class="main_nav">
    <div class="nav_wrapper">
        <div class="media_nav">
            <span id="menu">Menu</span>
        </div>
        <div class="menu_container">
            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></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="#">Menu 6</a></li>
                <li><a href="#">Menu 7</a></li>
            </ul>
        </div>
    </div>
</div>
<style type="text/css">
    .main_nav{
    width: 100%;
}
.nav_wrapper{
    width: 84%;
    margin: auto;
    padding: 15px 0;
    position: relative;
}
.menu_container{
    margin:0;
    padding: 10px;
}
.menu_container ul{
    float: right;
}
.menu_container ul li{
    list-style: none;
    float: left;
    padding: 0 10px;
}
.menu_container ul li a{
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
}
.menu_container ul li a:hover{
    opacity: .7;
}

.media_nav{
    position: absolute;
    right: 0;
    display: none;
}
.media_nav span:hover{
    cursor: pointer;
}


/* my meida query starts here */

@media screen and (min-width: 500px) and (max-width: 987px) {
    .nav_wrapper ul{
        display: none;
    }
    .nav_wrapper ul li{
        float: none;
        padding: 5px;   
    }
    div.nav-expanded{
        display: block;
    }
    .media_nav{
        display: block;
    }
}

</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").click(function(){
            $(".menu_container ul").slideToggle(400, function(){
                $(this).toggleClass("nav-expanded").css('display', '500');
            });
        });
    });
</script>

I suspect that my jquery has the problem. after the click event, I tried to expand it but the menu that is floated to the left didn't show up, the page needs to be refresh. Hope you can help me. Thanks!

Upvotes: 0

Views: 140

Answers (2)

KaMZaTa
KaMZaTa

Reputation: 741

You don't need of .css() function:

http://jsfiddle.net/94nx8sgu/

$(document).ready(function(){
    $("#menu").click(function(){
        $(".menu_container ul").slideToggle(400, function(){
            $(this).toggleClass("nav-expanded");
        });
    });
});

Upvotes: 1

backerman
backerman

Reputation: 26

remove .css('display', '500'); from the end of the toggleClass line

$("#menu").click(function () {
    $(".menu_container ul").slideToggle(400, function () {
        $(this).toggleClass("nav-expanded");
    });
});

http://jsfiddle.net/5q5rL3no/

Upvotes: 0

Related Questions