将鼠标悬停在按钮上可以显示包含子菜单的菜单

时间：2018-08-01 14:45:36

标签： javascript html css

我正在尝试创建菜单。我想要的是具有3行的菜单按钮（以表示其菜单）。

当用户将鼠标悬停在此按钮上时，我希望它显示另外两个按钮，我们称它们为按钮B和按钮C。

当用户将鼠标悬停在按钮B或C上时，我希望它显示一个列表，并且当用户停止将鼠标悬停在此列表上时使其不显示。

这是我的fiddle。

我的按钮B和C几乎可以满足我的要求，唯一的部分是，如果用户单击另一个按钮，则仍然显示另一个按钮的列表，不确定如何解决此问题？

最后我不知道如何用三行初始按钮来显示我的按钮B和C？

HTML 

 <!DOCTYPE html>
 <html lang='en'>
 <head>
 <meta charset='UTF-8' />
 <title>Floats</title>
 <link rel='stylesheet' href='styles.css'/>
 </head>
 <body>
  <div class='page'>
  <div class='menu'>
       <div class="sidenav">
  <button class="dropdown-btn">Region</button>
  <div class="dropdown-container">
  <ul id="regionList">
  <li>US</li>
  <li>Japan</li>
  <li>Europe</li>
 </ul>
 </div>
 <button class="dropdown-btn">Export</button>
 <div class="dropdown-container">
 <ul id="exportList">
  <li>Excel</li>
  <li>CSV</li>
   </ul>
  </div>
  </div>
  </div>
  <div class='sidebar'>Sidebar</div>
  <div class='content'>Content</div>
  <div class='footer'>Footer</div>
  </div>
  </body>

CSS 

.menu {
 height: 100px;
 background-color: #B2D6FF;    /* Medium blue */
}

 .sidebar {
  height: 300px;
  background-color: #F09A9D;    /* Red */
}

 .content {
  height: 500px;
  background-color: #F5CF8E;    /* Yellow */
}

 .footer {
  height: 200px;
  background-color: #D6E9FE;    /* Light blue */
 }

.sidenav {
 width: 20%;
 position: relative;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 padding-top: 20px;
 }

 .sidenav li, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
 }

 .sidenav li:hover, .dropdown-btn:hover {
 color: #f1f1f1;
 }


.main {
  margin-left: 200px; 
  font-size: 20px;
  padding: 0px 10px;
}


.active {
  background-color: green;
  color: white;
  }

 .dropdown-container {
   display: none;
   background-color: #262626;
   padding-left: 8px;
  }



ul{
padding-left: 0;
}

2 个答案:

答案 0 :(得分：1)

我已经更新了您的HTML，CSS和JavaScript。最好在菜单/树中使用嵌套的<ul><li>元素，因为如果您尝试使用复杂的结构，将很难遵循。仍然需要进行一些样式更改，并根据设备打开和关闭事件。我建议使用this帖子中的逻辑。唯一的区别是不会添加课程，而是切换'click'和mouseover事件

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("mouseover", function() {
  
  //this loop removes active class from another elemets and hides expaned menu
  for (j = 0; j < dropdown.length; j++) {
  var children = dropdown[j].children[0];
  	dropdown[j].classList.remove('active');
    children.style.display = "none"
  }
    this.classList.add("active");
    var dropdownContent = this.children[0];
     if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }  
  });
}
.menu {
  height: 100px;
  background-color: #B2D6FF;    /* Medium blue */
}

.sidebar {
  height: 300px;
  background-color: #F09A9D;    /* Red */
}

.content {
  height: 500px;
  background-color: #F5CF8E;    /* Yellow */
}

.footer {
  height: 200px;
  background-color: #D6E9FE;    /* Light blue */
}

.sidenav {
  width: 20%;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
}

.sidenav ul {
  padding: 0;
  margin: 0;
}

.sidenav li, .dropdown-btn {
     padding: 6px 8px 0px 0px;
    text-indent: 16px;
    margin: 6px 8px 0 0;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.dropdown-btn.active {
  background-color: green;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <title>Floats</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <div class='page'>
      <div class='menu'>
           <div class="sidenav">
           <ul>
           
           
           <li class="dropdown-btn">Three Lines
            <div>
           
           
           </div>
           </li>
          
  <li class="dropdown-btn">Region
  <div class="dropdown-container">
    <ul id="regionList">
      <li>US</li>
      <li>Japan</li>
      <li>Europe</li>
    </ul>
  </div></li>
  
  <li class="dropdown-btn">Export
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </li>
  
  </ul>
</div>
      </div>
      <div class='sidebar'>Sidebar</div>
      <div class='content'>Content</div>
      <div class='footer'>Footer</div>
    </div>
  </body>
</html>

答案 1 :(得分：0)

您需要使用mouseenter和mouseleave事件进行悬停。可以使用纯JavaScript来实现，尽管使用jquery或bootstrap会容易得多。

var dropdown = document.getElementsByClassName("dropdown-btn");
var list = document.querySelectorAll('.dropdown-container');

for (var i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("mouseenter", function() {
  	this.classList.add('active');
    
    if (this.classList.contains('show-all')) {
    	show();
      return;
    }
    
    var dropdownContent = this.nextElementSibling;
    hide();
    dropdownContent.style.display = 'block';
  });
  
  dropdown[i].addEventListener("mouseleave", function() {
  	this.classList.remove('active');
    
    if (this.classList.contains('show-all')) {
    	hide();
      return;
    }
    
    hide();
  });
}

for (var i = 0; i < list.length; i++) {
	list[i].addEventListener("mouseenter", function() {
		this.style.display = 'block';
    this.previousElementSibling.classList.add('active');
  });
  
  list[i].addEventListener("mouseleave", function() {
  	this.style.display = 'none';
    this.previousElementSibling.classList.remove('active');
  });
}

function show() {
  list.forEach(item => {
    item.style.display = 'block';
  });
}

function hide() {
  list.forEach(item => {
    item.style.display = 'none';
  });
}
.menu {
  height: 100px;
  background-color: #B2D6FF;    /* Medium blue */
}

.sidebar {
  height: 300px;
  background-color: #F09A9D;    /* Red */
}

.content {
  height: 500px;
  background-color: #F5CF8E;    /* Yellow */
}

.footer {
  height: 200px;
  background-color: #D6E9FE;    /* Light blue */
}

.sidenav {
  width: 20%;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav li, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  background-color: green;
  color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

ul {
  margin: 0;
}
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <title>Floats</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <div class='page'>
      <div class='menu'>
           <div class="sidenav">
           <button class="dropdown-btn show-all">Three Lines</button>
           <div>
           
           
           </div>
  <button class="dropdown-btn">Region</button>
  <div class="dropdown-container">
    <ul id="regionList">
      <li>US</li>
      <li>Japan</li>
      <li>Europe</li>
    </ul>
  </div>
  <button class="dropdown-btn">Export</button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
      </div>
      <div class='sidebar'>Sidebar</div>
      <div class='content'>Content</div>
      <div class='footer'>Footer</div>
    </div>
  </body>
</html>

相关问题
最新问题