0

Web サイトのナビゲーション バーをレスポンシブにしようとしています。デスクトップ ビューとタブレット ビューですべての作業を行っていますが、モバイル ビューでメニューが折りたたまれていると、クリックしても展開されません。以下は、インライン jQuery を含む私の html です。

<script>
$(document).ready(function() {  
    var pull        = $('#pull');  
        menu        = $('nav ul');  
        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');  
    }  
});

</script>
<nav class="clearfix">  
    <ul class="clearfix"; style="width:100%">  
                <li><a href="homepage.html">Home</a>
                </li>
                <li><a href="mobilestrategy.html">Mobile Strategy</a>

                </li>
                <li><a href="uiux.html">UI/UX</a>

                </li>
                <li><a href="development.html">Development</a>

                </li>
                <li><a href="qa.html">QA</a></li>
            </ul>
<a href="homepage.html" id="pull">Menu</a> 
</nav>

以下は、すべてのスタイルを設定する CSS です。

nav {  
    height: 40px;  
    width: 99%;  
    background:#bbddff;  
    font-size: .8em;  
    font-family:Gills Sans Light, Arial, sans-serif;  
    position: relative;  
    border-bottom: 2px solid #283744;
    color: #121976 /*dark blue*/;
    text-decoration: none;
    -webkit-box-shadow: 5x 5px 5px #88ccff;
    -moz-box-shadow: 5px 5px 5px #88ccff;
    box-shadow: 5px 5px 5px #88ccff;
    border: 3px ridge #aaccff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}


nav ul {  
    padding: 0;  
    margin: 0 auto;  
    width: 100%;
    height:50px;}


nav li {  
    display: inline;  
    float: left;  
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}

nav a {  
    color: #121976;  
    display: inline-block;  
    width: 100px;  
    text-align: center;  
    text-decoration: none;  
    line-height: 40px;  
    text-shadow: 1px 1px 0px #283744;  
}  

nav li a {  
    border-right: 3px ridge #aaccff;;  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
    border-right: 1 px solid #576979;  
}  
nav a:hover, nav a:active {  
    background-color: #121976;
    color:#bbddff;  
} 

nav a#pull {  
    display: none;  
}

/*Tablet styling*/

@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-right: 1px solid #576979;  
    }  
    nav a {  
        text-align: left;  
        width: 100%;  
        text-indent: 25px;  
    }  
} 
/*small tablet*/
@media only screen and (max-width : 480px) {  
    nav {  
        border-bottom: 0;  
    }  
    nav ul {  
        display: none;  
        height: auto;  
    }  
    nav a#pull {  
        display: block;  
        background-color: #bbddff;
        color:#121976;
        width: 100%;  
        position: relative;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }  
    nav a#pull:after {  
        content:"";  
        /*background: url('nav-icon.png') no-repeat;*/  
        width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;  
        top: 10px;
    }  
}  

/*Mobile view*/
@media only screen and (max-width : 320px) {  
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
        border-bottom: 1px solid #576979;  
    }  
}

ナビゲーション バーがモバイル ビューで機能しないようにしている jQuery コードに何か問題がありますか?

4

2 に答える 2