点击时,我有一个从屏幕左侧弹出的垂直菜单。它内部的导航是垂直居中的,给它一个50%的顶部,并将translateY转换为-50%。当您打开菜单项并展开以显示该项目的子项时,这非常有用。一切都像它应该保持中心。我遇到的问题是,如果窗口不够高,我无法一直滚动到导航的顶部。出于某种原因,如果我关闭转换,我可以滚动就好了。所以我的想法是弄清楚jQuery / JS的顶部应该是什么,并在每次点击导航项时更改它。但是我不太确定translateY(-50%)实际上知道如何在jQuery中做什么。
以下是我的HTML示例:
<div class="nav">
<ul class="nav__accordion">
<li class="nav__item">
<div class="nav__toggle">
<div class="menu-home-container">
<ul id="menu-home" class="menu">
<li><a href="#">Home</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav__item">
<div class="nav__toggle">About</div>
<div class="nav__content">
<ul class="nav__subNav">
<div class="menu-about-section-container">
<ul id="menu-about-section" class="menu">
<li><a href="#">Overview</a></li>
<li><a href="#">By the Numbers</a></li>
<li><a href="#">Stillwater Complex</a></li>
<li><a href="#">Markets</a></li>
<li><a href="#">Altar Porphyry</a></li>
<li><a href="#">Marathon-Caldwell Complex</a></li>
<li><a href="#">History</a></li>
</ul>
</div>
</ul>
</div>
</li>
<li class="nav__item">
<div class="nav__toggle">Operations</div>
<div class="nav__content">
<ul class="nav__subNav">
<div class="menu-operations-section-container">
<ul id="menu-operations-section" class="menu">
<li><a href="#">Overview</a></li>
<li><a href="#">Mining</a></li>
<li><a href="#">Processing</a></li>
<li><a href="#">Recycling</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Mining Methods</a></li>
</ul>
</div>
</ul>
</div>
</li>
<li class="nav__item">
<div class="nav__toggle">Responsibility</div>
<div class="nav__content">
<ul class="nav__subNav">
<div class="menu-responsibility-section-container">
<ul id="menu-responsibility-section" class="menu">
<li><a href="#">Overview</a></li>
<li><a href="#">Health & Safety</a></li>
<li><a href="#">Environmental Stewardship</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Economic Sustainability</a></li>
</ul>
</div>
</ul>
</div>
</li>
<li class="nav__item">
<div class="nav__toggle">People</div>
<div class="nav__content">
<ul class="nav__subNav">
<div class="menu-people-section-container">
<ul id="menu-people-section" class="menu">
<li><a href="#">Overview</a></li>
<li><a href="#">Employment</a></li>
</ul>
</div>
</ul>
</div>
</li>
<li class="nav__item">
<div class="nav__toggle">Governance</div>
<div class="nav__content">
<ul class="nav__subNav">
<div class="menu-governance-section-container">
<ul id="menu-governance-section" class="menu">
<li><a href="#">Overview</a></li>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Committee Composition</a></li>
<li><a href="#">Governance Principals</a></li>
<li><a href="#">Code of Conduct</a></li>
<li><a href="#">By-Laws</a></li>
<li><a href="#">Communication with Directors</a></li>
</ul>
</div>
</ul>
</div>
</li>
<li class="nav__item">
<div class="nav__toggle">Investors</div>
<div class="nav__content">
<ul class="nav__subNav">
<div class="menu-investors-section-container">
<ul id="menu-investors-section" class="menu">
<li><a href="#">Overview</a></li>
<li><a href="#">Stock Information</a></li>
<li><a href="#">Annual Reports</a></li>
<li><a href="#">Quarterly Earnings</a></li>
<li><a href="#">News Releases</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">SEC Filings</a></li>
<li><a href="#">Analysts</a></li>
<li><a href="#">Estimates</a></li>
<li><a href="#">Annual Meeting</a></li>
<li><a href="#">Online Investor Kit</a></li>
<li><a href="#">Email Alerts</a></li>
<li><a href="#">Information Requests</a></li>
</ul>
</div>
</ul>
</div>
</li>
</ul>
</div>
我的CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, /*sub, sup,*/ tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* apply a natural box layout model to all elements */
.box-size {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
-webkit-text-size-adjust: 100%;
font-family: 'Lato', 'Helvetica', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: @white;
line-height: 24px;
font-size: 15px;
padding-bottom: 100px;
&.active {
overflow: hidden;
}
}
.navBar {
position: fixed;
background-color: #000;
width: 50px;
height: 100vh;
z-index: 10000;
left: 0;
border-right: 1px solid rgba(255, 255, 255, 0.1)
}
.navBar__closeButton {
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
width: 20px;
visibility: hidden;
opacity: 0;
z-index: 2;
-webkit-transition: all .25s 0s ease;
-moz-transition: all .25s 0s ease;
-ms-transition: all .25s 0s ease;
-o-transition: all .25s 0s ease
}
.navBar__closeButton.active {
visibility: visible;
opacity: 1;
-webkit-transition: all .5s .3s ease;
-moz-transition: all .5s .3s ease;
-ms-transition: all .5s .3s ease;
-o-transition: all .5s .3s ease;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
width: 20px;
z-index: 2
}
.navBar__burgerButton {
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
width: 30px;
z-index: 1;
opacity: 1;
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
-webkit-animation: open .3s .1s ease-in forwards;
-moz-animation: open .3s .1s ease-in forwards;
-ms-animation: open .3s .1s ease-in forwards
}
.navBar__burgerButton.active {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
-webkit-animation: close .3s 0s ease-in forwards;
-moz-animation: close .3s 0s ease-in forwards;
-ms-animation: close .3s 0s ease-in forwards
}
@-moz-keyframes close {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: 100%
}
}
@-webkit-keyframes close {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: 100%
}
}
@keyframes close {
0% {
stroke-dashoffset: 0
}
100% {
stroke-dashoffset: 100%
}
}
@-moz-keyframes open {
0% {
stroke-dashoffset: 100%
}
100% {
stroke-dashoffset: 0
}
}
@-webkit-keyframes open {
0% {
stroke-dashoffset: 100%
}
100% {
stroke-dashoffset: 0
}
}
@keyframes open {
0% {
stroke-dashoffset: 100%
}
100% {
stroke-dashoffset: 0
}
}
.nav {
background: url('../../uploads/2015/12/global/navGradient.png');
position: fixed;
background-color: rgba(0, 0, 0, 0.7);
width: 0;
height: 100vh;
z-index: 9500;
left: 50px;
overflow-x: hidden;
overflow-y: auto;
border: none
}
.nav.transWidth {
-webkit-transition: width .3s .1s ease;
-moz-transition: width .3s .1s ease;
-ms-transition: width .3s .1s ease;
-o-transition: width .3s .1s ease
}
.nav.active {
width: 300px
}
.nav__accordion {
height: auto;
margin: 0 auto;
position: relative;
display: block;
visibility: hidden;
overflow-x: hidden;
top: 50%;
opacity: 0;
-webkit-transition: all .3s .1s ease;
-moz-transition: all .3s .1s ease;
-ms-transition: all .3s .1s ease;
-o-transition: all .3s .1s ease;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%)
}
.nav__accordion.active {
visibility: visible;
opacity: 1;
-webkit-transition: all .3s .1s ease;
-moz-transition: all .3s .1s ease;
-ms-transition: all .3s .1s ease;
-o-transition: all .3s .1s ease
}
.nav__accordion a {
color: #fff;
text-decoration: none;
height: 100%;
width: 100%;
display: block
}
.nav__toggle {
color: #fff;
text-align: center;
height: 40px;
line-height: 40px;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
cursor: pointer;
-webkit-transition: all .2s 0s ease;
-moz-transition: all .2s 0s ease;
-ms-transition: all .2s 0s ease;
-o-transition: all .2s 0s ease
}
.nav__toggle:before {
content: "";
background-color: #c9a74c;
height: 40px;
width: 100%;
left: -300px;
position: absolute;
z-index: -1;
opacity: 0;
-webkit-transition: all .5s 0s ease;
-moz-transition: all .5s 0s ease;
-ms-transition: all .5s 0s ease;
-o-transition: all .5s 0s ease
}
.nav__toggle--mobile:before {
background-color: transparent
}
.nav__toggle:hover,
.nav__toggle:hover a {
color: #000
}
.nav__toggle:hover,
.nav__toggle--mobile:hover a {
color: #fff
}
.nav__toggle:hover:before {
left: 0;
opacity: 1;
-webkit-transition: all .5s 0s ease;
-moz-transition: all .5s 0s ease;
-ms-transition: all .5s 0s ease;
-o-transition: all .5s 0s ease
}
.nav__item {
height: 15%;
display: block
}
.nav__subNav li {
text-align: center;
color: #fff;
height: 35px;
line-height: 35px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.05);
-webkit-transition: all .2s 0s ease;
-moz-transition: all .2s 0s ease;
-ms-transition: all .2s 0s ease;
-o-transition: all .2s 0s ease
}
.nav__subNav li:hover {
background-color: rgba(201, 167, 76, 0.35)
}
.nav__subNav li.mobile:hover {
background-color: rgba(255, 255, 255, 0.05)
}
.nav__subNav li.hover {
background-color: rgba(201, 167, 76, 0.35) !important
}
.hover {
background-color: #c9a74c;
font-weight: 900
}
我的JS:
var navigation = {
openNav: function() {
$('.navBar__burgerButton').click(function() {
$('.nav, .pageDim, .pageWrap, .nav__accordion, .closeAll, body').addClass('active');
$(this).attr('class', 'navBar__burgerButton active');
$('.navBar__closeButton').attr('class', 'navBar__closeButton active');
if ($('.nav').hasClass('active')) {
$('.pageWrap').addClass('slidePageRight');
}
if (windowWidth <= 1080) {
$('body').css({
'overflow': 'hidden'
})
}
});
},
closeNav: function() {
$('.navBar__closeButton').click(function() {
closeNav();
});
var closeNav = function() {
$('.nav, .pageDim, .pageWrap, .nav__accordion, .closeAll, body').removeClass('active');
$('.navBar__burgerButton').attr('class', 'navBar__burgerButton');
$('.navBar__closeButton').attr('class', 'navBar__closeButton');
$('.navScrollBug').removeClass('active');
// Slides back to normal
if (!$('.nav').hasClass('active')) {
$('.pageWrap').removeClass('slidePageRight');
}
if (windowWidth <= 1080) {
$('body').css({
'overflow': ''
})
}
}
$('.closeAll').click(function() {
closeNav();
});
},
showScrollBug: function() {
var wH = $(window).height();
var nI = $('.nav__item').length;
var i = (nI * 50) + 81;
$('.navBar__burgerButton').on('click', function() {
if ($('.nav__toggle').hasClass('hover')) {
var c = $('.nav__toggle.hover').next().find('.nav__subNav').height();
var navH = i + c;
if (navH > wH) {
$('.navScrollBug').addClass('active');
} else {
$('.navScrollBug').removeClass('active');
}
}
});
$('.nav__item').on('click', function() {
$(this).toggleClass('open');
var c = $(this).find('.nav__subNav').height();
if ($(this).hasClass('open')) {
var navH = i + c;
$('.nav__item').not(this).removeClass('open');
if (navH > wH) {
$('.navScrollBug').addClass('active');
} else {
$('.navScrollBug').removeClass('active');
}
} else if (!$(this).hasClass('open')) {
$('.navScrollBug').removeClass('active');
}
});
},
accordion: {
dropDown: function() {
// Hides content on nav open
$('.nav__content').slideUp('fast');
// Navigation Accordion
$('.nav__accordion').find('.nav__toggle').click(function() {
//Expand or collapse this panel
$('.nav__content').removeClass('active');
$('.nav__accordion > li').removeClass('hover');
$(this).next().slideToggle('fast');
//Hide the other panels
$(".nav__content").not($(this).next()).slideUp('fast');
});
},
statusIndicator: function() {
var pathName = window.location.pathname;
var pathArray = pathName.split('/');
var arrayLength = pathArray.length;
var l = pathArray[arrayLength - 2];
$('.nav__accordion a').each(function() {
var n = $(this).attr('href');
var nn = $(this).html();
var sb = $('.sideBar a.active').html(); // Gets active state of investors sidebar nav
var hrefArray = n.split("/");
var hrefArrayLength = hrefArray.length;
var nl = hrefArray[hrefArrayLength - 2];
if (nl === l || nn === sb) {
$(this).closest('li').addClass('hover');
$(this).closest('.nav__content').siblings('.nav__toggle').addClass('hover');
$(this).closest('.nav__content').siblings('.nav__toggle').closest('.nav__item').addClass('open');
$(this).closest('.nav__content').slideDown();
}
});
},
keepHighlight: function() {
// Holds hover state on click for Navigation Accordion
$(".nav__toggle").click(function() {
$(".nav__toggle").removeClass('hover');
$(this).addClass('hover');
});
}
},
interiorStickyNav: function() {
// Interior Page NavPager Controls StickyNav
var stickyNav = $(".stickyNav");
var pathName = window.location.pathname;
var pathArray = pathName.split('/');
var arrayLength = pathArray.length;
var href = pathArray[arrayLength - 2];
if (href == "by-the-numbers") {
stickyNav.addClass("sticky");
} else {
$(window).scroll(function() {
if ($(window).scrollTop() > 250) {
stickyNav.addClass("sticky");
} else {
stickyNav.removeClass("sticky");
}
});
}
},
};
navigation.openNav();
navigation.closeNav();
navigation.showScrollBug();
navigation.accordion.dropDown();
navigation.accordion.statusIndicator();
navigation.accordion.keepHighlight();
navigation.interiorStickyNav();
这是我的jsfiddle:https://jsfiddle.net/Lfud2nk4/
答案 0 :(得分:0)
我认为你应该使用下面的jquery函数来解决你的问题: 给每个&#34; nav__toggle&#34;提供一个id字段。 div并使用此查询:
$(document).ready(function(){
$("#<your id name in nav__toggle>").click(function(){
$("#menu-investors-section").slideToggle("slow");
});
});
希望这就是你要找的东西。 如果我错了,请纠正我。