我为一个网站创建了一个简单的sidenav,它可以在单击菜单图标时显示和隐藏自己。我添加了一个过渡效果,因此它会顺利显示和隐藏。出于一些奇怪的原因,一旦我添加了trasition,侧边栏的菜单文本非常有趣,它在过渡期间变得越来越小。
https://codepen.io/paulamourad/pen/rrGVBd
/*-- Sidebar --*/
.close {
width: 0%;
background-color: green;
}
.navbar-toggler-icon {
cursor: pointer;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1B0088;
overflow-x: hidden;
transition: 0.5s;
/* TRANSITION HERE */
padding-top: 60px;
-webkit-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
-moz-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
}
.sidenav a {
white-space: nowrap;
padding: 4px 8px 4px 20px;
text-decoration: none;
font-size: 1em;
color: #b8b8b8;
display: block;
transition: 0.3s;
/*TRANSITION HERE */
}
.sidenav a:hover {
color: #fff;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #b8b8b8;
}
/* Top Navbar */
.navbar-blue,
.dropdown-menu {
background-color: #1b0088;
}
/* ::::::::::::::: RESPONSIVE CSS :::::::::::::::::: */
/* Mobile Phones (Starting at 576px and less) */
@media (max-width: 576px) {
.open {
width: 70%;
}
}
/* Tablets and Desktop */
@media (min-width: 577px) {
.open {
width: 20%;
}
}
<!-- BOOTSTRAP 4 CDN -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- /BOOTSTRAP 4 CDN -->
<!-- MY CODE -->
<!-- Top Navbar & Sidebar -->
<nav class="navbar navbar-expand-lg navbar-blue">
<a class="navbar-brand" href="#">
<img src="#" alt="Logo">
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="sidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Menu 1</a>
<hr>
<a href="#">Menu 2</a>
<hr>
<a href="#">Menu 3</a>
<hr>
<a href="#">Menu 4</a>
<hr>
<a href="#">Menu 5</a>
<hr>
</div>
<div class="top-navbar navbar-dark">
<!--span onclick="openNav()">☰</span> -->
<span onclick="openNav()" class="navbar-toggler-icon"></span>
</div>
</nav>
<!-- /Top Navbar & Sidebar -->
<!-- Scripts -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Sidenav Script -->
<script>
function openNav() {
$('#sidenav').removeClass('close');
$('#sidenav').addClass('open');
// document.getElementById("sidenav open").style.width = "20%";
$('.sidenav').css('-webkit-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
$('.sidenav').css('-moz-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
$('.sidenav').css('box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
}
function closeNav() {
$('#sidenav').removeClass('open');
$('#sidenav').addClass('close');
$('.sidenav').css('-webkit-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
$('.sidenav').css('-moz-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
$('.sidenav').css('box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>