尝试仅使用CSS制作移动导航菜单 [英] Trying to make mobile Nav Menu with only CSS
问题描述
我一直在这个网站上工作，并且正在使用媒体查询来根据屏幕尺寸调整视图的布局.对于手机大小，我想隐藏已经存在的导航，只显示一个简单的菜单"链接，单击该链接会显示导航菜单".我一直在进行研究，但是我正在寻找使用现有代码的最简单方法.任何想法将不胜感激.如果可能，我想远离javaScript.
I have been working on this website and am using media queries to adjust the layout of the view according to the screen size. For the mobile phone size I want to hide the navigation that is already in place and just show a simple "Menu" link that when clicked, displays the Nav Menu. I having been doing research, however I am looking for the simplest way possible with the code that I have. Any ideas would be greatly appreciated. I would like to stay away from javaScript if possible.
<nav>
<ul>
<li><a href="meetPractioner.html">Meet The Practioner</a></li>
<li><a href="servicesRates.html">Services & Rates</a></li>
<li><a href="bookAppointment.html">Book Appointment</a></li>
<li><a href="locationHours.html">Location & Hours</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="questions.html">Questions & Answers</a></li>
<li><a href="benefits.html">Benefits of Massage</a></li>
<li><a href="bodySense.html">Body Sense Magazine</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
这是我的jsFiddle，显示了CSS和其余代码. http://jsfiddle.net/Floyd/v723oqfc/
This is my jsFiddle that shows the CSS and the rest of the code. http://jsfiddle.net/Floyd/v723oqfc/
推荐答案
所以您可以做的是:
使用css创建一个名为menu-bttn的按钮:
Create a button called menu-bttn with the css:
a.menu-bttn {
display: none;
//Other properties
}
//You should really use javascript or jquery for button click rather than CSS
a.menu-bttn:focus > nav ul li a {
display: block;
}
...
@media only screen and (max-width:WIDTH) {
a.menu-bttn {
display: inline-block;
}
nav ul li a {
display: none;
width: 100%;
//positioning
}
}
jQuery点击方法:
JQuery Click Approach:
<script>
function toggleMenu() {
$('nav ul li a').slideToggle("fast");
}
</script>
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
OR
<script>
$(document).ready(function() {
$('.menu-bttn').click(function() {
$('nav ul li a').slideToggle("fast");
});
});
</script>
<a class="menu-bttn">Menu</a>
SlideToggle上的文档: http://api.jquery.com/slidetoggle/
Documentation On SlideToggle: http://api.jquery.com/slidetoggle/
您不必使用SlideToggle，还有其他选择: Toggle上的文档: http://api.jquery.com/toggle/
You dont HAVE to use SlideToggle, there are other options: Documentation On Toggle: http://api.jquery.com/toggle/
纯JavaScript方法:
Pure Javascript Approach:
<script>
var bttn = document.getElementsByClassName('menu-bttn');
var bttn = bttn[0];
function toggleMenu() {
var menu = document.getElementsById(//Id Of nav ul li a elements);
if (menu.style.display === 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
</script>
<html>
...
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
...
</html>
这篇关于尝试仅使用CSS制作移动导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
