Hover over button to expose menu which contains a sub menu

Question

I am trying to create a menu. What I would like is to have menu button that has the 3 lines (to signify its a menu).

When a user hovers over this button I want it to display two further buttons, lets call them button B & button C.

When a user hovers over button B or C I want it to display a list and when the user stops hovering over this list for it to not to be displayed.

This is my fiddle.

I have buttons B and C nearly doing what I require, the only part is that if a user clicks on the other button the list of the other button is still displayed, not sure how to correct this?

Lastly I don't know how to have the initial button with three lines expose my buttons 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;
}

You're just toggling active class on the clicked element. You need to remove all active classes before assigning new one — Observer, Aug 01 '18 at 14:49
You can try `mouseenter` and `mouseleave` events instead of click. Also do you have any specific requirement to develop using js? If not, then you can give a try to bootstrap. — Nik, Aug 01 '18 at 14:54
@mHelpMe, just check updated fiddle https://jsfiddle.net/ybmju65q/41/ — Observer, Aug 01 '18 at 15:04
@Observer thanks. I probably wasn't very clear. I only want to see the Region and Export buttons when the three lines button is being hovered over — mHelpMe, Aug 01 '18 at 15:09
@mHelpMe, how should this menu work on the touch screens? Using click event? — Observer, Aug 01 '18 at 15:56

Observer · Accepted Answer · 2018-08-01T18:34:33.457

I have updated your HTML, CSS, and JavaScript. It's better to use nested <ul><li> elements for the menus/trees, because if you will try to complex structure it will be hard to follow. Still you need to make some styling changes, and turn on and off events based on the device. I would recommend to use logic from this post. Only difference will be not adding class, but toggle 'click' and mouseover events

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>

onyx · Answer 2 · 2018-08-01T15:56:26.513

You need to use mouseenter and mouseleave event for hovering. This can be approached with pure JavaScript, although it'd be much easier with jquery or 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>

Hover over button to expose menu which contains a sub menu

2 Answers2