Question

我最近开始使用媒体查询设计一个移动网站并浏览一些网站，看看他们做了什么，似乎手风琴导航菜单是要走的路，扩展到普通的水平导航栏。我浏览过并浏览了互联网，寻找手风琴演练，但我似乎无法找到足以解释它的方法。

一个很好的例子是他们网站上的microsoft。到目前为止，这是我的代码：

＆＃13;

<!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>

＆＃13;

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

感谢您的帮助。

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动画自动无法工作。请参阅：How can I transition height: 0; to height: auto; using 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');
    }
});

为Mobile Site Jquery和CSS创建一个Accordion菜单

3 个答案: