我遇到的問(wèn)題是，我可以創(chuàng)建一個(gè)簡(jiǎn)單的可切換菜單，從無(wú)到塊切換顯示，但我很難理解如何使用我在網(wǎng)上找到的這種方法，這將允許我編碼切換菜單，但也有一個(gè)過(guò)渡菜單彈出和彈出，所以它看起來(lái)很干凈。
我已經(jīng)盡我所能，但由于我缺乏經(jīng)驗(yàn)，以及對(duì)語(yǔ)言的誤解，這使我無(wú)法得到我想要的東西，那就是一個(gè)水平菜單，可以平滑地滑入滑出。我將粘貼我的HTML，CSS和JS。
<body>
<header class="motto-header">
<strong>
WHEN YOU NEED A HAMMER TO SOLVE YOUR PROBLEMS
</strong>
</header>
<section class="site-header">
<div class="site-title">
<a href="index.html">
<h1>
<strong>
David J. Broderick LLC
</strong>
</h1>
</a>
</div>
<div class="nav-toggle">
<button h1 class="btn-nav">
Navigation
</button>
</div>
</section>
<div class="navigationSect" id="navbuttoning">
<a href="Services.html" >
<button class="nav-btn" id="navbuttoning">
Services
</button>
</a>
<a href="about.html">
<button class="nav-btn"id="navbuttoning">
About
</button>
</a>
<a href="contact.html">
<button class="nav-btn"id="navbuttoning">
Contact
</button>
</a>
<a href="info.html">
<button class="nav-btn"id="navbuttoning">
Information Center
</button>
</a>
</div>
<section class="banner">這是HTML中的相關(guān)部分。
.nav-toggle{
text-align:center;
height:4px;
font-size: 16px;
border: none;
cursor: pointer;
display: table;
}
.btn-nav{
margin-top:30px;
margin-bottom:30px;
margin-right:20px;
margin-left:20px;
padding-left:20px;
padding-right:20px;
justify-content: center;
text-align:center;
background-color: #ECC596;
align-items:center;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
display:table-cell;
vertical-align:center;
border-radius:25px;
z-index:15;
}
.navigationSect{
box-sizing:border-box;
display:flex;
flex-direction:row;
justify-content:center;
vertical-align: top;
width: 100vw;
opacity:100%;
z-index:-10;
height:0px;
transform: translateY(-100%);
transition: transform ease-out .3s;
transition: height ease-out .3s;
text-align:center;
margin:0px;
padding:0px;
list-style-type:0;
}
.navigationSect.is-open{
transform:(translateY(0));
height:100px;
}
.nav-btn{
z-index:0;
display: inline-block;
position:relative;
vertical-align: top;
height: 100%;
opacity:100%;
width:25vw;
color:white;
font-size:20px;
background:none;
box-sizing: border-box;
border: 0px solid #ccc;
font-family: 'Cormorant Garamond', serif;
transition: background-image 1s;
background-image:linear-gradient(#26373E,#26373e);
}
.nav-btn:hover{
background-image:linear-gradient(#26373e,#ECC596);
}這里的JS代碼大部分是從https://codepen.io/phebert/pen/yLybwWY復(fù)制/粘貼過(guò)來(lái)的
const drawerTransitioner = transitionHiddenElement({
element: document.querySelector('.navigationSect'),
visibleClass: 'is-open'
});
document.querySelector('.btn-nav').addEventListener('click', () => {
drawerTransitioner.show()
});
document.querySelector('.btn-nav').addEventListener('click', () => {
drawerTransitioner.hide()
});
/**
* Library code
* Using https://www.npmjs.com/package/@cloudfour/transition-hidden-element
*/
function transitionHiddenElement({
element,
visibleClass,
waitMode = 'transitionend',
timeoutDuration,
hideMode = 'hidden',
displayValue = 'block'
}) {
if (waitMode === 'timeout' && typeof timeoutDuration !== 'number') {
console.error(`
When calling transitionHiddenElement with waitMode set to timeout,
you must pass in a number for timeoutDuration.
`);
return;
}
// Don't wait for exit transitions if a user prefers reduced motion.
// Ideally transitions will be disabled in CSS, which means we should not wait
// before adding `hidden`.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
waitMode = 'immediate';
}
/**
* An event listener to add `hidden` after our animations complete.
* This listener will remove itself after completing.
*/
const listener = e => {
// Confirm `transitionend` was called on our `element` and didn't bubble
// up from a child element.
if (e.target === element) {
applyHiddenAttributes();
element.removeEventListener('transitionend', listener);
}
};
const applyHiddenAttributes = () => {
if(hideMode === 'display') {
element.style.display = 'none';
} else {
element.setAttribute('hidden', true);
}
}
const removeHiddenAttributes = () => {
if(hideMode === 'display') {
element.style.display = displayValue;
} else {
element.removeAttribute('hidden');
}
}
return {
/**
* Show the element
*/
show() {
/**
* This listener shouldn't be here but if someone spams the toggle
* over and over really fast it can incorrectly stick around.
* We remove it just to be safe.
*/
element.removeEventListener('transitionend', listener);
/**
* Similarly, we'll clear the timeout in case it's still hanging around.
*/
if (this.timeout) {
clearTimeout(this.timeout);
}
removeHiddenAttributes();
/**
* Force a browser re-paint so the browser will realize the
* element is no longer `hidden` and allow transitions.
*/
const reflow = element.offsetHeight;
element.classList.add(visibleClass);
},
/**
* Hide the element
*/
hide() {
if (waitMode === 'transitionend') {
element.addEventListener('transitionend', listener);
} else if (waitMode === 'timeout') {
this.timeout = setTimeout(() => {
applyHiddenAttributes();
}, timeoutDuration);
} else {
applyHiddenAttributes();
}
// Add this class to trigger our animation
element.classList.remove(visibleClass);
},
/**
* Toggle the element's visibility
*/
toggle() {
if (this.isHidden()) {
this.show();
} else {
this.hide();
}
},
/**
* Tell whether the element is hidden or not.
*/
isHidden() {
/**
* The hidden attribute does not require a value. Since an empty string is
* falsy, but shows the presence of an attribute we compare to `null`
*/
const hasHiddenAttribute = element.getAttribute('hidden') !== null;
const isDisplayNone = element.style.display === 'none';
const hasVisibleClass = [...element.classList].includes(visibleClass);
return hasHiddenAttribute || isDisplayNone || !hasVisibleClass;
},
// A placeholder for our `timeout`
timeout: null
};
}如果任何人可以提供任何提示或其他方法，將導(dǎo)致相同的目標(biāo)，這將是有益的。我只想明白我做錯(cuò)了什么，做什么才能變得更好。
如果我明白你在找什么，你可以點(diǎn)擊切換is-open類(lèi)。
此外，您正在重用相同的id。id應(yīng)該是唯一的。我會(huì)養(yǎng)成這樣的習(xí)慣，要么不到萬(wàn)不得已不使用它們，要么總是確保它們是獨(dú)一無(wú)二的。
let btn = document.querySelector(".btn-nav");
let sect = document.querySelector(".navigationSect");
btn.addEventListener("click",()=>{
sect.classList.toggle("is-open")
});.nav-toggle{
text-align:center;
height:4px;
font-size: 16px;
border: none;
cursor: pointer;
display: table;
}
.btn-nav{
margin-top:30px;
margin-bottom:30px;
margin-right:20px;
margin-left:20px;
padding-left:20px;
padding-right:20px;
justify-content: center;
text-align:center;
background-color: #ECC596;
align-items:center;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
display:table-cell;
vertical-align:center;
border-radius:25px;
z-index:15;
}
.navigationSect{
box-sizing:border-box;
display:flex;
flex-direction:row;
justify-content:center;
vertical-align: top;
width: 100vw;
opacity:100%;
z-index:-10;
height:0px;
transform: translateY(-100%);
transition: transform ease-out .3s;
transition: height ease-out .3s;
text-align:center;
margin:0px;
padding:0px;
list-style-type:0;
}
.navigationSect.is-open{
transform:(translateY(0));
height:100px;
}
.nav-btn{
z-index:0;
display: inline-block;
position:relative;
vertical-align: top;
height: 100%;
opacity:100%;
width:25vw;
color:white;
font-size:20px;
background:none;
box-sizing: border-box;
border: 0px solid #ccc;
font-family: 'Cormorant Garamond', serif;
transition: background-image 1s;
background-image:linear-gradient(#26373E,#26373e);
}
.nav-btn:hover{
background-image:linear-gradient(#26373e,#ECC596);
}<header class="motto-header">
<strong>
WHEN YOU NEED A HAMMER TO SOLVE YOUR PROBLEMS
</strong>
</header>
<section class="site-header">
<div class="site-title">
<a href="index.html">
<h1>
<strong>
David J. Broderick LLC
</strong>
</h1>
</a>
</div>
<div class="nav-toggle">
<button h1 class="btn-nav">
Navigation
</button>
</div>
</section>
<div class="navigationSect" id="navbuttoning">
<a href="Services.html" >
<button class="nav-btn" id="navbuttoning">
Services
</button>
</a>
<a href="about.html">
<button class="nav-btn"id="navbuttoning">
About
</button>
</a>
<a href="contact.html">
<button class="nav-btn"id="navbuttoning">
Contact
</button>
</a>
<a href="info.html">
<button class="nav-btn"id="navbuttoning">
Information Center
</button>
</a>
</div>