Css dropdown menu when opening should make the page dark

Question

Css dropdown menu when opening should make the page dark

Navigation

#1 by (2 votes)

0

I made a drop-down menu with bootstrap, but I want it when this menu opens (it opens on page content), the entire page is in an opaque effect. I tried to do something like this by touching the background, but it was not cool in the pictures, I wanted to type a darker layer over the whole page.

 <header class="header">
   <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
  </div>
 </div>
 <main class="content">
 </main>
 <footer class="footer"><p>Copyrights</p></footer>

css

asked by anonymous 06.07.2017 / 20:24

1 answer

Convert and save time in bank with PHP ImageView inside HBox in FXML file

score 2 · Accepted Answer

There are certainly ways to make it look better, but that's the way I found it easier.

I added a div with the id back ;

I put the items in the list with class menu-item ;

I put the id menu on the button;

I've added CSS and JavaScript.

window.onload = function(){
menu = document.getElementById('menu');
back = document.getElementById('back');
item = document.getElementsByClassName('menu-item');

for (var i = 0; i < item.length; i++) {
    item[i].addEventListener('click', function(){ back.style.display = 'none'});
}

menu.addEventListener('click', function(){ back.style.display = 'block' });
back.addEventListener('click', function(){ back.style.display = 'none' });
}

#back{
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
   <div class="dropdown">
    <button id="menu" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
     <li class="menu-item"><a href="#">1</a></li>
     <li class="menu-item"><a href="#">2</a></li>
     <li class="menu-item"><a href="#">3</a></li>
    </ul>
  </div>
 <main class="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </main>
 <footer class="footer"><p>Copyrights</p></footer>
 <div id="back"></div>