Side by Side Dropdown buttons in Header/Footer

The Coding Help board is exclusively for general coding help, not for modifications having to do with themes, templates, or plugins. If you have any questions involving those three categories please post them in the appropriate board.

Side by Side Dropdown buttons in Header/Footer Feb 24, 2017 22:32:47 GMT -8

Post by jrj84105 on Feb 24, 2017 22:32:47 GMT -8

I want to put some dropdown buttons in my header and footer.

I can follow the instructions on w3schools for how to make a single button, but without really understanding what I'm doing, I can't figure out how to put multiple buttons in a row. I'm not sure which style elements can be listed once or which elements point the dropdown options for each category to the respective buttons.

<head>

<style>

.dropbtn {

    background-color: #cc0000;

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}



.dropbtn:hover, .dropbtn:focus {

    background-color: #666666;

}



.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    overflow: auto;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}



.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}



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



.show {display:block;}

</style>

</head>

<body>



<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">Gameday</button>

  <div id="myDropdown" class="dropdown-content">

    <a href="http://www.saltyutes.com/thread/new/32">Create Post</a>

    <a href="http://www.saltyutes.com/board/32/gameday">Board</a>

    <a href="http://saltyutes.com/board/32/gamedayfilters[]=label_id:eq:92">- GameDay</a>

    <a href="http://saltyutes.com/board/32/gameday?filters[]=label_id:eq:93">- Ticket Exchange</a>

    <a href="http://saltyutes.com/board/29">- Pick'Em

    <a href="http://saltyutes.com/board/32/gameday?filters[]=label_id:eq:94">- Visitors'Guide

  </div>

</div>



<script>

/* 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(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');

      }

    }

  }

}

</script>



</body>

<head>

<style>

.dropbtn {

    background-color: #cc0000;

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}



.dropbtn:hover, .dropbtn:focus {

    background-color: #666666;

}



.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    overflow: auto;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}



.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}



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



.show {display:block;}

</style>

</head>

<body>



<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">Utah Sports</button>

  <div id="myDropdown" class="dropdown-content">

    <a href="http://www.saltyutes.com/thread/new/26">Create Post</a>

    <a href="http://www.saltyutes.com/board/26/gameday">Board</a>

    <a href="http://www.saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:69"><img src="http://i1304./s533/jrj84105/image_zpsvxpa8alw.jpg" border="0" /></a>

    <a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:71"><img src="http://i1304./s533/jrj84105/image_zps2jwxuyq3.jpg" border="0" /></a>

<a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:70"><img src="http://i1304./s533/jrj84105/image_zpsrhehfhmo.jpg" border="0" /></a>

<a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:73"><img src="http://i1304./s533/jrj84105/IMG_0695_zpsbc7hy838.jpg" border="0" /></a>

  </div>

</div>



<script>

/* 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(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');

      }

    }

  }

}

</script>



</body>

<head>

<style>

.dropbtn {

    background-color: #cc0000;

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}



.dropbtn:hover, .dropbtn:focus {

    background-color: #666666;

}



.dropdown {

    position: relative;

    display: inline-block;

}



.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    overflow: auto;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

}



.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}



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



.show {display:block;}

</style>

</head>

<body>



<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">Olympic Sports</button>

  <div id="myDropdown" class="dropdown-content">

    <a href="http://www.saltyutes.com/thread/new/26">Create Post</a>

    <a href="http://www.saltyutes.com/board/26/gameday">Board</a>

    <a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:77"><img src="http://i1304./s533/jrj84105/image_zpssz199omr.jpg" border="0" /></a>

<a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:76"><img src="http://i1304./s533/jrj84105/image_zpsthkhxloh.jpg" border="0" /></a>

<a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:75"><img src="http://i1304./s533/jrj84105/image_zpstfftrven.jpg" border="0" /></a>

<a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:72"><img src="http://i1304./s533/jrj84105/image_zpsbwkfqvmp.jpg" border="0" /></a>

<a href="http://saltyutes.com/board/26/utah-sports?filters[]=label_id:eq:74"><img src="http://i1304./s533/jrj84105/imageedit_23_3780461944_zpsvcljl3wu.jpg" border="0" /></a>

  </div>

</div>



<script>

/* 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(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');

      }

    }

  }

}

</script>



</body>

Side by Side Dropdown buttons in Header/Footer Feb 25, 2017 0:12:32 GMT -8 jrj84105 likes this

Post by Kami on Feb 25, 2017 0:12:32 GMT -8

well to start off: you don't need any <head></head> or <body></body> tags as these are already included in your templates.

Anything in <style> tags will need to be placed in your stylesheet (admin > themes > advanced styles & css > stylesheet) without, or alternatively in your global headers with. I recommend the former; while it's not bad to do the latter and is the more convenient way as you won't have to repeat it for every theme, .css files are cached and will improve loading time, esp. if you like to customise your forum down to the last detail.

Anything between the <body> tags will have to go between the <body> tags in your forum wrapper (since I assume you want these menu buttons on every page)

Onto the actual coding:

You don't need to copy and paste three instances of the same thing. Duplicated code is never a good idea and can lead to a lot of problems -- some may be minor, but others may not be. One instance of the javascript and CSS is enough.

For the HTML, what you're going to want to do is duplicate this:

<button onclick="myFunction()" class="dropbtn">Gameday</button> <div id="myDropdown" class="dropdown-content"> LINKS HERE </div>

You should have three instances of that. Give them all unique ID's -- "myDropdown1", "myDropdown2", etc will suffice if you can't think of more descriptive ones, but I'd personally do something like, "DropdownMenu-Teams" to be more self explanatory.

Do this for ALL content with IDs -- otherwise, the javascript won't work.

You'd then need to make a slight modification to the JS. It will be looking for the IDs you specified earlier (hence why it's important to have a unique one for each duplicated HTML, otherwise the JS will try to open them all simultaneously).

Now, unfortunately, I'm not entirely sure how to combine multiple IDs properly. I do know that you'd need at least to edit this line of the JS:

document.getElementById("myDropdown").classList.toggle("show");

to something that is capable of grabbing multiple IDs, such as:

document.querySelectorAll("#myDropdown, #myDropdown2, #myDropdown3, #myDropdown4");

but I am uncertain if you'd have to add anything else or change any part of the code. Hopefully a more experienced coder can chime in soon. (: