Navbar bar not updating to active when clicked

Navbar bar not updating to active when clicked - javascript

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

Related

How to change size of prices without disrupting the menu?

I've been trying to get the size of the prices to change, but whenever I do it goes on top of the dotted line instead of staying above it.
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
top: .9em;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
I tried to mess with the padding and margin, but it didn't change anything for me.
I just want to change the size of the prices while staying above the dotted lines

Just set the hight of .li explicitly, and also the size of .price em (that's the font size of the price).
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
/* set the height of the li explicitly */
height: 20px;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
float: right;
}
/* set the size of .price em */
.price em {
font-size: 50px;
}
/* set the size of .price sup */
.price sup {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
But I think it would be much better to use flexbox for this, and then you can set the font-size to whatever value you want, and don't have to worry about not displaying right:
body {
background: pink;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
background: white;
display: flex;
width: 80%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted red;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}
<ul class="menu-list">
<li class="li"><span class="title">Food 1</span><span class="price">3<sup>50</sup></span></li>
<li class="li"><span class="title">Food 2</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Food 3</span><span class="price">4<sup>00</sup></span></li>
</ul>

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

I have to create a drop down with two columns just like the image It should be like when i click on the drop down menu it should display like this so far i am not successful!. This is the sample code i am working with.. if i execute this code it is no where what i am expecting and also i am new to coding.
$(document).ready(function() {
// NAV TOGGLE ONCLICK WITH SLIDE
$(".clickSlide ul").hide();
$(".clickSlide").click(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONCLICK WITH FADE
$(".clickFade ul").hide();
$(".clickFade").click(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH SLIDE
$(".hoverSlide ul").hide();
$(".hoverSlide").hover(function() {
$(this).children("ul").stop(true, true).slideToggle("fast"),
$(this).toggleClass("dropdown-active");
});
// NAV TOGGLE ONHOVER WITH FADE
$(".hoverFade ul").hide();
$(".hoverFade").hover(function() {
$(this).children("ul").stop(true, true).fadeToggle("fast"),
$(this).toggleClass("dropdown-active");
});
});
/**/
#navbar {
width: 100%;
padding: 10 10 10 10;
}
#dropdown1 {
width: 960px;
margin: 0 auto;
padding: 0;
height: 1em;
font-weight: bold;
}
#dropdown1 li {
list-style: none;
float: left;
}
#dropdown1 li a {
padding: 0px 0px 0px 5px;
text-decoration: none;
}
#dropdown1 li ul {
display: none;
background-color: #fff;
}
#dropdown1 li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#dropdown1 li:hover li,
#navbar li.hover li {
float: left;
}
#dropdown1 li:hover li a,
#navbar li.hover li a {
background-color: #fff;
color: #000;
}
.topnav a {
color: #000;
text-decoration: none;
}
.topnav a:hover {
border-bottom: 1px solid gold;
}
.column {
display: inline-block;
list-style-type: none;
float: left;
margin: 5px 0 0 0;
padding: 0 5px 0 0;
width: 500px !important;
}
.column li {
float: left;
display: inline;
}
.column a {
color: #999;
text-decoration: none;
font-size: .7em;
}
.column a:hover {
border-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
</div>

if i understood properly,
This jsfiddle maybe helpful
looks like u use two div but have same class name, then with your css only set "column" .
so the two div will display in same position, that's why u have two div but only display one.
<div class="navbar">
<ul id=dropdown1>
<li class="topnav">
<div class="column">
Services <span>▼</span>
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
<div class="column2">
<ul>
<li>Web hosting</li>
<li>Web builder</li>
<li>Themes</li>
</ul>
</div>
</ul>
then you should set column2's css
UPDATE:
this fiddle
look this fiddle above
i change the li and set
.column a:after{
content:"\a";
white-space: pre;
}
\a means line break, character U+000A, and white-space: pre tells browsers to treat it as a line break in rendering.
found answer here Line break (like <br>) using only css

I have developed drop-down as per your image, without using any plugin.
I am using:
HTML
CSS
Explaination:
I am using table tag to design multiple columns.
<table>
<tr>
<td></td>// for left-col links
<td></td>// for right-col links
</tr>
</table>
Then inside <td> tag I am using <ul><li></li></ul>tag. Inside <li> you can have multiple links.
Similarly I did for right-side column.
Full Code
CSS code
<style>
.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;
}
.link-format {
list-style-type:none;
width:100px
}
</style>
HTML code
<body>
<h2>Dropdown Menu with multiple columns</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">
<table>
<tr>
<td>
<ul class="link-format" style="border-right:1px gray dashed">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
<td>
<ul class="link-format">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
Working JsFiddle: https://fiddle.jshell.net/mayankBisht/cvsrqn3r/1/
Hope this helps.
Please reach out to me for more information/help.
Thanks.

