为移动站点Jquery和CSS创建一个手风琴菜单
[英]Create an Accordion Menu for Mobile Site Jquery and CSS
问题描述
I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. 
我最近开始设计一个使用媒体查询的移动网站，并浏览一些网站以查看他们所做的工作，似乎手风琴导航菜单是行之有效的方法，可以扩展到普通的水平导航栏。 I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough. 我浏览并浏览了互联网，以查找手风琴演练，但似乎找不到足够的解释。
A good example is the one from microsoft on their website. 一个很好的例子是微软在其网站上发布的一个例子。 Here is my code so far: 到目前为止，这是我的代码：
<!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>
These navigation bars have submenus [ nav ul ul ] that slide out when nav ul li is clicked. 这些导航栏具有子菜单[ nav ul ul ]，这些子菜单在单击nav ul li时会滑出。 I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code. 我希望有人可以向我指出正确的方向，以便我可以在单击时制作一个向下滑动的子菜单，或者帮助我编写代码。
I thought there may have been a basic one people could start using and edit to customise themselves. 我认为可能有一个基本的人可以开始使用和编辑以自定义。
Thanks for any help. 谢谢你的帮助。
3 个解决方案
解决方案1
0 2015-06-19 09:07:53
Check this out 看一下这个
https://jsfiddle.net/nqamazgz/3/ https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. 不幸的是CSS没有任何点击事件，相反，您将需要使用JavaScript和/或jQuery。 I used jQuery 我用过jQuery
All i did was add a class hide-nav to your nav with display none. 我所做的只是在您的导航中添加了一个hide-nav类，并且没有显示。 And a button to click of course. 当然还有一个按钮。
And a bit of jQuery 还有一点jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
解决方案2
0 2015-06-19 09:09:20
There is no need for Javascript - you may use a Checkbox instead. 不需要Javascript-您可以改用Checkbox。 Check out: http://codepen.io/TimPietrusky/pen/CLIsl 检出： http : //codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this: 如果您仍然想使用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");
});
CSS animation for height form 0 to auto wont work. 高度格式为0的CSS动画无法自动运行。 See: How can I transition height: 0; 请参阅： 如何转换高度：0； to height: auto; 达到高度：自动； using CSS? 使用CSS？
解决方案3
0 2015-06-19 09:15:50
Try something like this: 尝试这样的事情：
http://jsfiddle.net/kb668aag/ http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit. 您需要稍微修改一下代码。
<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 的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: 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');
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.