Question

我正在改进响应式导航菜单，并希望点击菜单图标以显示下拉菜单而不是悬停效果。我正在使用Google jquery，所以我不确定是否已经在脚本src中编写了所有脚本，并且我必须在jquery中手动创建下拉菜单，或者只是简单的CSS或html5修复。感谢您的任何反馈。

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Dan Meier Website</title>

<meta name="description" content="Responsive Header Nav">

<meta name="author" content="Treehouse">

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

<link rel="stylesheet" href="layoutnew.css">

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


</head>

<body>

<header>

<a href="#" id="logo"></a>

<nav>

<a href="#" id="menu-icon"></a>

<ul>

<li><a href="#" class="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

CSS

header {

    background: #404040;
    width: 100%;
    height: 76px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 4px solid #4C9CF1;
    z-index: 100;

}

#logo{

    margin: 20px;
    float: left;
    width: 200px;
    height: 40px;
    background: img src="images/menuicon.png" no-repeat center;
    display: block;

}

nav {

    float: right;
    padding: 20px;  

}

#nav ul.sub-nav {
    display: none;
}

#nav ul.visible {
    display: block;
}
ul {

    list-style: none;

}

li {

    display: inline-block;
    float: left;
    padding: 10px

}

/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {

    header {

        position: absolute;

    }

    #menu-icon {

        display:inline-block;

    }

    nav ul, nav:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

Answer 1

使用CSS设置样式并隐藏菜单并执行以下操作：

加载jQuery（我在代码中看不到）

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

你可以做这样的事情（点击时显示和隐藏菜单）

$('#menu-icon').click( function(){
   $('nav ul').toggle();
});

Answer 2

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

其中“menu”是菜单的变量值。你可以宣布它像......

 $(function() {  
            var menu        = $('ul li');
});

希望它会帮助你.....：D Rj

单击“下拉菜单”以获取响应式布局

2 个答案: