We Keep Coding

How do I highlight a HTML button using CSS?

I am trying to highlight the "current page" in my navigation menu (with drop-down menus).
The code below did the job when I had simple navigation links (built using the "< a >" HTML tag). I am now upgrading my navigation bar to hold drop-down menus (using "< button >" HTML tags).
I believe I need to take a similar approach and assign an active class to the "current" page but I can't work out how to loop through "< button >" objects in the same way I did for "< a >" objects
How can I dynamically highlight the current page in my navigation bar when using buttons ("< button >") in my navigation bar?
I found a related article on W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element2 but it doesn't work for my use-case as I'm navigating between different URLs.
A simplified version of my code looks like this:
<div class="navigation">
Home
Page A
<div class="dropdown">
<button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
<div class="dropdown-content">
Food
Exercise
Drinks
</div>
</div>
Page C
Page D
</div>
<!-- Highlight current page (works for <a> but not <button>)-->
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
Associated CSS:
...
.active {
background-color: blue;
}
...
.dropdown:not(.dropdown-content) {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
padding: 14px 16px;
margin: 0;
}
...
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #ffffff;
background-color: #000000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}

You would need to add the class active to each page so the when the user is on the home page. your code would be like this.
<a class='active' href="index.html">Home</a>
For page A
<a class='active' href="page_a.html">Page A</a>

How to make dropdown menu responsive?

Hi I am trying to create a dynamic dropdown menu inside a table. I am trying to implement a simple dropdown menu in w3schools.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("myDropdown1").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');
}
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.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);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<table>
<tr><td>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<tr><td>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<table>
two dropdown appears but takes the same position. Can someone help me with responsive positioning of this dropdown menu? Thanks in advance

made a JQ script and it works as you want
Explanation
this script works with any number of .dropdowns
so, on click on each button with class .dropbtn first we find the corresponding .dropdown-content , the one that should open when clicking on the respective button.
for that we use the sibling() method which selects the ' brother ' with class .dropdown-content of the clicked button. and then. using the slideToggle() method, we hide and show on click the before-found .dropdown-content .
but we also need to close previously opened .dropdown-contents when clicking and opening another .dropdown-content .
in order to do that, we need to find the already opened .dropdown-content ( if there is one ) and close it. so we use the parents() method to find the grandparent ( tr ) of the current clicked button . that's why we use parents() instead of parent() which only selects the immediate parent not all ancestors.
after finding the grandparent, with siblings() we find the other trs, and inside them we find() the .dropdown-content that is visible, using filter() method together with the :visible selector. To this found div with class .dropdown-content that is visible, we apply the slideUp() method that hides it and so, only the dropdown that corresponds to the last clicked button is being shown
$(".dropbtn").on("click",function(){
var showMe = $(this).siblings(".dropdown-content")
$(showMe).slideToggle()
var visible_drop = $(this).parents('tr').siblings().find('.dropdown-content').filter(":visible")
$(visible_drop).slideUp()
})
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<table>
<tr><td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<tr><td>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown1" class="dropdown-content">
Home
About
Contact
</div>
</div>
</td></tr>
<table>

I think your problem is that all the dropdown have the same id, and there is a conflict with the js code.
document.getElementById("myDropdown").classList.toggle("show");
When you click over the dropdown the js allways open the first element and not the second. So you will need to change the id to make it unique or change the selection of the element you want to show.