How to add a header sub-menu using jQuery on click?

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>

Drop down menu only by click on button

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>

Navigation bar jQuery not working

I'm a student learning some really basic HTML coding and I decided to use a simple JavaScript navigation bar so that the drop down menu has some animation speed.
The navigation bar was previously working but after adding my image slider it stopped working.
Thanks for the help!
// JavaScript NavBar
$( document ).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function () {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function () {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin:0;
padding:0;
}
body{
background:url(../images/subtle_white_mini_waves.png) repeat;
font-family:Tahoma, Geneva, sans-serif;
color: white;
}
#navbar{
margin-left:-400px;
position:absolute;
left:50%;
}
#navbar a{
text-decoration:none;
}
.button{
background:url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover{
background:#e6e6e6;
}
.button a{
padding: 34px 0px;
}
#navbar ul{
text-align:center;
}
#navbar ul li{
float: left;
display: inline;
font-size:16px;
height:89px;
}
#navbar ul li:hover{
background:#E6E6E6;
}
#navbar ul li a{
display:block;
color: #444;
}
#navbar ul li ul{
position:absolute;
width: 170px;
background:#fff;
}
#navbar ul li ul li{
width: 170px;
}
#navbar ul li ul li a{
display:block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a{
background:#f7f7f7;
}
#navbar ul li ul.fallback{
display:none;
}
#navbar ul li:hover ul.fallback{
display:block;
}
.shadows{
position:absolute;
z-index:10;
}
#shadowtopleft{
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowtopright{
float:left;
}
#shadowbottomleft{
margin-top: 83px;
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowbottomright{
margin-top: 83px;
float:left;
}
.banner {
z-index:-1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display:block;
float:left;
padding: 0px;
margin: 0px;
min-height:500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation</li>
<li>Family Strengthening</li>
<li>Community Integration</li>
<li>Support Programmes</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate</li>
<li>Volunteer</li>
<li>Sponsor</li>
<li>Partner</li>
<li>Join The Staff</li>
</ul>
</li>
<li>
<div id="logo">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board</li>
<li>News and Views</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
</ul>
</div>
<script>
$( document ).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>

Since you are a student, you might have not of heard of the z-index style property. The z-index property specifies the stack order of an element, especially if you are using position: absolute; a lot.
So your menu menu, #navbar, is there. It's just hidden under other elements, so you might want to add the z-index style to your code, like this:
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
I also thought that I'd mention that in your CSS code, you made a tiny error:
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
Should be:
.banner ul {
list-style:none;
padding: 0px;
margin: 0px;
}
I combined my answer and put it inside if the code snippet below.
// JavaScript NavBar
$(document).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function() {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function() {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/subtle_white_mini_waves.png) repeat;
font-family: Tahoma, Geneva, sans-serif;
color: white;
}
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
#navbar a {
text-decoration: none;
}
.button {
background: url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover {
background: #e6e6e6;
}
.button a {
padding: 34px 0px;
}
#navbar ul {
text-align: center;
}
#navbar ul li {
float: left;
display: inline;
font-size: 16px;
height: 89px;
}
#navbar ul li:hover {
background: #E6E6E6;
}
#navbar ul li a {
display: block;
color: #444;
}
#navbar ul li ul {
position: absolute;
width: 170px;
background: #fff;
}
#navbar ul li ul li {
width: 170px;
}
#navbar ul li ul li a {
display: block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a {
background: #f7f7f7;
}
#navbar ul li ul.fallback {
display: none;
}
#navbar ul li:hover ul.fallback {
display: block;
}
.shadows {
position: absolute;
z-index: 10;
}
#shadowtopleft {
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowtopright {
float: left;
}
#shadowbottomleft {
margin-top: 83px;
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowbottomright {
margin-top: 83px;
float: left;
}
.banner {
z-index: -1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display: block;
float: left;
padding: 0px;
margin: 0px;
min-height: 500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation
</li>
<li>Family Strengthening
</li>
<li>Community Integration
</li>
<li>Support Programmes
</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate
</li>
<li>Volunteer
</li>
<li>Sponsor
</li>
<li>Partner
</li>
<li>Join The Staff
</li>
</ul>
</li>
<li>
<div id="logo">
<a href="index.html">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</a>
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board
</li>
<li>News and Views
</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities
</li>
<li>Feedback
</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Navbar bar not updating to active when clicked - javascript

Related

How to change size of prices without disrupting the menu?

Is it possible to create a drop down with multiple columns (like mega menu) using html css and jquery without using any plugins?

How to add a header sub-menu using jQuery on click?

Drop down menu only by click on button

Navigation bar jQuery not working

Categories

Resources