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>
Related
I have a dropdown menu, one of the options executes Ajax to show data in another Div.
I want to hide the dropdown menu (close it) when this option is clicked.
<div class="dropdown">
<a href="#" class="btn btn-floating" data-toggle="dropdown">
<i class="ti-more-alt"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" >
View Folder Details
Share Folder via Email
Rename Folder
Delete Folder
</div>
</div>
I have tried the below which I found online, but it doesn't seem to close the menu:
// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(){
$(".dropdown-menu").hide();
});
$( document ).ready(function() {
debugger;
var ele=$(".dropdown-content");
$(".dropdown-content a").click(function(){
if(this.innerText=="Link 2"){
$(".dropdown-content").hide();
$(".dropbtn").hide();
}
});
});
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
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-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You hide a dropdown menu like this and if you want to show simply add show functionality.
Try this toggle method should work
<a href="#" onclick="handleClick()" class="btn btn-floating" data-toggle="dropdown">
how/hide menu
</a>
function handleClick(){
$(".dropdown-menu").toggle();
}
refer to this link for running example:
https://playcode.io/647558/
Just remove class 'show' from dropdown:
// hide the menu when an example is clicked
$(".dropdown-item").on("click", function(el){
$(el.target).parents(".dropdown").removeClass("show");
});
I am a web developer. Now I am developing, my new project but I am having problems. I have created an ebook viewer list. Here are some problems. Some buttons are included such as [Download, Bulk Download, Save to Library and “More”]. Everything is fine but the [more] buttons are not working properly.
I want the list of all my books to be created by clicking on the [more] icon so that the list of [more] buttons can be seen in the right place.
The first list is working properly but I have made a list of other ebook viewers. It is not working properly. Clicking on the [More] button opens the first book list button.
I need help from an expert developer. Here is my project screenshot and source code
view screenshot
/* 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');
}
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd;}
.show {display: block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
Hello #Sajjad Hosen This is probably far to late. But because there are other people that want answers to such questions I will put in my two-penny worth. Beginner to beginner.
You have two flaws. The first is that you are using the same id ("myDropdown") for all your four menu buttons. Then the browser engine finds the first and that's it. That is why it always opens the first submenu.
The second: it is your function myFunction that has a flaw:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
This will always find the same element with id (supposedly only one in the DOM). You need to use this keyword to refer to the element that was clicked. So your buttons would now look like:
<button onclick="myFunction(this)" class="dropbtn">Dropdown</button>
You pass as a paramenter the very element you clicked on.
Now, you have to traverse to your "myDropdown" elements because this refers to a button and not a menu.
function myFunction(el) {
el.nextSibling.nextSibling.classList.toggle("show");
console.log(el);
}
As you see, your function now uses el as parameter. We need to use two .nextSibling properties. In your case you divided the </button> closing tag and next <div> tag with whitespace (new line). This is treated as text which is considered as a new element in DOM. Only the next .nextSibling property finally gets your menu element.
Some people advertise such usage of tags: </button><div>. Tags are then together.
I am inclined to make as much of this front end code with CSS. So perhaps I could propose my solution. Although there are differences. Here I show only one menu button. And after a click in your solution the submenu remains open. In my solution it is there only as long as a cursor hovers above the Dropdown button and its menu. A warning though for those that will expand a solution for more buttons: you should also change the id's of elements.
If someone finds flaws in my solution I'd be happy to hear from them.
.wrapper {
position: absolute;
width: 20%;
font-family: Arial, Helvetica, sans-serif;
}
#menubutton {
z-index: 1;
opacity: 0.99;
position: absolute;
top: 5vh;
width: 100%;
background-color: green;
color: white;
text-align: center;
padding: 1em 0em;
cursor: pointer;
height: 1.25em;
border-radius: 0.3125em;
}
#menu {
z-index: 0;
opacity: 0.99;
position: absolute;
left: 0em;
top: 5vh;
text-align: center;
width: 100%;
height: 1.25em;
background-color: transparent;
color: #fff;
padding: 0;
transition: height 1s;
border-radius: 0.3125em;
overflow: hidden;
}
.rows {
position: absolute;
width: 100%;
height: 1.25em;
display: block;
margin-left: auto;
margin-right: auto;
padding: 1em 0em;
border-radius: 0.6125em;
background-color: green;
cursor: pointer;
}
#menuItem1 {
bottom: 7.2em;
}
#menuItem2 {
bottom: 3.6em;
}
#menuItem3 {
bottom: 0em;
}
#menubutton:hover+#menu,
#menu:hover {
height: 14.0em;
}
<div class="wrapper">
<div align="center " id="menubutton">Dropdown
</div>
<div id="menu">
<div class="rows" id="menuItem1">Home</div>
<div class="rows" id="menuItem2">About</div>
<div class="rows" id="menuItem3">Contact</div>
</div>
</div>
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.
Jsfiddle: http://jsfiddle.net/87YGW/
At present I have to click tab 1 to show content however I want tab 1 content to display automatically upon opening the page.
HTML:
<div id="tab2" class="css-tabs">
<ul class="noint11_menu">
<li id="item-1"> Tab 1
<div>tab conten1
</div>
</li>
<li id="item-2"> Tab 2
<div>
<p>Tab Content 2</p>
</div>
</li>
<li id="item-3"> Tab 3
<div id="notice">
<p>tab content 3 </p>
</div>
</li>
<li id="item-4" title="click for Tab 4"> Tab 4
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
CSS:
.css-tabs {
position: relative;
text-align: left; /* This is only if you want the tab items at the center */
height: auto
}
.css-tabs ul.noint11_menu {
list-style-type: none;
display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
display: block;
float: left;
}
.css-tabs ul.noint11_menu li > a {
color: #EEEEEE;
text-shadow: 1px 1px 1px #000;
font-family: 'MuliLight', Arial, sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
}
.css-tabs ul.noint11_menu li > div {
display: none;
position: absolute;
width: 100%;
}
.css-tabs ul.noint11_menu li > div > p {
border: transparent;
padding: 10px;
margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
cursor: default;
border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
display: block;
}
I cannot use Javascript, Jquery or iframe
I cannot demo it in the fiddle (because iframe), but if you link to the first tab directly, eg: http://www.yoururl.com/page#item-1, the first tab's content will be visible on page load.
You can test this by putting all your code inside a new blank html file (CSS and markup in their correct places) and saving it as "test.html". Then make another html file inside the same folder with this code:
<html>
<body>
link
</body>
</html>
Save and open the second file and click the link to go to your styled page. Note the first tab's content is visible, and tab switching still works as expected.
Without JS to redirect or to change the window location, I don't believe you can get the same result through CSS alone.
This article explains why it works: The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
edit to add another hacky, but pure CSS "solution":
Make the first tab always visible with #item-1 div {display: block}, and set a background colour on all tabs:
.css-tabs ul.noint11_menu li > div {
display: none;
position: absolute;
width: 100%;
left: 0;
color: #ccc;
text-align: left;
padding: 0;
margin-left: 32px;
background: #fff; /* added this */
}
Now the other tabs will hide the first tab when they are selected. demo: http://jsfiddle.net/87YGW/3/
In your CSS add:
#item-1 div {display: block}
I followed a great example of how to make a sub-menu appear/disappear on click here and made it work. Quite an accomplishment since I'm just starting with javascript. But just as I made it work a few other problems came up, I'll try to explain:
1.- I have a vertical main menu and one of the options, 'Products' has a sub-category that opens on hover below the parent item. When selecting one of its sub-categories, a bigger menu shows up in a new div to the right of the main menu. When this happens, the selected sub-category changes color and displays a bullet so the user knows which sub-category they are viewing. I was doing this using PHP to detect the current page and assign an "active" id. But when I had it like that the sub-menu show/hide didn't work and all the options were showing when first entering the page. So I changed the link reference from "page.php" to "#" ---which makes more sense since that option is not meant to be a link rather than just display another sub-menu but had to include it for the sake of displaying the 'active' id--- and now the show/hide works except after I click a sub-category, the menu to the right opens, but the previously selected sub-category that opens on hover closes and the php detect function doesn't work because I changed the reference to "#" and the link doesn't show an 'active' status; in fact, the 'home' option stays selected even when the second div is already showing.
It sounds confusing, I know. Here's the example, I hope it's clear what I'm trying to do. I'd appreciate if anyone knows a way around this.
2.- Once I can get this fixed, is there a way to make the second div slide from left to right instead of fading in?
Thanks in advance :)
See my update to your code.. http://jsfiddle.net/Jaybles/tkVfX/4/
CSS
.mainNav {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #e21a22;
}
.active{
font-weight:bold;
}
.mainSide {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 40px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
.mainSide li a, .mainSide li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
.mainSide ul li a {
width: 125px;
list-style: none;
padding: 6px 0 2px 18px;
}
.mainSide li a:hover {
color: #fdb046;
}
.mainSide li a#active, .mainSide ul li a#active {
color: #fdb046;
background: url("../img/bullet.jpg") right center no-repeat;
}
#subNavSys, #subNavApp, #subNavAcc {
float: left;
width: 200px;
height: 100%;
min-width: 150px;
background-color: #414143;
display:none;
}
#subSideSys, #subSideApp, #subSideAcc {
font-size: 14px;
list-style: none;
font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
padding-top: 163px;
width: 143px;
margin-right: auto;
margin-left: auto;
}
#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li {
color: #fff;
width: 143px;
display: block;
padding: 2px 0 2px 0;
text-decoration: none;
}
#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover {
color: #fdb046;
HTML
<div class="mainNav">
<img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" />
<ul class="mainSide">
<li>Home</li>
<li>About us</li>
<li>Products
<ul>
<li>By system</li>
<li>By application</li>
<li>Accesories</li>
</ul>
</li>
</ul>
</div>
<div id="subNavSys">
<ul id="subSideSys">
<li>Sub-menu-1.1</li>
<li>Sub-menu-1.2</li>
<li>Sub-menu-1.3</li>
</ul>
</div>
<div id="subNavApp">
<ul id="subSideApp">
<li>Sub-menu-2.1</li>
<li>Sub-menu-2.2</li>
<li>Sub-menu-2.3</li>
</ul>
</div>
<div id="subNavAcc">
<ul id="subSideAcc">
<li>Sub-menu-3.1</li>
<li>Sub-menu-3.2</li>
<li>Sub-menu-3.3</li>
</ul>
</div>
JS
$(document).ready(function(){
$("#sys").click(function() {
$("#subNavApp").hide();
$("#subNavAcc").hide();
$("#subNavSys").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#app").click(function() {
$("#subNavSys").hide();
$("#subNavAcc").hide();
$("#subNavApp").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
$("#acc").click(function() {
$("#subNavSys").hide();
$("#subNavApp").hide();
$("#subNavAcc").fadeIn(800);
$('*').removeClass('active');
$(this).addClass('active');
});
});