css和jquery中的响应式菜单，带有slideDown和slideUp效果答案

【问题标题】：Responsive menu in css and jquery with slideDown and slideUp effectscss和jquery中的响应式菜单，带有slideDown和slideUp效果
【发布时间】：2015-09-14 10:48:42
【问题描述】：

我在 css 中遇到了一些关于响应式菜单的问题。当菜单水平时一切正常，但是当浏览器宽度小于 700px 时，除了一个细节之外几乎所有东西都可以工作。我想 .menu 滑过 .content 并覆盖它们。我尝试了浮动和 z-index，但没有积极的结果。

基本上我需要菜单到 slideDown 和 slideUp 点击链接 Menu 的断点 @media all 和（最大-width:700px)

Code

<div class="navigator">
<div class="menu-icon">
    [MENU]
</div>
<div class="search">
    <input type="text">
</div>    
<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
    </ul>
</div>

内容

body, html
{
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigator
{
    background-color: #0171bb;
    overflow: hidden;
}
.menu-icon
{
    background-color: white;
    display: none;   
}
.menu
{
    width: 70%;
    float: left;
}
.menu ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}
.menu ul:after
{
    content:'';
    display:block;
    clear:both;
}
.menu ul li
{
    float: left;
    padding: 0.5em;
    text-align: center;
}
.menu ul li:hover
{
  background-color: #004f82;
}
.menu ul li a
{
    text-decoration: none;
    display: block;
    color: black;
}
.search
{
    float: right;
    width: 25%;
    padding: 0.4em 2.5%
}
.search input
{
    width: 100%;
    padding: 0.2em;
    border: none;
    background-color: #004f82;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    outline: none;
    color: white;
}
.content
{
    width: 100%;
    height: 4em;
    background-color: lightgray;
    text-align: center;
    padding: 1em;
}
@media all and (max-width:700px)
{
    .menu-icon
    {
        display: inherit;
        float:left;
    }
    .menu
    {
        width: 100%;
        float:left;
        z-index:2;
    }
    .content
    {
        z-index:1;
    }
    .search
    {
        width: 50%;
    }
    .menu ul li
    {
        width: 100%;
    }
}

【问题讨论】：

标签： html css menu responsive-design

【解决方案1】：

看来你需要position: absolute;:

.menu
{
    position: absolute;
    top: 32px;
    background-color: #0171bb;
}

DEMO

【讨论】：

【解决方案2】：

请使用 slideDown 代替 slidetoggle。我还建议将display:none; 应用于.menu 作为@media all and (max-width:700px) 断点。

这是一个 jquery 代码

<script type="text/javascript">

jQuery(function( $ ){
    var menu = $( ".menu" );
    $(".menu-icon").click(
    function( event ){
        // Prevent the default event.
        event.preventDefault();
        // Toggle the menu based on its current visibility.
        if (menu.is( ":visible" )){
            menu.slideUp( 2000 );
        } 
        else {
            menu.slideDown( 2000 );
        }
    }
    );
});

</script>

这里是FiddleDemo

这里是完整的jquery + css + html代码

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
body, html
{
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigator
{
    background-color: #0171bb;
    overflow: hidden;
}
.menu-icon
{
    background-color: white;
    display: none;   
}
.menu
{
    width: 70%;
    float: left;
}
.menu ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}
.menu ul:after
{
    content:'';
    display:block;
    clear:both;
}
.menu ul li
{
    float: left;
    padding: 0.5em;
    text-align: center;
}
.menu ul li:hover
{
  background-color: #004f82;
}
.menu ul li a
{
    text-decoration: none;
    display: block;
    color: black;
}
.search
{
    float: right;
    width: 25%;
    padding: 0.4em 2.5%
}
.search input
{
    width: 100%;
    padding: 0.2em;
    border: none;
    background-color: #004f82;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    outline: none;
    color: white;
}
.content
{
    width: 100%;
    height: 4em;
    background-color: lightgray;
    text-align: center;
    padding: 1em;
}
@media all and (max-width:700px)
{
    .menu-icon
    {
        display: inherit;
        float:left;
    }
    .menu
    {
        width: 100%;
        float:left;
        z-index:2;
        display:none;
    }
    .search
    {
        width: 50%;
    }
    .menu ul li
    {
        width: 100%;
    }
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

jQuery(function( $ ){
    var menu = $( ".menu" );
    $(".menu-icon").click(
    function( event ){
        // Prevent the default event.
        event.preventDefault();
        // Toggle the menu based on its current visibility.
        if (menu.is( ":visible" )){
            menu.slideUp( 2000 );
        } 
        else {
            menu.slideDown( 2000 );
        }
    }
    );
});

</script>
</head>
<body>
<div class="navigator">
    <div class="menu-icon">
        [MENU]
    </div>
    <div class="search">
        <input type="text">
    </div>    
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>
            <li><a href="#">Item Three</a></li>
            <li><a href="#">Item Four</a></li>
        </ul>
    </div>
 </div>
 <div class="content">
     Content
</div>
</body>
</html>

我已经改了jquery带来SLIDEDOWN和SLIDEUP效果

【讨论】：

根据您的喜好随意更改slideDown 和slideUp 效果参数。 :) 希望这能为您提供您正在寻找的完整解决方案。