修复了单页网站问题中的切换菜单
Fixed Toggle Menu in One Page Website Issue
如何阻止菜单项在菜单栏前面滑动?
菜单项不应该在菜单栏前面滑动,应该简单地下拉,或者在后面滑动......
我究竟做错了什么?
谢谢
这里是 Fiddle
JS
//------This slides menu contet down ------:
$(document).ready(function(){
$("#menu-button").click(function(){
$("#menu-items").slideToggle("slow");
});
//----This brings menu content back up when an item is clicked -----:
$('#menu-items li a').on("click", function(){
$('#menu-items').slideUp();
});
});
//----this adds smooth scrolling and negative space for Header compensation ----:
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 75) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
});
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top -75)
}, 850);
return false;
}
}
});
});
CSS
body, html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
}
section { width: 100%; height: 100%; color: white;}
#section01, #section03, #section05 { background: #24354c; }
#section02, #section04, #section06 { background: #374962; }
#header {
width: 100%;
height: 75px;
position: fixed;
background-color: #152233;
top: 0px;
left: 0px;
}
#menu-items {
display:none;
list-style: none;
width: 100%;
margin:0;
padding-top: 75px;
}
#menu-items li {
border-bottom: 1px solid #297d35;
background-color: #67af32;
}
#menu-items li:hover {
background: #4a9529;
}
#menu-items li a{
text-decoration: none;
color: #fff;
display: block;
padding: 15px 0px;
font-family: sans-serif;
font-size:16px;
text-align: center;
}
#menu-button {
position: absolute;
cursor: pointer;
width: 40px;
height: 40px;
top: 18px;
right: 15px;
}
HTML
<div id="header">
<img id="menu-button" src="http://downtownkitchenmke.com/wp-content/uploads/2015/07/menuButton.png" alt="menu" border="0" width="340" height="40" />
<ul id="menu-items">
<li><a href="#section01">SECTION 01</a></li>
<li><a href="#section02">SECTION 02</a></li>
<li><a href="#section03">SECTION 03</a></li>
<li><a href="#section04">SECTION 04</a></li>
<li><a href="#section05">SECTION 05</a></li>
<li><a href="#section06">SECTION 06</a></li>
</ul>
</div>
<section id="section01"><h1>SECTION 01</h1></section>
<section id="section02"><h1>SECTION 02</h1></section>
<section id="section03"><h1>SECTION 03</h1></section>
<section id="section04"><h1>SECTION 04</h1></section>
<section id="section05"><h1>SECTION 05</h1></section>
<section id="section06"><h1>SECTION 06</h1></section>
我会在下拉列表前添加另一个 div,而不是尝试在菜单项列表中使用 Padding-top:
添加div'header-buffer':
<div id='header-buffer'></div>
<ul id="menu-items">
<li><a href="#section01">SECTION 01</a></li>
<li><a href="#section02">SECTION 02</a></li>
<li><a href="#section03">SECTION 03</a></li>
<li><a href="#section04">SECTION 04</a></li>
<li><a href="#section05">SECTION 05</a></li>
<li><a href="#section06">SECTION 06</a></li>
</ul>
删除 "menu-items" 的填充并添加 "header-buffer" 的高度:
#menu-items {
display:none;
list-style: none;
width: 100%;
}
#header-buffer {
width: 100%;
height:75px
}
如何阻止菜单项在菜单栏前面滑动? 菜单项不应该在菜单栏前面滑动,应该简单地下拉,或者在后面滑动...... 我究竟做错了什么? 谢谢
这里是 Fiddle
JS
//------This slides menu contet down ------:
$(document).ready(function(){
$("#menu-button").click(function(){
$("#menu-items").slideToggle("slow");
});
//----This brings menu content back up when an item is clicked -----:
$('#menu-items li a').on("click", function(){
$('#menu-items').slideUp();
});
});
//----this adds smooth scrolling and negative space for Header compensation ----:
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 75) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
});
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top -75)
}, 850);
return false;
}
}
});
});
CSS
body, html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
}
section { width: 100%; height: 100%; color: white;}
#section01, #section03, #section05 { background: #24354c; }
#section02, #section04, #section06 { background: #374962; }
#header {
width: 100%;
height: 75px;
position: fixed;
background-color: #152233;
top: 0px;
left: 0px;
}
#menu-items {
display:none;
list-style: none;
width: 100%;
margin:0;
padding-top: 75px;
}
#menu-items li {
border-bottom: 1px solid #297d35;
background-color: #67af32;
}
#menu-items li:hover {
background: #4a9529;
}
#menu-items li a{
text-decoration: none;
color: #fff;
display: block;
padding: 15px 0px;
font-family: sans-serif;
font-size:16px;
text-align: center;
}
#menu-button {
position: absolute;
cursor: pointer;
width: 40px;
height: 40px;
top: 18px;
right: 15px;
}
HTML
<div id="header">
<img id="menu-button" src="http://downtownkitchenmke.com/wp-content/uploads/2015/07/menuButton.png" alt="menu" border="0" width="340" height="40" />
<ul id="menu-items">
<li><a href="#section01">SECTION 01</a></li>
<li><a href="#section02">SECTION 02</a></li>
<li><a href="#section03">SECTION 03</a></li>
<li><a href="#section04">SECTION 04</a></li>
<li><a href="#section05">SECTION 05</a></li>
<li><a href="#section06">SECTION 06</a></li>
</ul>
</div>
<section id="section01"><h1>SECTION 01</h1></section>
<section id="section02"><h1>SECTION 02</h1></section>
<section id="section03"><h1>SECTION 03</h1></section>
<section id="section04"><h1>SECTION 04</h1></section>
<section id="section05"><h1>SECTION 05</h1></section>
<section id="section06"><h1>SECTION 06</h1></section>
我会在下拉列表前添加另一个 div,而不是尝试在菜单项列表中使用 Padding-top:
添加div'header-buffer':
<div id='header-buffer'></div>
<ul id="menu-items">
<li><a href="#section01">SECTION 01</a></li>
<li><a href="#section02">SECTION 02</a></li>
<li><a href="#section03">SECTION 03</a></li>
<li><a href="#section04">SECTION 04</a></li>
<li><a href="#section05">SECTION 05</a></li>
<li><a href="#section06">SECTION 06</a></li>
</ul>
删除 "menu-items" 的填充并添加 "header-buffer" 的高度:
#menu-items {
display:none;
list-style: none;
width: 100%;
}
#header-buffer {
width: 100%;
height:75px
}