CODEWITHSUNDEEP
javascripthtmlcss
Malzin
Malzin

Reputation: 11

My dropdown menu does not appear html css vanilla js

This is my code, I have already tried to change the display: none to block. its seems to be there, but once I change it to none and try to toggle using .active in javascript it not appear. already done the .dropdown ul il:hover . ul but still not working.

console.log("hellokkk");

document.getElementById("menu").addEventListener("click",openMenu);

Function openMenu() {
    
    document.getElementById("dropdown").classList.toggle("active");
}
*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
.header{
    min-height: 20em;
    width: 100%;
    background: #00afef;
    color: #000;
    position: relative;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.nav-links{
    text-align: center;
    align-item: center;
    width: 100%;
     height: 100%;
    background:#fff;
     display: block;
     margin: 0;
}
.nav-links ul li{
    
    list-style: none;
    display:inline-block;
    padding:10px 25px;
    cursor: pointer;
}
.nav-links ul li {
    
    color: #000;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    position: relative;
}
#dropdown {
    
    display: none;
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    left: 0;
}
#dropdown.active{
    
    display: block;
}
<html>
<head>
    <!--<meta name="viewport" content="with=device-width, initial-scale=1.0">-->
    <title>Header</title>
    <link rel="stylesheet" href="style.css">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap rel="stylesheet">
    
</head>
<body>

<div class="header">

    <nav>
        <div class="nav-links">
            <ul>
                <ul>
                <li><a href"" style="color:#00afef;"><i class="fa fa-youtube-play"></i></a></li>
                <li><a href"" style="color:#00afef;"><i class="fa fa-twitter"></i></a></li>
                <li><a href"" style="color:#00afef;"><i class="fa fa-linkedin"></i></li>
                <li><a href"" style="color:#00afef;">Log Out</a></li>
                <li><a href"" style="color:#00afef;">My Dashboard</a></li>
                </ul>
            </ul>
            <ul>
                <li><img src="https://i.imgur.com/9fx89Br.png" style="width:250px;height:100px;"></li>
                <li>Product</li>
                <li>Safety Tools</li>
                <li>Training</li>
                <li>Engagement</li>
                <li id="menu">Membership
                    <ul id="dropdown">
                            <li>Latest News</li>
                            <li>Subscribe to Newsletter</li>
                            <li>Videos</li>
                            <li>Publications</li>
                    </ul>
                </li>
                
                <li>News</li>
                <li>About</li>
            </ul>
                

</div>
</nav>

    <script src="header.js"></script>
</body>
</html>

I would like my dropdown menu to appear when I clicked on the membership menu, can someone help me

Upvotes: 1

Views: 225

Answers (1)

Vibhor Goyal
Vibhor Goyal

Reputation: 110

There's a single problem that you did in the function declaration of your js. You just need to change the capital 'F' to 'f' of the line of function in order to make the code work. Javascript is case sensitive language, so your code didn't worked as you used Function for declaring a function.

To make the dropdown list horizontal, you need to remove the position relative property from .nav-links ul li selector in the css and then to get those vertical lines you need to create .nav-links ul li ul li selector that will select the dropdown list and add border-left property to get those vertical lines. Also, in order to make those icons of social media visible, you need to add the fontawesome link in the head section of the html code. I am adding the whole code in the next answer. Please find it below.

   <html>
   <head>
   <!--<meta name="viewport" content="with=device-width, initial-scale=1.0">-->
      <title>Header</title>
<link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2? family=Montserrat:wght@300;500;700&display=swap rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>*{
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  }
  .header{
  min-height: 20em;
  width: 100%;
  background: #00afef;
  color: #000;
  position: relative;
  }
  nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  }
  .nav-links{
  text-align: center;
  align-items: center;
  width: 100%;
   height: 100%;
  background:#fff;
   display: block;
   margin: 0;
  }
  .nav-links ul li{

  list-style: none;
  display:inline-block;
  padding:10px 25px;
  cursor: pointer;
  }
  .nav-links ul li {

  color: #000;
  text-decoration: none;
  font-size: 18px;
  cursor: pointer;
  text-align: right;
  line-height: 1.2rem;

  /* position: relative; */
  }
  #dropdown {

  display: none;
  position: absolute;
 width: 100%;
 background-color: #fff;
 z-index: 999;
 left: 0;

  }
 .nav-links ul li ul li{
    border-left: 3px solid #000;

      }
      #dropdown.active{

      display:block;
  }</style>
</head>
<body>

<div class="header">

<nav>
      <div class="nav-links">
        <ul>
            <ul>
            <li><a href"" style="color:#00afef;"><i class="fa fa-youtube-play"> 
 </i></a></li>
            <li><a href"" style="color:#00afef;"><i class="fa fa-twitter"></i> 
 </a></li>
            <li><a href"" style="color:#00afef;"><i class="fa fa-linkedin"></i> 
     </li>
            <li><a href"" style="color:#00afef;">Log Out</a></li>
            <li><a href"" style="color:#00afef;">My Dashboard</a> 
       </li>
            </ul>
        </ul>
        <ul>
            <li><img src="https://i.imgur.com/9fx89Br.png" 
   style="width:250px;height:100px;"></li>
            <li>Product</li>
            <li>Safety Tools</li>
            <li>Training</li>
            <li>Engagement</li>
            <li id="menu">Membership
                <ul id="dropdown">
                        <li>Latest News</li>
                        <li>Subscribe to Newsletter</li>
                        <li>Videos</li>
                        <li>Publications</li>
                </ul>
            </li>
        
            <li>News</li>
            <li>About</li>
        </ul>
        

</div>
</nav>
<script>console.log("hellokkk");

  document.getElementById("menu").addEventListener("click",openMenu);

      function openMenu() {

  document.getElementById("dropdown").classList.toggle("active");
  }</script>
<script src="header.js"></script>
</body>
</html>

Upvotes: 1

Related Questions