I have the following [fiddle][1]. I am trying to achieve two things & I have fallen at the first hurdle.
I want to have a drop down menu that when hovered over display a list of regions. The hover over part works however none of the regions are listed. I think its to do with the code below. However I'm not sure what is wrong? In my actual project I use an AJAX call to populate the menu but would like to know what is wrong with the code below?
The end goal is where one of the regions is clicked on a javascript function will be called
$(document).ready(function () {
var $region = $('#regionList');
$region.append('<li><a>Europe</a></li>');
$region.append('<li><a>Japan</a></li>');
$region.append('<li><a>North America</a></li>');
})
/* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* 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: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}
<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>
jQuery is not defined, you'll need to include jQuery if you want to use $.
$ is not defined
http://jsfiddle.net/d2v7fLpj/
Related
When a div containing links with a hover property is changed from display:none to display:block, if the mouse pointer is over the links, the hover state is not triggered until the pointer is moved.
Is there a way in javascript to either trigger the hover state or force it to be evaluated when the div is revealed.
To explain the context, I am attempting to implement an early Macintosh dropdown list interface style that involves revealing the list options on top of the drop down list when the list box is clicked on.
When I click on the dropdown div, the dropdown-content is displayed but the top item is not highlighted until you move the mouse.
function openMenu(mybutton) {
var els = document.getElementsByClassName("dropdown-content");
var els1 = document.getElementsByClassName("dropdown");
for(var i = 0; i < els1.length; i++) { // Step through all dropdown elements
if (els1[i] === mybutton) {
els[i].classList.toggle("show");
}
}
}
.dropdownContainer {
border: 1px black solid;
position:relative;
width:150px;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position:absolute;
top:-1px;
left:-1px;
width:150px;
background-color: white;
min-width: 120px;
white-space: nowrap;
z-index: 1;
border: 1px #000 solid;
border-bottom-width: 1px;
}
.dropdown-content a {
float:none;
color: black;
padding: 4px 10px 4px 15px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover, .dropdown-content a:focus {
background-color: black;
color: white;
}
.show {
display: block;
}
<div class="dropdownContainer">
<div onclick='openMenu(this);' class="dropdown">
All Categories
</div>
<div class="dropdown-content">
All Categories
Boards
Cables
Memory
</div>
</div>
I was able to make the first line initially highlight by changing the focus to the first link when the dropdown-content is opened but the problem was then that the the first link stayed highlighted when you moved the mouse over the other links.
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>
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.
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>
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');
}
}
}
});
});