Jump to content


Photo

Dropdown Menu Click Function Issue

menu navbar dropdown javascript html css button function

  • Please log in to reply
1 reply to this topic

#1 jbenham10

jbenham10

    Forum Newcomer

  • Members
  • Pip
  • 2 posts

Posted 19 May 2017 - 11:33 AM

Hi there, I am fairly new to web design as I only recently just completed a diploma....I am currently creating a website and am having a slight trouble trying to get my JavaScript function to work for the buttons on my clickable navigational dropdown menu. At the moment the dropdown content will not show, but the other function to hide it when clicking away from the menu seems to be working.

 

My knowledge is very limited on JavaScript right now having only covered HTML and CSS so need the help!

 

The website is currently at https://uklivesound.000webhostapp.com

 

HTML

 

<div class="navbar">

<button class="btn1" value="About Us" onclick="window.location.href="https://uklivesound....om/aboutus.html>About Us</button>

<button onclick="myfunction1()" class="dropbtn1">Rehearsals</button>
 <div id="myDropdown1" class="dropdown-content">
    <a href="https://uklivesound....m/liveroom.html">Live Room</a>
    <a href="https://uklivesound....lationroom.html">Isolation Room</a>
</div>
        
<button onclick="myfunction2()" class="dropbtn2">Recording</button>
 <div id="myDropdown2" class="dropdown-content">
    <a href="https://uklivesound....html">Audio</a>
    <a href="https://uklivesound....html">Video</a>
</div>
            
<button onclick="myfunction3()" class="dropbtn3">For Hire</button>
 <div id="myDropdown3" class="dropdown-content">
    <a href="https://uklivesound....repackages.html">Event Packages</a>
    <a href="https://uklivesound....argeevents.html">Large Events</a>
    <a href="https://uklivesound....">Equipment</a>
    <a href="https://uklivesound....html">Bands</a>
</div>
 
 <button onclick="myfunction4()" class="dropbtn4">Other Services</button>
 <div id="myDropdown4" class="dropdown-content">
    <a href="https://uklivesound....buyandsell.html">Buy & Sell</a>
    <a href="https://uklivesound....ml">Repairs</a>
</div>
 
<button class="btn2" value="Contact Us" onclick="window.location.href="https://uklivesound....om/contact.html>Contact Us</button>
 </div>

 

 

CSS

.navbar {
    position:relative;
    display:inline-block;
    width:100%;
    padding:0px;
    margin:0px;
    height:auto;
    float:left;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width:16.4%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding:0px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width:16.4%;
    padding:0px;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

.btn1 {
    background-color:#71aace;
    color: white;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid white;
    cursor:pointer;
    width:16.667%;
    float:left;
}

.btn1:hover, .btn1:focus {
    background-color:#FFFFFF;
    color: black;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid black;
    cursor:pointer;
    width:16.667%;
    float:left;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition-duration:0.5s;
}

.dropbtn1 {
    background-color:#6c73b1;
    color: white;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid white;
    cursor:pointer;
    width:16.667%;
    float:left;
}
    
.dropbtn1:hover, .dropbtn1:focus {
    background-color:#FFFFFF;
    color:black;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:"Impact";
    border:1px solid black;
    cursor:pointer;
    width:16.667%;
    float:left;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition-duration:0.5s;
}

.dropbtn2 {
    background-color:#d3c530;
    color: white;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid white;
    cursor:pointer;
    width:16.667%;
    float:left;
}
    
.dropbtn2:hover, .dropbtn2:focus {
    background-color:#FFFFFF;
    color:black;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:"Impact";
    border:1px solid black;
    cursor:pointer;
    width:16.667%;
    float:left;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition-duration:0.5s;
}

.dropbtn3 {
    background-color:#82c845;
    color: white;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid white;
    cursor:pointer;
    width:16.667%;
    float:left;
}
    
.dropbtn3:hover, .dropbtn3:focus {
    background-color:#FFFFFF;
    color:black;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:"Impact";
    border:1px solid black;
    cursor:pointer;
    width:16.667%;
    float:left;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition-duration:0.5s;
}

.dropbtn4 {
    background-color:#8f65a1;
    color: white;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid white;
    cursor:pointer;
    width:16.667%;
    float:left;
}
    
.dropbtn4:hover, .dropbtn4:focus {
    background-color:#FFFFFF;
    color:black;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:"Impact";
    border:1px solid black;
    cursor:pointer;
    width:16.667%;
    float:left;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition-duration:0.5s;
}

.btn2 {
    background-color:#d84e92;
    color: white;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid white;
    cursor:pointer;
    width:16.667%;
    float:left;
}

.btn2:hover, .btn2:focus {
    background-color:#FFFFFF;
    color: black;
    padding:0px;
    margin:0px;
    font-size:2em;
    font-family:Impact;
    border: 1px solid black;
    cursor:pointer;
    width:16.667%;
    float:left;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    transition-duration:0.5s;
}

 

 

JavaScript

  <script>
  function myFunction1() {
    document.getElementById("myDropdown1").classList.toggle("show");
}

       function myFunction2() {
    document.getElementById("myDropdown2").classList.toggle("show");
}

        function myFunction3() {
    document.getElementById("myDropdown3").classList.toggle("show");
}
        function myFunction4() {
    document.getElementById("myDropdown4").classList.toggle("show");
}
      
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn3')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}


window.onclick = function(event) {
  if (!event.target.matches('.dropbtn4')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
    </script>

 


Edited by jbenham10, 19 May 2017 - 11:35 AM.


#2 jbenham10

jbenham10

    Forum Newcomer

  • Members
  • Pip
  • 2 posts

Posted 22 May 2017 - 03:30 PM

Just to bump this up and add that I have now nearly successfully solved the original issue in that I have managed to get the function working, however I now have the issue that the dropdown menu appears on the top left of the div and not below the parent menu option..

 

Screenshot is attached
 

 

Attached Files







Also tagged with one or more of these keywords: menu, navbar, dropdown, javascript, html, css, button, function

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users