How to style & toggle notifications list?-CodePudding

I made a nav bar using nav and li tags, including a notifications icon, I am trying to make notifications nested list to show notifications, and use JavaScript to toggle/hide the menu, so far no luck. I've been looking for snippets online to support my logic, but I am stuck in the styling part and the JavaScript functionality. code below:

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

html {
  scroll-behavior: smooth;
}

* {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

 ::-webkit-scrollbar {
  width: 1.32vmin;
}


/*
    ::-webkit-scrollbar-track{
        border: 0.53vmin solid rgba(7, 67, 146, 0.17);
        box-shadow: inset 0 0 0.33vmin 0.26vmin rgba(7, 67, 146, 0.17);
    }
    */

 ::-webkit-scrollbar-thumb {
  background: #074392;
  border-radius: 0vmin;
}

 ::-webkit-scrollbar-button {
  height: 7.45vmin;
  background: #074392;
}

body {
  font-weight: 400;
  font-size: 2.12vmin;
  background-color: #FFFFFF;
  /*overflow: hidden;*/
  height: 100%;
}

h1 {
  margin-left: 3vmin;
}

h5 {
  margin: 2vmin 3vmin;
  position: absolute;
  width: 14.72vmin;
  font-weight: 500;
  font-size: 2.65vmin;
  letter-spacing: 0.79vmin;
  color: #FFFFFF;
  display: inline;
}

nav {
  background-color: #074392;
  height: 7.42vmin;
  width: 100%;
  /*position: relative;*/
  /*overflow: hidden;*/
  position: sticky;
  top: 0;
}

img.logo {
  margin: 1.855vmin 3vmin;
  height: 3.5vmin;
  width: 7vmin;
}

nav ul {
  float: right;
  margin: 1.855vmin 2vmin;
}

nav ul li {
  display: inline-block;
}

nav ul li::before {
  content: " ";
  padding: 0vmin 0.5vmin;
}

nav ul li a {
  color: white;
  /*margin: 0vmin 1vmin;*/
  /*border-top-left-radius: 1.326vmin;
        border-top-right-radius: 1.326vmin;
        border-bottom-left-radius: 1.326vmin;
        border-bottom-right-radius: 1.326vmin;*/
}

a.active,
a:hover {
  font-variation-settings: 'FILL' 1;
}

.checkbtn {
  color: #ffffff;
  float: left;
  cursor: pointer;
  display: none;
  margin: 1.855vmin 3vmin;
}

#check {
  display: none;
}

#check:checked~ul {
  left: 0;
}

.dropdown {}

.dropdown .dropbtn {
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #074392;
  color: #FFFFFF;
}

.dropdown:hover .dropbtn,
.dropbtn:focus {
  color: #FFFFFF;
  font-variation-settings: 'FILL' 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #0743922B;
  width: 37.5vmin;
  overflow-wrap: break-word;
  transform: translateX(-56%);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: justify;
}

.dropdown-content a:hover {
  background-color: #0743922B;
}

.show {
  display: block;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<div >
  <nav>
    <input type="checkbox" id="check">
    <label for="check" >
            <i  style="font-size:3.5vmin;" title="Menu">menu</i>
          </label>
    <h5>LOGO</h5>
    <ul>
      <li>
        <a href="home.php"> <i  style="font-size:3.5vmin;" title="Home">home</i></a>
      </li>
      <!-- <li><a href="index.html"> <i  style="font-size:3.5vmin;" title="Notifications">notifications</i> </a> -->
      <li ><button  onclick="myFunction()"><i  style="font-size:3.5vmin;" title="Notifications">notifications</i></button>
        <div  id="myDropdown">
          <div><a href="#">Link 1</a></div>
          <div><a href="#">Link 2</a></div>
          <div><a href="#">Link asasdasdasdasdasdsadsadasdasdasdasd asddasdas asd asd asd dasd asd</a></div>
        </div>
      </li>
      <li>
        <a href="311.html"> <i  style="font-size:3.5vmin;" title="Tasks">task</i> </a>
      </li>
      <li>
        <a href="add.php"> <i  style="font-size:3.5vmin;" title="Profile">person</i> </a>
      </li>
    </ul>
    <script type="text/javascript" src="JS/ActiveTab.js"></script>
    <script type="text/javascript" src="JS/ToggleNotifications.js"></script>
  </nav>
  <main>
    <h1>Example Page</h1>
  </main>
</div>

CodePudding user response：

By default set a display: none on the dropdown element and set a display: block on the hover pseudo-class of the dropdown element so when a hover event is triggered the dropdown appears. Also, you can use classList.toggle method to remove if exists or to add if not exist the class.

Remove Just add the following to the .css:

#myDropdown {
  display: none;
}

#myDropdown.show {
  display: block;
}

Remove onclick="myFunction()". And replace the .js with:

const myDropdown = document.getElementById('myDropdown')
addEventListener('click', event => {
  let dropbtn = event.target.closest('button.dropbtn')
  if (!dropbtn) return myDropdown.classList.remove('show')
  console.log('hii')
  myDropdown.classList.toggle('show')
})