[英]How can I animate a toggled navigation bar without jQuery or Bootstrap?
I've gotten a functional toggling navbar, but am completely lost on how to go about animating it, like Bootstrap does.我已经获得了一个功能性的切换导航栏,但是我完全不知道如何像 Bootstrap 那样对其进行动画处理。 I have it set up so that the JS adds and removes the 'display-menu' class to the navbar, and am not really sure how to make the menu items slide in. I'm not really sure whether this would be a CSS-based solution, JS-based solution, or both.
我已经设置好了,以便 JS 向导航栏添加和删除“显示菜单”类,但我不确定如何使菜单项滑入。我不确定这是否是 CSS-基于解决方案,基于 JS 的解决方案,或两者兼而有之。 Any ideas or pointers on how to approach this?
关于如何解决这个问题的任何想法或指示? This is what I've got going on already (Please excuse the Django tags):
这就是我已经在做的事情(请原谅 Django 标签):
HTML: HTML:
<navbar>
<ul id="navbar" class="nav-list">
<li class="nav-item">
<a href="#">
<img src="{% static 'dblfree/img/logo-circle.png' %}" alt="Logo">
</a>
</li>
<li class="nav-item toggle">
<button class="btn-primary" onclick="toggleNavbar()">☰</button>
</li>
<li class="nav-item">
<a href="#">Blog</a>
</li>
<li class="nav-item">
<a href="#">About</a>
</li>
<li class="nav-item">
<a href="#">Portfolio</a>
</li>
<li class="nav-item">
<button class="btn-primary">Contact</button>
</li>
</ul>
</navbar>
CSS: CSS:
:root {
--clr-primary: #047c84;
--clr-shadow: #cfd8dc;
--radius: 0.5rem;
}
body {
background-color: #f0f7f8; /* TEMP */
font-family: 'Montserrat', sans-serif;
padding: 1rem;
}
.nav-list {
background: white;
box-shadow: 0px 0px 10px var(--clr-shadow);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-item {
list-style: none;
margin-right: 2rem;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
}
.nav-item a:hover {
color: var(--clr-primary);
}
.nav-item:first-child {
margin-right: auto;
margin-left: 2rem;
}
.nav-item img {
width: 50px;
}
.btn-primary {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
background: none;
border: 2px solid var(--clr-primary);
outline: none;
border-radius: var(--radius);
padding: 0.5rem 1rem;
transition: all 200ms ease-in;
}
.btn-primary:hover {
color: white;
background: var(--clr-primary);
}
.toggle {
display: none;
}
@media screen and (max-width: 600px) {
body {
padding: 0;
}
.toggle {
display: block;
}
.nav-list {
border-radius: 0;
flex-wrap: wrap;
}
.nav-list li:nth-child(n+3) {
width: 100%;
text-align: right;
margin-top: 2rem;
display: none;
}
.nav-list.display-menu .nav-item {
display: block;
transition: all 800ms;
}
}
JavaScript: JavaScript:
function toggleNavbar() {
let navbar = document.getElementById("navbar");
if (navbar.className === "nav-list") {
navbar.className += " display-menu";
}
else {
navbar.className = "nav-list";
}
}
add a link tag to the closing and opening button.向关闭和打开按钮添加链接标签。 and add onclick="opennav()" to the opening link and onclick="closenav()" to the closing link.
并将 onclick="opennav()" 添加到打开链接,将 onclick="closenav()" 添加到关闭链接。
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.