为移动站点Jquery和CSS创建一个手风琴菜单

Question

我最近开始设计一个使用媒体查询的移动网站，并浏览一些网站以查看他们所做的工作，似乎手风琴导航菜单是行之有效的方法，可以扩展到普通的水平导航栏。 我浏览并浏览了互联网，以查找手风琴演练，但似乎找不到足够的解释。

一个很好的例子是微软在其网站上发布的一个例子。 到目前为止，这是我的代码：

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> body { padding: 0; margin: 0; } #topMenu { height: 50px; width: 100%; background-color: #cde; display: block; } nav { width: 100%; height: auto; display: block; margin: 0; padding: 0; } nav a { text-decoration: none; padding-left: 40px; } nav ul { list-style: none; display: block; margin: 0; padding: 0; background-color: #ccc; } nav ul li { display: block; width: 100%; padding: 20px 0px 20px 0px; border-top: 2px solid #abc; } nav ul ul { height: 0; overflow: hidden; padding-top: 0px; } nav ul ul li a { padding-left: 100px; } </style> </head> <body> <div id="topMenu"></div> <nav> <ul> <li><a href="">Link</a></li> <li><a href="">Link</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> <li><a href="">Link 5</a></li> <li><a href="">Link 6</a></li> <li><a href="">Link 7</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> <li><a href="">Link 5</a></li> <li><a href="">Link 6</a></li> <li><a href="">Link 7</a></li> </ul> </li> <li><a href="">Link</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> </ul> </li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> <li><a href="">Link</a></li> </ul> </nav> </html>

这些导航栏具有子菜单[ nav ul ul ]，这些子菜单在单击nav ul li时会滑出。 我希望有人可以向我指出正确的方向，以便我可以在单击时制作一个向下滑动的子菜单，或者帮助我编写代码。
我认为可能有一个基本的人可以开始使用和编辑以自定义。

谢谢你的帮助。

Answer 1

看一下这个

https://jsfiddle.net/nqamazgz/3/

不幸的是CSS没有任何点击事件，相反，您将需要使用JavaScript和/或jQuery。 我用过jQuery

我所做的只是在您的导航中添加了一个hide-nav类，并且没有显示。 当然还有一个按钮。

还有一点jQuery

$(document).ready(function() {
    $('#topMenu-btn').on('click', function() {
        $('nav').slideToggle();
    });
});

Answer 2

不需要Javascript-您可以改用Checkbox。 检出： http : //codepen.io/TimPietrusky/pen/CLIsl

如果您仍然想使用Javascript进行操作，请执行以下操作：

// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
    // prevent Click from redirecting
    e.preventDefault();
    // get the next ul after the li a clicked
    if ($(this).hasClass('visible')) {
        $(this).next('ul').slideUp(200).removeClass("visible");
    } $(this).next('ul').slideDown(200).addClass("visible");
});

高度格式为0的CSS动画无法自动运行。 请参阅：如何转换高度：0； 达到高度：自动； 使用CSS？

Answer 3

尝试这样的事情：

http://jsfiddle.net/kb668aag/

您需要稍微修改一下代码。

    <div id="topMenu"></div>
    <nav>
        <ul>
            <li><a href="">Link</a></li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                    <li><a href="">Link 5</a></li>
                    <li><a href="">Link 6</a></li>
                    <li><a href="">Link 7</a></li>
                </ul>
            </li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                    <li><a href="">Link 5</a></li>
                    <li><a href="">Link 6</a></li>
                    <li><a href="">Link 7</a></li>
                </ul>
            </li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                </ul>
            </li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </nav>

的CSS

body {
padding: 0;
margin: 0;
}

#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}

nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}

nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}

nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
} 

nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}

nav ul ul {
overflow: hidden;
padding-top: 0px;
}

nav ul ul li a {
padding-left: 100px;
}

ul.sub-menu{
    display: none;
}
.has_children > a{
    color: #ddd;
}

JS：

var $menu_with_children = $('.has_children > a');

$menu_with_children.on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
        $this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
    } else{
        $this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
    }
});

为移动站点Jquery和CSS创建一个手风琴菜单

问题描述

3 个解决方案

解决方案1
0 2015-06-19 09:07:53

解决方案2
0 2015-06-19 09:09:20

解决方案3
0 2015-06-19 09:15:50

为移动站点Jquery和CSS创建一个手风琴菜单

问题描述

3 个解决方案

解决方案1 0 2015-06-19 09:07:53

解决方案2 0 2015-06-19 09:09:20

解决方案3 0 2015-06-19 09:15:50

解决方案1
0 2015-06-19 09:07:53

解决方案2
0 2015-06-19 09:09:20

解决方案3
0 2015-06-19 09:15:50