The same JS function is called from the two buttons. When you click on one button, myFunction is called and it displays the two dropdown-content at the same time. To correct this, you have to call a different function from each button, something like this :
function myFunction() {
document.getElementById("myDropdown1").classList.remove("show");
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction1() {
document.getElementById("myDropdown").classList.remove("show");
document.getElementById("myDropdown1").classList.toggle("show");
}
I don't really like this solution though... Also, I think you should keep the two buttons in the same table row so the dropdown content doesn't appear oddly for the first button.

How to keep menu dropdown shown, navigate through menu items and dropdown items and close on 'close' button

I did the search but was no able to find the solution.
I need a dropdown menu to be open always, even through navigation to other menu items and dropdown menu items. And be able to close only on .close button.
on mouseenter piece:
$('.main-nav ul > li').mouseenter(function(e){
$(this).addClass('active').find('.dropdown-menu').show();
}).mouseleave(function(e){
$(this).removeClass('active').find('.dropdown-menu').hide();
});
on button click piece:
$('.dropdown-menu .close').click( function(e){
e.stopPropagation();
$('.dropdown-menu').hide();
$('.dropdown .dropdown-toggle').parent().removeClass('active');
console.log('close btn!');
});
I can check also, if clicked outside of the menu:
var container = $('.dropdown');
//check if the clicked area is dropdown or not
if (container.has(e.target).length === 0) {
$('.dropdown-menu').hide();
console.log('clicked out!');
}
But how to keep the dropdown always shown aka Bootstrap?
and only close on button '.close' or re-load?
I can implement it on click, it works as I need, but the request is to do it on hover. Show dropdown items on hover like MegaNav, able to change on hover over all menu items and close ONLY on button, not on mouseleave. Same time able to navigate through top menu items and all subs dropdown items.
Fiddle:
https://jsfiddle.net/b9Lgvuom/

I updated the fiddle with a simple example of how it could work.
I updated the close button with a unique ID and some descriptive text. I then added the following code to run when the button is clicked in order to close the dropdown menu.
$("#btnCloseMenu").on("click", function() {
$('.dropdown-menu').hide();
});
I then commented out the line of code that closed the menu on "mouseleave" so that it wouldn't close when the user moves their cursor away. Depending on the complexity of the menu structure (ie: submenus), your solution may require some additional logic so that the user can browse.
There are many ways to do what you are asking. Go with whatever option makes the most sense to you.

Thank you to jQuery forum and JΛ̊KE :-)
Here is the solution:
$(document).ready(function () {
$('.main-nav ul > li').mouseenter(function(e){
$('.active').removeClass('active').find('.dropdown-menu').hide();
$(this).addClass('active').find('.dropdown-menu').show();
});
$('.dropdown-menu .close').click( function(e){
e.stopPropagation();
$(this).closest('.dropdown-menu').hide().parent().removeClass('active');
console.log('close btn!');
});
});
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.dropdown {
position: relative;
display: block;
float: left;
padding-right: 10px;
margin-right: 15px;
}
.dropdown.active > a {
color: green;
}
.dropdown-menu {
width: 100%;
top: 33px;
min-width: 300px;
box-shadow: 0 10px 10px rgba(0, 0, 0, .15);
background: #f7f7f7;
height: auto;
position: absolute;
top: 100%;
left: 0px;
display: none;
float: left;
}
.dropdown-menu .dropdown-wrapper {
position: relative;
}
.dropdown-menu .dropdown-wrapper .close {
position: absolute;
height: 25px;
width: 25px;
border: 0;
top: 5px;
outline: none;
right: 10px;
z-index: 2;
cursor: pointer;
background: none;
}
.dropdown-menu .dropdown-wrapper .close:before, .dropdown-menu .dropdown-wrapper .close:after {
content: "";
opacity: 1;
border-bottom: 1px solid #000;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
.dropdown-menu .dropdown-wrapper .close:before {
transform: rotate(45deg);
}
.dropdown-menu .dropdown-wrapper .close:after {
transform: rotate(-45deg);
}
.category-menu a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<ul>
<li class="dropdown">
Category 1
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
Subcategory 1
Subcategory 2
Subcategory 3
</div>
</div>
</div>
</li>
<li class="dropdown">
Category 2
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
Subcategory 1
Subcategory 2
Subcategory 3
</div>
</div>
</div>
</li>
<li class="dropdown">
Category 3
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
Subcategory 1
Subcategory 2
Subcategory 3
</div>
</div>
</div>
</li>
<li class="dropdown">
Category 4
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
Subcategory 1
Subcategory 2
Subcategory 3
</div>
</div>
</div>
</li>
</ul>
</div>

How can I use javascript, html and css to make an image a button, which can do the following?

When it is clicked, it should open a drop down menu, containing links.
Please provide the full code as well.
Here is the code for the image/button that I have:
<div class="navBar">
<img src="nav_icon.jpg" class="navButton" alt="Navigation Links">
<div class="dropdown-content">
Home
Get Involved
About Us
Contact Us
</div>
</div>
Here is the CSS part (which isn't really relevant:)
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.navButton{
height:20px;
width:20px;
}
.navBar{
float:right;
height: 10px;
width:20%;
padding-top:4.2%;
position: relative;
display: inline-block;
}
I've tried the following example, which instead of creating what I want, makes all the links appear:
W3 Schools

From the HTML that you have provided, If you compare your markup with W3School's Example, I see two problems that are causing your menu not to work properly. I've listed them below:
There should be an id attribute on drop down menu.
<div id="myDropdown" class="dropdown-content">
// ^^^----- This id attribute should be added.
You forgot to add click event handler on .navButton that will toggle drop down menu each time it is clicked.
<img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">
// ^^^ Add this inline click handler
/* 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 menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.navButton')) {
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');
}
}
}
}
/* Dropdown Button */
.navButton {
height:20px;
width:20px;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="navBar">
<img src="nav_icon.jpg" class="navButton" onclick="myFunction()" alt="Navigation Links">
<div id="myDropdown" class="dropdown-content">
Home
Get Involved
About Us
Contact Us
</div>
</div>

Single Button with Drop Down Menu Effects - Help Refine

I am working on a client site and they wish to have a drop down button on the main banner of the site.
I was able to code it and get it to work but it seems to be a bit temperamental. The button works, but not every time you click it and certainly not smoothly. Can someone look at this and let me know if their is something else conflicting with this code or what I might be able to do to fine tune it and get it to work better?
I'm using the following CSS:
/* Dropdown Button */
.dropbtn {
background-color: rgba(102, 146, 255, 0.87);
color: white;
padding: 9px 15px 14px 15px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 6px;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #6692FF;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 9px 32px;
text-decoration: none;
display: block !important;
border-bottom: 1px solid #4A5056;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f9f9f9}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
The Following HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><span style=" vertical-align: bottom;font-size: 24px; ">LISTEN</span> <i class="fa fa-volume-up fa-4x"></i></button>
<div id="myDropdown" class="dropdown-content">
<a href="http://lonebeacondevelopment.com/financialexchange/listen-live/" class="popup" data-height="300" data-width="300" data-scrollbars="0" alt="LISTEN LIVE">
LISTEN LIVE</a>
ON DEMAND
</div>
</div>
And the following JS:
/* 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 menu 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');
}
}
}
}
The link is http://lonebeacondevelopment.com/financialexchange/ is the blue Listen button in the top right hand corner in the banner.
ANY help would be greatly appreciated.
Thanks so much!

Ok You can do is remove span inside the button and paste span styling in button class like this
CSS
/* Dropdown Button */
.dropbtn {
background-color: rgba(102, 146, 255, 0.87);
color: white;
padding: 9px 15px 14px 15px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 6px;
vertical-align: bottom;font-size: 24px; /*HERE The CODE of SPAN*/
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #6692FF;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 9px 32px;
text-decoration: none;
display: block !important;
border-bottom: 1px solid #4A5056;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f9f9f9}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
HTML
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">LISTEN <i class="fa fa-volume-up fa-4x"></i></button>
<div id="myDropdown" class="dropdown-content">
<a href="http://lonebeacondevelopment.com/financialexchange/listen-live/" class="popup" data-height="300" data-width="300" data-scrollbars="0" alt="LISTEN LIVE">
LISTEN LIVE</a>
ON DEMAND
</div>
</div>

You set the function 'myFunction' only for the button but that doesn't mean it will be triggered by the span or i elements inside your button.
To solve it try this(with jQuery):
HTML
<div class="dropdown">
<div class="dropbtn"> <!--CHANGED THIS-->
<span style="vertical-align: bottom;font-size: 24px; ">LISTEN</span>
<i class="fa fa-volume-up fa-4x"></i>
</div>
<div id="myDropdown" class="dropdown-content">
LISTEN LIVE
ON DEMAND
</div>
</div>
JS/JQ
$( document ).ready(function() {
$(".dropbtn").click(function(){
document.getElementById("myDropdown").classList.toggle("show");
});
$("body").click(function(e){
if(e.target.className !== "form_wrapper"){
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');
}
}
}
});
});