javascript - 使用 onclick 事件的响应式下拉菜单-6ren

javascript - 使用 onclick 事件的响应式下拉菜单

转载作者：行者123 更新时间：2023-11-28 14:40:18

我正在试验 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>

最佳答案

您不需要任何 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>

关于javascript - 使用 onclick 事件的响应式下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53048577/

文章推荐： php - Drupal 7 自定义 block

文章推荐： css - 我的 Facebook 应用程序的大小有问题

文章推荐： jquery - 将图像悬停在 td 中的文本上

文章推荐： javascript - 阻止位置 :relative from influencing the width of a child

javascript - onclick onclick 位于其他内部的元素上，也被 onclick 使用
这里有这样的问题，但我尝试了解决方案，但在我的情况下这不起作用。我有一个通过单击打开的表单，然后必须通过单击此表单内的 x 将其关闭。 This variant不适合，因为 cookie 在关闭表单后
Javascript 的 object.onClick 运行函数而不是设置 onClick，如何防止这种情况发生并只执行函数 onClick？
我有以下代码: function sdefaults() { alert("test"); } var btnpos, sbtn; btnpos = document.getElementsBy
onclick - 将 onclick 函数添加到提交按钮
我正在学习 javascript 和 php。我创建了一个联系表单，我希望按下提交按钮时可以完成两件事: 将数据提交给我(这部分正在运行) 阅读我的 onclick 函数(这部分不起作用) 我正在
javascript - onclick 关闭其他 onclicks
我的页面有多个div元素，有显示切换功能。 onclick = "document.getElementById('light').style.display='block';document.ge
javascript - onclick 属性与脚本中的 onclick
为什么不同？ document.getElementById('click').onclick = a.replaceChild(c,b) --- 在我不点击按钮的情况下替换元素但 onclick=
javascript - onclick 还是 onClick？
我以为在javascript中绑定(bind)点击事件是通过node.onclick来完成的，Chrome/Firefox似乎也同意我的看法，但我看到它写成.onClick here 3个人4次，所以
javascript - 如何添加到列表内的 onclick 函数，即

基本上，我想创建一个侧边栏，其中会有很多联系人。每个联系人都会出现在一个列表中。列表中有两个 onclick 函数。列表中两个 onclick 函数是:第一次点击-点击列表后它应该打开另一个侧边栏(我

onclick - Fullcalendar onclick 显示 dayview
我是 Javascript 的新手，尤其是在 JSON 和 Jquery 上。我已经成功实现了 FullCalendar 的月 View ，但是无论如何要根据用户单击月 View 的日期来显示或弹出日
javascript - 在传递参数的地方运行子级的 Onclick 但不运行父级的 Onclick
给定一些简单的 HTML，例如，其中一个元素具有 onclick 函数，并且它的子元素也具有 onclick 函数: 正确的方法是什么，以便当用户单击子元素时，仅执行子元素的 oncli
onclick - TinyMCE 没有在标签中添加 onClick 事件
我有一个功能，当您单击一个按钮时，TinyMCE 框内的选定文本被包装在 span 中标签。这是这样做的: var apolo = '' + sel + ''; tinyMCE.activeEdit
javascript - 如何在添加新的 onClick 事件之前清除 onClick？
我尝试使用 JavaScript 将 onclick 事件替换为其他 onclick 事件: 旧 onClick 事件: $('#myButton').click(function(){ a
javascript - 删除 onclick 函数中的事件监听器/onclick
我正在尝试删除一个函数中的事件监听器，该函数与 onclick 调用的函数相同。下面的例子说明了我的问题。我尝试使用这种构造的原因是将函数传递给 View 对象，以便它可以将其作为 onclick
jquery - 链接 onclick 与按钮 onclick
这是一个相当简单的可访问性问题。假设我们有一个切换链接/按钮，单击该链接/按钮即可切换移动菜单。对于这样的按钮，哪种格式更易于访问？我们总共有 4 个选项，用分隔 button标签与 a标签，
onclick - 如何将此 onclick() 函数转换为 onload()
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: How to make onclick automatically through onload function
javascript onclick 将 onclick 更改为新功能
我需要能够改变一个 id 的 onclick 事件，这样一旦它被点击，一旦它执行一个改变 onclick 事件的函数这是我的代码:Javascript: function showSearchBar
javascript - 反转 onClick 事件 onClick
有谁知道如何将 onClick 分配给执行一个操作的对象，然后当用户点击同一对象时，该操作被反转？ $('#image').click(function() { $('#foo').css({
android - 覆盖 onClick 并使用默认的 onclick
我重写了 onClick(View) 方法，以便在单击时 View 大小会发生变化。View 是一个显示浏览器网页的 webView。我需要点击会改变大小，而且浏览器会响应(转到被点击的链接)。在目前
javascript - onclick 检查输入字段是否为空然后将文本 onclick 更改为密码
我有这个 HTML 代码: APPLY JS: $('#changeType').click(function(){ $('#discountCode').attr('type','pass
Javascript onclick() 显示和 onclick() 隐藏
我想用 onclick 创建一个函数，如果我按下 div 就会显示内容。如果我点击该内容，它会给我“开始”表单。让我向您展示代码: HTML: click Javascript: var div =
javascript - 开关 onclick 事件 onclick
我编写了一个函数，用于使用超链接的占位符打开/关闭 div。 Open 然后 onclick 事件打开 div。我有这个onclick来关闭它: Close 我想要做的是为在两个 onclick 事

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 onclick 事件的响应式下拉菜单