[英]Responsive Navigation Bar Toggle Menu jQuery
当用户在屏幕尺寸 > 600px 的页面上单击任意位置后,导航列表项就会消失。
同样,正文中 9 个面板的背景设置为 100% 的宽度,但是背景仍然没有完全覆盖页面,左右仍然显示空间。
任何帮助找到这些问题的修复程序表示赞赏! :-)
/*navigation icon animation*/ var trigger='X'; jQuery(document).ready(function () { $('#toggle-menu').click(function () { trigger='X'; $(this).toggleClass('menu-is-active') }); /* click outside of nav to trigger navigation icon animation*/ $(document).click(function () { if (trigger=='X') { $("#toggle-menu").toggleClass(); trigger='ham'; } }); $("nav").click(function (e) { e.stopPropagation(); return false; }); /*----/----navigation icon animation*/ /*toggle menu*/ jQuery("#toggle-menu").click(function () { jQuery(".nav").slideToggle(); }); /* click outside of nav to close toggle*/ $(document).click(function () { $(".nav").hide(); }); $("#toggle-menu").click(function (e) { e.stopPropagation(); return false; }); /*----/----toggle menu*/ });
/****Landscape****/ /*global styles*/ .body { width: 100%; margin: 0; list-style: none; text-decoration: none; } a { color: #000000 } a:focus, a:hover { color: #484747; } a:active { color: #484747; } /*----/----global styles*/ /*Nav Bar*/ .header { background: #d3d3d3; width: 100%; position: fixed; top: 0; left: 0; z-index: 99999; } .nav { float: right; text-align: right; background-color: #d3d3d3; } .nav > li { display: inline-block; padding: 2px; padding-right: 30px; } /*----/----Nav Bar*/ /*Panels*/ .panel { width: 100%; height: 100%; background: #000000; text-align: center; } .panel .inner { padding-top: 10%; color: #df } .panel { color: #ffffff; } .panel.panel-blank { background: #ffffff; color: #000000; } /*----/----Panels*/ /*logo*/ .logo { float:left; display: inline-block; width: 15px; height: 15px; padding: 18px; cursor: pointer; } /*----/----logo*/ /****Portrait****/ @media (max-width: 600px) { /*global styles*/ .body { width: 100%; margin: 0; list-style: none; text-decoration: none; } .header { background: #d3d3d3; width: 100%; position: fixed; top: 0; left: 0; } .nav { position: fixed; width: 100%; text-align: center; display: none; background-color: #d3d3d3; left: 0; top: 39px; } .nav > li { display: block; float: center; border-bottom: 0.05em solid #000000; } .nav > li:last-child { border-bottom: none; } /*----/----global styles*/ /*logo*/ .logo { float:left; display: block; width: 15px; height: 15px; padding: 18px; cursor: pointer; } /*----/----logo*/ /*navigation icon*/ #toggle-menu { float:right; display: block; width: 15px; height: 15px; padding: 20px; cursor: pointer; } #toggle-menu div { width: 15px; height: 15px; position: relative; } #toggle-menu span { display: block; width: 15px; height: 3px; background: black; position: absolute; -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; -webkit-transform-origin: center; -moz-transform-origin: center; transform-origin: center; } #toggle-menu span.top { top: 0px; } #toggle-menu span.middle { top: 6px; } #toggle-menu span.bottom { top: 12px; } /*----/----navigation icon*/ /*navigation icon animation*/ #toggle-menu.menu-is-active span { -webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; } #toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle { top: 6px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } #toggle-menu.menu-is-active span.middle { opacity: 0; } #toggle-menu.menu-is-active span.bottom { top: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /*----/----navigation icon animation*/ } /*----/----Portrait*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="header"> <div class="navbar"> <a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a> <a id="toggle-menu"> <div> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> </a> <ul class="nav"> <li><a href="" style="display: inline-block; width:100%;">Home</a></li> <li><a href="#panel8" style="display: inline-block; width:100%;">About</a></li> <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li> <li><a href="#panel7" style="display: inline-block; width:100%;">Contact</a></li> </ul> </div> </div> <div class="panel" id="panel1"> <div class="inner"> 1 </div> </div> <div class="panel panel-blank" id="panel2"> <div class="inner"> 2 </div> </div> <div class="panel" id="panel3"> <div class="inner"> 3 </div> </div> <div class="panel panel-blank" id="panel4"> <div class="inner"> 4 </div> </div> <div class="panel" id="panel5"> <div class="inner"> 5 </div> </div> <div class="panel panel-blank" id="panel6"> <div class="inner"> 6 </div> </div> <div class="panel" id="panel7"> <div class="inner"> <P>contact</P> </div> </div> <div class="panel panel-blank" id="panel8"> <div class="inner"> <p>Social</p> </div> </div> <footer> <div class="panel " id="panel9"> <div class="inner"> Footer </div> </div> </footer>
我没有看到第 9 个面板的宽度有任何问题。
当然,根据您的话,这是您想要的。
用户在屏幕尺寸 > 600px 的页面上单击任意位置后,导航列表项消失
小提琴示例(根据您的评论更新) : https : //jsfiddle.net/wexd3spp/19/
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=600) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 600) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
});
好的,所以我自己复制了这个项目,并查看了您遇到的所有问题,并试图找到最简单的解决方案。
页面两侧间距的问题是因为您需要在css中添加以下内容:
body {
margin: 0;
}
对于不切换打开和关闭的导航,我执行了以下操作:
将此添加到您的CSS:
.show {
display: block!important;
}
然后我写了一些简单的 JQuery 来切换导航:
$('#toggle-menu').click(function(){
$('.nav').toggleClass('show');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.