Jump to content
Sign in to follow this  
jbenham10

Dropdown Menu Click Function Issue

Recommended Posts

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.app.com

 

HTML

 

<div class="navbar">

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

<button onclick="myfunction1()" class="dropbtn1">Rehearsals</button>
<div id="myDropdown1" class="dropdown-content">
<a href="https://uklivesound.app.com/liveroom.html">Live Room</a>
<a href="https://uklivesound.app.com/isolationroom.html">Isolation Room</a>
</div>

<button onclick="myfunction2()" class="dropbtn2">Recording</button>
<div id="myDropdown2" class="dropdown-content">
<a href="https://uklivesound.app.com/audiorecording.html">Audio</a>
<a href="https://uklivesound.app.com/videorecording.html">Video</a>
</div>

<button onclick="myfunction3()" class="dropbtn3">For Hire</button>
<div id="myDropdown3" class="dropdown-content">
<a href="https://uklivesound.app.com/hirepackages.html">Event Packages</a>
<a href="https://uklivesound.app.com/largeevents.html">Large Events</a>
<a href="https://uklivesound.app.com/equipmenthire.html">Equipment</a>
<a href="https://uklivesound.app.com/bandhire.html">Bands</a>
</div>

<button onclick="myfunction4()" class="dropbtn4">Other Services</button>
<div id="myDropdown4" class="dropdown-content">
<a href="https://uklivesound.app.com/buyandsell.html">Buy & Sell</a>
<a href="https://uklivesound.app.com/repairs.html">Repairs</a>
</div>

<button class="btn2" value="Contact Us" onclick="window.location.href="https://uklivesound.app.com/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;
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;
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;
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;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

 

Edited by jbenham10

Share this post


Link to post
Share on other sites

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

 

post-71308-0-32418000-1495467025_thumb.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By GrahamUK33
      I have found a slideshow from the w3schools.com website, it comes with some Javascript to give the function of a left and right arrow and also indicator buttons that can be selected to display a required photo without using the left and right arrows.
      I also found more JavaScript (carousel) that animates the slideshow, but the indicator buttons do not update when the different photos are being displayed.
      Can someone please edit the code below and maybe give a brief description of what the code is doing.
      var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" slideshow-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " slideshow-white"; } var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); }  
    • By Demonolith
      Hi all,
      I have a CSS rule that I wish to change the margins of, but I can't be sure where else on the site I've used the CSS rule and how it would impact other pages.
      Is there a way that I can search the entire Wordpress site for pages where the CSS rule is used?
    • By Lyndsey
      Hi guys,
       
      I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly:
       
      General Stuff:
      http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you http://jsonlint.com/ - JSON Validator http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff. http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages. http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site.  
      CSS:
      http://css3generator.com/ - Generate CSS3. Box Shadow, Border Radius etc. http://border-radius.com/ - Generate border radius quickly! http://www.javascripter.net/faq/hextorgb.htm - HEX to RGB conversion. http://meyerweb.com/eric/tools/css/reset/ - CSS Reset Stylesheet. Resolve browser inconsistencies such as varying margins/padding. http://www.cssplay.co.uk - Lots of experiments with CSS, menus and layouts.  
      Responsive Design:
      http://www.getskeleton.com/ - Responsive Grid.  
      Server-Side Coding:
      http://net.tutsplus.com/tutorials/php/php-database-access-are-you-doing-it-correctly/ - How to connect to a database using PDO http://www.php.net/manual/en/index.php - PHP manual for everything PHP!  
      Form Validation (Client-Side):
      https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate Also allows you to create custom messages and make the validation more advanced! I hope these are useful! If anyone has any others to share, please do
       
      Lyndsey.
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,516
    • Most Online
      4,970

    Newest Member
    Codespinner
    Joined
  • Forum Statistics

    • Total Topics
      65,729
    • Total Posts
      455,373
×