In my page header I have a list of 6 categories and I'd like to add a sub menu for each category, but display it only when category is clicked. (I'd like to use only one handler in my script.js file, not add one for each category in particular. - less code)
Here is my HTML for the list in header:
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class=“sub-menu”></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class=“sub-menu”></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class=“sub-menu”></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class=“sub-menu”></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class=“sub-menu”></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class=“sub-menu”></div>
</li>
</ul>
This is the SCSS:
#menu {
position: absolute;
right: 25px;
top: 25px;
.menu_item {
position:relative;
font-family: $OpenSansSemibold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
div.sub-menu {
position:absolute;
top:40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
&:hover{
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
}
}
And here is what I tried so far, but it doesn't work:
$( ".menu_item" ).each(function() {
$(this).children().find(".sub-menu").toggle();
});
Any help would be much appreciated, thank you!
Just remove the .children() and it should work. .children() accesses direct children already, while .find() will traverse down the DOM tree from that element. So in your code, you were looking for any child (grandchild, etc) of direct children of .menu_item that was clicked. .sub-menu wasn't a child of direct children of .menu_item, but was rather already that element ;) I am using the .find() method here because it'll still work, even if your DOM changes. If you won't change anything in regards to your DOM structure of the menu, you are safe to use $(this).children().toggle();
var $subMenus = $(".menu_item").find(".sub-menu");
$(".menu_item").on("click", function() {
$subMenus.addClass("hidden");
$(this).find(".sub-menu").removeClass("hidden");
});
SCSS:
#menu {
.menu_item {
div.sub-menu {
....
&.hidden {
display: none;
}
}
}
}
Please try this:
jQuery( ".menu_item" ).click(function(e) {
jQuery(this).closest('#menu').find('.sub-menu').filter(':visible').hide(); // hides other open sub-menus
jQuery(this).find(".sub-menu").toggle(); // opens the clicked item's sub-menu
});
#menu {
position: absolute;
right: 25px;
top: 25px;
}
#menu .menu_item {
position: relative;
font-family: 'OpenSansSemibold';
font-size: 14px;
color: #333; /*fff; changed just for display */
text-transform: uppercase;
list-style-type: none;
display: inline-block;
padding: 8px 16px;
}
#menu .menu_item div.sub-menu {
position: absolute;
top: 40px;
left: 0;
width: 200px;
height: 116px;
border: 1px solid green;
background-image: url(../img/popupmenu_03.png);
display: none;
}
#menu .menu_item:hover {
background: #62a29e;
border-radius: 5px;
border-bottom: 5px solid #528b86;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu_item1" class="menu_item">About
<div id="sub-menu1" class="sub-menu"></div>
</li>
<li id="menu_item2" class="menu_item">Services
<div id="sub-menu2" class="sub-menu"></div>
</li>
<li id="menu_item3" class="menu_item">Portfolio
<div id="sub-menu3" class="sub-menu"></div>
</li>
<li id="menu_item4" class="menu_item">Blog
<div id="sub-menu4" class="sub-menu"></div>
</li>
<li id="menu_item5" class="menu_item">Pictures
<div id="sub-menu5" class="sub-menu"></div>
</li>
<li id="menu_item6" class="menu_item">Contacts
<div id="sub-menu6" class="sub-menu"></div>
</li>
</ul>
Related
How to replace the selection in the class="selected"?
For example, if I select "Select 1" from drop down, it will become:
<span class="selected">Select 1</span>
and vice versa if select "Select 2" from drop down, it will become:
<span class="selected">Select 2</span>
html
<section class="data-tab">
<div class="rank-dropdown" data-id="item">
<span class="selected">Select 1</span>
<ul class="dropdown-list">
<li class="dropdown-item hide" data-id="item">Select 1</li>
<li class="dropdown-item">Select 2</li>
</ul>
</div>
<div id="item" class="rank-list-wrap">
added class show-origin
</div>
</section>
javascript
$(document).ready(function(){
$('.dropdown-list .dropdown-item').click(function(){
var tab_id = $(this).attr('data-id');
var parent = $(this).closest('.data-tab');
$(parent).find('.dropdown-item').removeClass('hide');
$(parent).find('.rank-list-wrap').addClass('show-origin');
$(this).addClass('hide');
$(parent).find("#"+tab_id).removeClass('show-origin');
})
})
jsfiddle: https://jsfiddle.net/e9nrzmfL/3/
To achieve this you can set the text of the related .selected to match that of the clicked dropdown item.
Also note that parent in your code is already a jQuery object so you don't need to wrap it again multiple times. Additionally, jQuery 1.9.1 is rather outdated. You should update to at least 1.12.4 if you still need to support IE9 and lower, ideally 3.x if not.
$(document).ready(function() {
$('.dropdown-list .dropdown-item').click(function() {
var $item = $(this);
var tab_id = $item.data('id');
var $parent = $item.closest('.data-tab');
$parent.find('.dropdown-item').removeClass('hide');
$parent.find('.rank-list-wrap').addClass('show-origin');
$parent.find("#" + tab_id).removeClass('show-origin');
$parent.find('.selected').text($item.text()); // set the selected text
$item.addClass('hide');
})
})
.rank-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #fff;
cursor: default;
padding: 0 7px;
height: 22px;
line-height: 22px;
border: 1px solid #ccd0d7;
border-radius: 4px;
}
.rank-dropdown:hover {
border-radius: 4px 4px 0 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
}
.rank-dropdown .selected {
display: inline-block;
vertical-align: top;
}
.rank-dropdown .dropdown-list .dropdown-item:hover {
background-color: #e5e9ef;
}
.rank-dropdown .dropdown-list {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #ccd0d7;
border-top: 0;
left: -1px;
top: 6px;
z-index: 10;
display: none;
border-radius: 0 0 4px 4px;
padding-inline-start: 0px;
}
.rank-dropdown:hover .dropdown-list {
display: block;
}
.rank-dropdown .dropdown-list .dropdown-item {
cursor: pointer;
margin: 0;
padding: 3px 7px;
}
.rank-list-wrap {
height: 500px;
display: none;
}
.rank-list-wrap.show-origin {
display: block;
}
.dropdown-item.hide {
display: none;
}
li {
list-style: none;
}
a[href]:focus,
*:focus {
outline: none;
}
ol,
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="data-tab">
<div class="rank-dropdown" data-id="item">
<span class="selected">Select 1</span>
<ul class="dropdown-list">
<li class="dropdown-item hide" data-id="item">Select 1</li>
<li class="dropdown-item">Select 2</li>
</ul>
</div>
<div id="item" class="rank-list-wrap">
added class show-origin
</div>
</section>
I have a simple navbar that I am trying to get the background to be green when clicked. However it does not seem to be working.
When I hover over the link the background turns green and works fine. However I cannot get it so that when I click on the link the background remains green and if I click another link the new active turns green and the previous active turn white.
$(".sidebar ul li").on("click", function() {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
add jquery link to your code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
I have added your code here - it seems to work right.
Maybe something overlaps your navbar? Can it happen?
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
.sidebar {
margin: 0;
padding: 0;
width: 276px;
background-color: #ffffff;
position: fixed;
height: 100%;
}
.sidebar a {
display: block;
color: #444444;
padding: 4px 0px 4px 15px;
text-decoration: none;
font-size: 14px;
}
.sidebar a:hover {
border: 1px;
border-collapse: #1aa322;
background-color: #1aa322;
color: #ffffff;
}
.sidebar li.active {
color: #ffffff;
background-color: #1aa322;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
<div id="logo">
<IMG SRC="img/logo.png" ALT="Logo">
</div>
<div>
<div id="menu-header">
<p>INTRODUCTION</p>
</div>
</div>
<ul>
<li class="" id=menu>
Welcome
</li>
<li class="" id=menu>
Authentication
</li>
<li class="" id=menu>
Pagination
</li>
<li class="" id=menu>
Errors
</li>
</ul>
</div>
One reason can be that when you click, what it gets clicked is the anchor element not the li.
You can add a class to your a tag and then target that class for the click function. And also modify the css to add the background when the a has the class.
So something like this for your anchor elements
<li>
<a class="nav-link" href="#Welcome">Welcome</a>
</li>
Your css would look like
.sidebar .nav-link.active {
color: #ffffff;
background-color: #1aa322;
}
And your js would be like
$(".nav-link").on('click', function () {
$(".nav-link").removeClass("active");
$(this).addClass("active");
});
Another reason could be that you ar executing your js before the elements are there. So try wrapping your code like.
$(document).ready(function() {
$(".sidebar ul li").on("click", function () {
$(".sidebar ul li").removeClass("active");
$(this).addClass("active");
});
});
Both solutions work.
And you should also not have the same id in multiple elements. So you should get rid of id="menu" or change it to be unique for each element
I am trying to make a drop down menu, but I want to show and hide drop down just by click on the button. Currently drop down is hiding even when I click on one of the children. How to fix it?
Fiddle:
<ul id="nav">
<li class="parent"><button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Try it:
http://jsfiddle.net/zyfv6nd0/
$(document).ready(function() {
$('button').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
Change your selector from $('.parent') to $('.parent button'):
$(document).ready(function() {
$('.parent button').click(function() {
$(this).next('.sub-nav').toggleClass('visible');
});
});
#nav {
list-style: none;
padding: 0;
margin: 0;
}
#nav > li {
display: inline-block;
vertical-align: top;
position: relative;
}
#nav ul.sub-nav {
position: absolute;
min-width: 200px;
display: none;
top: 100%;
left: 0;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li class="parent">
<button>Childrens</button>
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
</ul>
Drop down menu only by click on button example classList.toggle pure js
/* Cross-browser solution for classList.toggle() */
function myFunction2() {
var x = document.getElementById("myDropdown");
if (x.classList) {
x.classList.toggle("show");
} else {
var classes = x.className.split(" ");
var i = classes.indexOf("show");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("show");
x.className = classes.join(" ");
}
}
.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-content a:hover {background-color: #f1f1f1}
.show {display:block}
<p>The classList property is not supported in Internet Explorer 9 and earlier.</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn" onclick="myFunction2()">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>
I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.
I have this menu that is active on the first item of the main menu (top):
The problem I have is that when the user click on the middle, fourth or last main menu item, the submenu now looks like this (getting out of everything):
Also, the main menu will grow up by the client, so there will be sixth, seventh, etc... so I can´t just control with a class the items that are right now...
Any ideas on how to come to a css / jquery solution about this? trying to follow the first image that is based on the design.
This is my markup:
<ul id="mainmenu" class="clearfix">
<li class="active">
<a class="arrowdown" href="javascript:void(0)">ANSIEDAD</a>
<ul class="sublist">
<li>
Política
</li>
<li>
Economía
</li>
<li>
Sociedad
</li>
<li class="active">
Medios
</li>
<li>
Inmobiliario
</li>
</ul>
</li>
<li>
PRETENSIÓN
</li>
<li>
HEDONISMO
</li>
<li>
MATERIALISMO
</li>
<li>
ARROGANCIA
</li>
<li id="menu_search">
</li>
</ul>
and the CSS:
ul#mainmenu{
font-family: Georgia, Times, "Times New Roman", serif;
width: 754px;
margin: 0 auto;
li{
float: left;
list-style: none;
background: #999999;
margin-right: 4px;
.round_corners();
width: 140px;
text-align: center;
padding: 3px 0px;
position: relative;
a{
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
&.arrowdown{
padding-bottom: 10px;
background: url('../img/sprites.png') no-repeat center -169px;
}
}
&#menu_search{
background: url('../img/sprites.png') #000 2px 2px;
width: 34px;
height: 28px;
padding: 0;
margin-right: 0;
a{
display: inline-block;
width: 100%;
height: 100%;
}
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
ul.sublist{
position: absolute;
width: 560px;
top: 39px;
left: 40px;
li{
float: left;
margin-right: 5px;
margin-bottom: 5px;
width: auto;
padding: 1px 9px;
background: #666666;
a{
text-transform: none;
}
&.active{
background: #000000;
}
&:hover{
background: #000000;
color: #ffffff;
}
}
}
}
}
Try giving the main menu a max-width. In this case I'd assume you want its maximum width to be 100%.
#mainmenu {
max-width: 100%;
}
This will not allow the main menu to exceed the page's width. You may encounter new problems with this, though.
Using max-width will solve your problem. Here's an example of how you can use max-width to keep the sub-menu in check.
Instead of breaking the sub-menu into two lines, you could probably try to shift the anchor point of the sub-menu to a more centralized location. Just my 2 cents.