时间戳

首页 > 解决方案 > 使用 onclick 事件的响应式向下切换菜单

javascript - 使用 onclick 事件的响应式向下切换菜单

问题描述

我正在尝试使用 css 响应式布局，并且正在尝试使用 onclick 事件创建一个向下切换菜单。我创建了这个菜单，您可以在下面找到它。是我的第一个带有响应式菜单的项目，我正在考虑使用一些基本的 Javascript 代码来使其向下和向内滚动。不幸的是，由于某种原因，当我尝试再次按下它以使其消失时，该按钮不起作用。

我遇到的另一个问题是，当我尝试在导航栏打开的情况下将窗口大小从 992px 调整为全尺寸时，因为高度保持 450px 并且显示变回 flex。我希望我能清楚地解释自己。

let toggleNavStatus= false;

function togglemenu(){

let getNavBar = document.querySelector(".navbar");
let getNavBarUl = document.querySelector(".navbar ul");

if(toggleNavStatus === false){
getNavBar.style.height ="450px";
    
getNavBarUl.style.height="400px";
let toggleNavStatus= true;
}

if(toggleNavStatus === true){
getNavBar.style.height ="0px";
    
getNavBarUl.style.height="0px";
let toggleNavStatus= false;
}
}
*{
box-sizing: border-box;
padding:0px;
margin:0px;
}
body{
background-color:#ffffff;
}



/*---------------------------------------------NAVBAR-----------------------------------------*/

.navbar{

background-color:#1e3581;
width:100%;
max-width: auto;
box-shadow: 5px ;
display:flex;
justify-content: space-between;
position:relative;


}
.togglemenu i {
color:white;
font-size:27px;
margin:10px 30px; ;
border: 2px solid white;
padding:5px 8px;
border-radius: 5px;
position:absolute;
z-index: 1;
top:0px;
left:0px;
text-align: center;
display:none;
}
.navbar ul{
display:flex;
list-style: none;
height:30px;
text-align: center;
margin:14px 0 14px 0;
opacity:1;
}
.navbar ul li{

border-right:1px white solid;
padding: 3px 20px 3px;
}

.navbar ul li:hover a {
color:yellow;
}
.navbar ul li:last-child{
border-right: none;
}

.button{
width: 90px;
border-radius: 5px;
height:35px;
margin-top:11px;
font-size:18px;
background-color:#1e3581;
border: 1px white solid;
color:white;
margin-right:20px;
}

button:hover{
color:yellow;
border: 1px yellow solid;

}

.navbar ul li a i{
padding-left:10px;
transition:0.5s;

}
.navbar ul li a .icons .fa{

width:100%;
height:100%;
font-size: 25px;

    
}
.navbar ul li a .icons{
overflow:hidden;
height:25px;
width:50px;

}
.navbar ul li a:hover i{
transform: translateY(-100%);
color:yellow;

}
/*------------------------navbar text-------------------------*/
.navbar ul li a{
color:white;
text-decoration: none;
font-family: helvetica;
font-weight: 500;
font-size:15px;
display:flex;
align-items:center;
}


.navbar ul li a .Name{
position:relative;
height:100%;
overflow: hidden;
white-space: nowrap;


display:block;
}

.navbar ul li a span:before{
content: attr(data-text);
position:absolute;
left:0;
top:-100%;
width:100%;
height: 100%;
}
.navbar ul li a span{
display:block;
transition:0.5s;



}
.navbar ul li a:hover span{
transform: translateY(15px);
}

