单击响应式布局的下拉菜单答案

【问题标题】：Click Drop Down Menu for Responsive layout单击响应式布局的下拉菜单
【发布时间】：2014-04-22 15:54:41
【问题描述】：

我正在改进响应式导航菜单，并希望单击菜单图标以显示下拉菜单而不是悬停效果。我正在使用 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;

    }

【问题讨论】：

标签： css html drop-down-menu responsive-design

【解决方案1】：

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

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

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

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

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

【讨论】：

好的，也许我的 .js 文件链接错误，这是我的标题... Dan Meier 网站

【解决方案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

【讨论】：