/*---------------MEDIA Q-------------------*/   
@media(max-width: 992px){
.foto{
flex:1 0    49%;
}
#map{
display:none; 
}  
.navbar{    
display:block;
height:60px;
overflow: hidden;
transition:all 0.3s ease-in-out;

}
.navbar ul{
display:block;
height:100%;
padding:10px;
margin:0px;
padding-top:60px;
width:100%
opacity:0;
}
.navbar ul li{
border-bottom:1px white solid;
padding: 20px 0px 3px;
border-right:none;

overflow: hidden;

}
.navbar button{    
margin:10px 30px;;

}
.navbar ul li a{
color:white;
text-decoration: none;
font-family: helvetica;
font-weight: 500;
}
.togglemenu i {
color:white;
font-size:27px;
margin:10px 30px; ;
border: 2px solid white;
padding:5px 8px;
border-radius: 5px;
position:absolute;
z-index: 1;
top:0px;
left:0px;
text-align: center;
display:inline;

 
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>
    
<body>
    <div class="togglemenu" onclick="togglemenu()"><i class="fa fa-bars" aria-hidden="true"></i></div>
<div class="navbar">

<ul>
    <li><a href="#"><div class="icons"><i class="fa fa-home" aria-hidden="true"></i><i class="fa fa-home" aria-hidden="true"></i></div><div class="Name"><span data-text="Home">Home</span></div></a></li>
<li><a href="#"><div class="icons"><i class="fa fa-h-square" aria-hidden="true"></i><i class="fa fa-h-square" aria-hidden="true"></i></div><div class="Name"><span data-text="Hotel">Hotel</span></div></a></li>
<li><a href="#"><div class="icons"><i class="fa fa-plane" aria-hidden="true"></i><i class="fa fa-plane" aria-hidden="true"></i></div><div class="Name"><span data-text="Flight">Flight</span></div></a></li>
<li><a href="#"><div class="icons"><i class="fa fa-bed" aria-hidden="true"></i><i class="fa fa-bed" aria-hidden="true"></i></div><div class="Name"><span data-text="Hotel and Flight">Hotel and Flight</span></div></a></li>
    <li><a href="#"><div class="icons"><i class="fa fa-sun-o" aria-hidden="true"></i><i class="fa fa-sun-o" aria-hidden="true"></i></div>
<div class="Name"><span data-text="Special Offer">Special Offer</span></div></a></li>
<li><a href="#"><div class="icons"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-globe" aria-hidden="true"></i></div>
<div class="Name"><span data-text="Thinks to do">Things to do</span></div></a></li>
    <li><a href="#"><div class="icons"><i class="fa fa-arrow-down" aria-hidden="true"></i><i class="fa fa-arrow-down" aria-hidden="true"></i></div><div class="Name"><span data-text="More">More</span></div></a></li>

</ul>

<button class="button">Login</button>
</div>

<script src="javascript.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

您不需要任何 Javascript。最佳实践是使用 CSS 类而不是直接弄乱高度值。并且已经有一种切换类的方法。请注意，我在 UL 中删除了 display:flex，因为它只会弄乱显示。

function togglemenu() {

  let NavBar = document.querySelector(".navbar");
  
  NavBar.classList.toggle("open");
}
* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

body {
  background-color: #ffffff;
}


/*---------------------------------------------NAVBAR-----------------------------------------*/

.navbar {
  background-color: #1e3581;
  width: 100%;
  max-width: auto;
  box-shadow: 5px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.togglemenu i {
  color: white;
  font-size: 27px;
  margin: 10px 30px;
  ;
  border: 2px solid white;
  padding: 5px 8px;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  text-align: center;
  display: none;
}

.navbar ul {
  list-style: none;
  height: 30px;
  text-align: center;
  margin: 44px 0 14px 0;
  opacity: 1;
}

div.navbar.open {
  height: 450px;
}

div.navbar.open ul {
  height: 400px;
}

.navbar ul li {
  border-right: 1px white solid;
  padding: 3px 20px 3px;
}

.navbar ul li:hover a {
  color: yellow;
}

.navbar ul li:last-child {
  border-right: none;
}

.button {
  width: 90px;
  border-radius: 5px;
  height: 35px;
  margin-top: 11px;
  font-size: 18px;
  background-color: #1e3581;
  border: 1px white solid;
  color: white;
  margin-right: 20px;
}

button:hover {
  color: yellow;
  border: 1px yellow solid;
}

.navbar ul li a i {
  padding-left: 10px;
  transition: 0.5s;
}

.navbar ul li a .icons .fa {
  width: 100%;
  height: 100%;
  font-size: 25px;
}

.navbar ul li a .icons {
  overflow: hidden;
  height: 25px;
  width: 50px;
}

.navbar ul li a:hover i {
  transform: translateY(-100%);
  color: yellow;
}


/*------------------------navbar text-------------------------*/

.navbar ul li a {
  color: white;
  text-decoration: none;
  font-family: helvetica;
  font-weight: 500;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.navbar ul li a .Name {
  position: relative;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.navbar ul li a span:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
}

.navbar ul li a span {
  display: block;
  transition: 0.5s;
}

.navbar ul li a:hover span {
  transform: translateY(15px);
}


/*---------------MEDIA Q-------------------*/

@media(max-width: 992px) {
  .foto {
    flex: 1 0 49%;
  }
  #map {
    display: none;
  }
  .navbar {
    display: block;
    height: 60px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }
  div.navbar.open {
    height: 450px;
  }
  div.navbar.navbar-open ul {
    height: 400px;
  }
  .navbar ul li {
    border-bottom: 1px white solid;
    padding: 20px 0px 3px;
    border-right: none;
    overflow: hidden;
  }
  .navbar button {
    margin: 10px 30px;
    ;
  }
  .navbar ul li a {
    color: white;
    text-decoration: none;
    font-family: helvetica;
    font-weight: 500;
  }
  .togglemenu i {
    color: white;
    font-size: 27px;
    margin: 10px 30px;
    ;
    border: 2px solid white;
    padding: 5px 8px;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    text-align: center;
    display: inline;
  }

}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stylesheet.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>
  <div class="togglemenu" onclick="togglemenu()"><i class="fa fa-bars" aria-hidden="true"></i></div>
  <div class="navbar">

    <ul>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-home" aria-hidden="true"></i><i class="fa fa-home" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="Home">Home</span></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-h-square" aria-hidden="true"></i><i class="fa fa-h-square" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="Hotel">Hotel</span></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-plane" aria-hidden="true"></i><i class="fa fa-plane" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="Flight">Flight</span></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-bed" aria-hidden="true"></i><i class="fa fa-bed" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="Hotel and Flight">Hotel and Flight</span></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-sun-o" aria-hidden="true"></i><i class="fa fa-sun-o" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="Special Offer">Special Offer</span></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-globe" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="Thinks to do">Things to do</span></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icons"><i class="fa fa-arrow-down" aria-hidden="true"></i><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
          <div class="Name"><span data-text="More">More</span></div>
        </a>
      </li>

    </ul>

    <button class="button">Login</button>
  </div>

  <script src="javascript.js"></script>
</body>

</html>

推荐阅读