We Keep Coding

Change the active navbar color in css

I am using a simple top css navbar(just a css and html, without bootstrap/other framework) and i would like to change the active page. So when i go to the home page, the button color in navbar changes into red/whatever, likewise when i go to the other page...
here the code:
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
do you have an idea? it's ok to add javascript
Thanks a lot!

What I did here is when $(document).ready(function() {..} get the path using var url = window.location.pathname; so you know which link the user coming from therefore you know which menu item they clicked.
Then $('ul li a').each(function() {...} will check each menu item, try to match the url path with the menu's href attributes, if a match found, make that menu item active (with css active class added), if not match remove the active class if any. That should do the trick.
(note: assume your app is not single page app)
for Single page app it is much easier, deactive all menu item then active the one you clicked.
$(document).ready(function() {
//var url = window.location.pathname;
var url = 'http://stacksnippets.net/js#division';
console.log('url-->', url);
$('ul li a').each(function() {
var href = $(this).attr('href');
if (!!url.match(href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>

The simplest solution would be to add an active class to the link of the page you're on:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
Then style those that class accordingly:
li a.active {
background: #F00;
}
If you're using a CMS (Wordpress, etc), adding some sort of active class on the active link is usually done for you. If you're doing your own static HTML, you would have to do it manually.

try below code for active menu
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a').on('click', function(){
$('li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover, li a.active {
background-color: #111;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>

To change the color of active link in your navigation you need to do the following things:
On click of navigation link add css class:
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
Add CSS for active class
ul li a.active {
background-color: #f4f4f4;
}

One possible way is to use the active selector in CSS. This selector highlights the active element you are using when its clicked.
a:active {
background-color: yellow;
}
a:focus {
background-color: yellow;
}
You can use some JQuery to turn it on and off too. Try looking at this post here, I think you may have get your answer.
(Related to How to keep :active css style after clicking an element)
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});

function redButtons() {
$(".inclusive-buttons").on("click", "a", function() {
$(".inclusive-buttons a").css("background", "#333");
$(this).css("background", "red");
})
}
var x = document.getElementsByTagName("li");
x.onclick = redButtons();
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
a:active {
background-color: red;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<ul class="inclusive-buttons">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
https://jsfiddle.net/m5gm7x7e/2/

HTML Part
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="News">News</li>
<li id="Contact">Contact</li>
<li id="About">About</li>
<li id="Division">Division</li>
<li id="Career">Career</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="MChoice">MChoice's</li>
</ul>
</div>
</div>
</div>
</div>
JavaScript part
$(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
CSS Part
.navbar #nav > .active > a {
color: yellow;
}
here is JSFiddle result
http://jsfiddle.net/Ag47D/775/

Here's a JSFiddle: https://jsfiddle.net/timhjellum/nw3n7eka/103/
This is a jQuery option which looks at the page URL (window.location) and specifically for a string which you define in the .indexOf(" add a unique string here ") and asks if that string is greater than -1, then locate the li element with the class you assigned to it, and add another class called active.
In the example I'm using "display" because that the URL for that iFrame that JSFiddle uses so hopefully that's not confusing.
Here's the navigation:
$(document).ready(function () {
if(window.location.href.indexOf("home") > -1) {
$(".home").addClass("active");
}
if(window.location.href.indexOf("display") > -1) {
$(".news").addClass("active");
}
//make one for each nav element
});
The HTML needs to be modified like:
<ul>
<li class="home">Home</li>
<li class="news">News</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
And then a simple css addition:
li.active {
background-color: white;
}
li.active a {
color: black;
}
If you can't use jQuery, let me know but this is the easiest solution for you to implement and allow you to easily modify

You could try having separate classes in your CSS file, like "ul-home," "ul-news," etc. and define different background colors for each, then simply set the class for your <ul> tag on each page to match the class you want. So:
.ul-home {
background-color: red;
}
.ul-news {
backrgound-color: yellow;
}
And then on your home page:
<ul class="ul-home>
<li>Home</li>
<li>News</li>
</ul>
On your news page:
<ul class="ul-news">
<li>Home</li>
<li>News</li>
</ul>
Etc. with all the other pages you have.

stopping dropdown navigation bar from pushing elements aside

I have a dropdown navigation bar, and when elements like buttons or images are too high up on the page, the navigation bar pushes the elements to the right side when drop-down options appear. How do I stop this?
Navbar:
<nav id="nav1">
<ul>
<li>Home</li>
<li onmouseover = "DropDown1()" onmouseout="DropUp1()">Images<ul class="DropUp" id="Droplist1" >
<li class="DropDown"><a id="Droplist1" href="#">Test1</a></li>
<li class="DropDown">Test2</li>
<li class="DropDown">Test3</li></ul>
</li>
<li onmouseover = "DropDown2()" onmouseout="DropUp2()">Adverts<ul id="Droplist2" class="DropUp">
<li class="DropDown">Test1</li>
<li class="DropDown">Test2</li></ul>
</li>
<li>Data Validation</li>
<li>Security</li>
</ul>
</nav>
CSS:
nav#nav1 li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
nav#nav1 li {
list-style: none;
float: left;}
.DrowDown {
display: block;
position: absolute;
margin: 0;
padding: 0;
float: none;
}
nav#nav1 li:hover li {
float: none; }
nav#nav1 li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
nav#nav1 ul li a:hover { background: #686868 ; }
nav#nav1 ul li a:active { background: #F0F0F0; }
JavaScript functions for dropdown:
function DropDown2() {
var t = document.getElementById("Droplist2");
t.className = "DropDown";
}
function DropDown1() {
var t = document.getElementById("Droplist1");
t.className = "DropDown";
}
function DropUp2() {
var t = document.getElementById("Droplist2");
t.className = "DropUp";
}
function DropUp1() {
var t = document.getElementById("Droplist1");
t.className = "DropUp";
}
If you are wondering why I took such a difficult route for making the navigation bar, it's because I have to use JavaScript.
Here is JS fiddle example: http://jsfiddle.net/fNPvf/10015/
The window is small in the fiddle, and the effect is slightly different, but notice how when you hover over "Data Validation" the dropdown menu pushes the text/image/body downwards?

You need absolute positioning and a higher z-index for either the containing <div> or the <ul> itself. Just add this to your code and adjust the z-index as needed:
nav#nav1 ul{
position: absolute;
top: 0;
z-index: 9;
}
See working demo here

Prevent menu from rolling up when its sub-menu is clicked

I have a vertical menu here, which in turn has primary and secondary sub-menus. When the primary or secondary sub-menu is clicked, the whole menu will be closed. I want the sub-menu to stay open when clicked.
e.g.: vertical menu > sub-menu first > sub-menu second (clicked), the page opens up and the menu stays open.
$(function () {
$('.showFirst').click(function () {
$(this).children('ul').slideToggle();
$('.showFirst').not(this).find('ul').slideUp();
e.stopPropagation();
});
$('.showSecond').click(function () {
$(this).children('ul').slideToggle("slow");
return false;
});
$('ul li ul').click(function () {
$('ul li ul li ul').slideUp();
});
$('ul li ul li ul').click(function (e) {
$("ul li ul li ul").slideUp();
$("ul li ul").slideUp();
e.stopPropagation();
});
});
ul {
list-style: none;
cursor: pointer;
}
a {
color: black;
line-height: 25px;
text-decoration: none;
}
a:hover {
color: #aaa;
text-decoration: none;
}
span.sb-caret {
width: 0px;
height: 0px;
display: inline-block;
margin: 0px 5px;
border: 5px solid transparent;
}
span.sb-caret {
/* Caret Down */
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
/* Caret Up */
border-top: 0px solid transparent;
border-bottom: 5px solid;
}
ul li > ul {
display: none;
/* border:1px solid black; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="showFirst">First<span class="sb-caret"></span>
<ul>
<li>Second
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
<li class="showFirst">First<span class="sb-caret"></span>
<ul>
<li class="showSecond">Second<span class="sb-caret"></span>
<ul>
<li>third
</li>
<li>third
</li>
</ul>
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
</ul>

I'm not sure how you're even able to keep track of all of those ul li ul... strings...but don't. That's setting yourself up to easily make mistakes if your DOM changes even slightly, or if you mistype something. Add classes to your markup to make it easier to traverse and reference elements. In this case, a distinct class for each level of <ul> would make things much easier.
Then, you simply have to be selective about which menus you collapse and when. You'll notice the only real change here is that I replaced your ul li ul... click handlers with these:
$('.tier-2').click(function (e) {
$('.tier-3').slideUp();
e.stopPropagation();
});
That code ensures that anytime a level-two list is clicked, all level-three ones collapse.
$('.tier-3').click(function (e) {
$('.tier-2, .tier-3')
.not(this)
.not($(this).closest('.tier-2'))
.slideUp();
e.stopPropagation();
});
This fragment ensures that if a level-three list is clicked, all other level-three lists collapse except this one, and all level-two lists collapse except the parent of this one.
See the full example below.
$(function () {
$('.showFirst').click(function () {
$(this).children('ul').slideToggle();
$('.showFirst').not(this).find('ul').slideUp();
e.stopPropagation();
});
$('.showSecond').click(function () {
$(this).children('ul').slideToggle("slow");
return false;
});
$('.tier-2').click(function (e) {
$('.tier-3').slideUp();
e.stopPropagation();
});
$('.tier-3').click(function (e) {
$('.tier-2, .tier-3')
.not(this)
.not($(this).closest('.tier-2'))
.slideUp();
e.stopPropagation();
});
});
ul {
list-style: none;
cursor: pointer;
}
a {
color: black;
line-height: 25px;
text-decoration: none;
}
a:hover {
color: #aaa;
text-decoration: none;
}
span.sb-caret {
width: 0px;
height: 0px;
display: inline-block;
margin: 0px 5px;
border: 5px solid transparent;
}
span.sb-caret {
/* Caret Down */
border-top: 5px solid;
border-bottom: 0px solid transparent;
}
.sb-submenu-active > span.sb-caret {
/* Caret Up */
border-top: 0px solid transparent;
border-bottom: 5px solid;
}
ul li > ul {
display: none;
/* border:1px solid black; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li class="showFirst">First<span class="sb-caret"></span>
<ul class="tier-2">
<li>Second
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
<li class="showFirst">First<span class="sb-caret"></span>
<ul class="tier-2">
<li class="showSecond">Second<span class="sb-caret"></span>
<ul class="tier-3">
<li>third
</li>
<li>third
</li>
</ul>
</li>
<li>Second
</li>
<li>Second
</li>
</ul>
</li>
</ul>

Dropdown Menu Pushing Parent Menu Items

I have five parent menu items, and the third one has a child dropdown menu. When you click on the third parent menu, the dropdown menu shows up, but it pushes the fourth and fifth parents menu items to below.I'd like the dropdown menu to be below the parent menu row, without pushing any parent menu items. It's a Shopify site.
http://jsfiddle.net/3s2qhhx3/
//Main nav expanders
$(document).on('click', '#navpanel .mainnav .title', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
$(window).trigger('reup-navbar');
});
var navSpeed = 150;
$(document).on('click', '#navpanel .mainnav button', function() {
//Prep animation on sublist
if ($(this).parent().hasClass('expanded')) {
$(this).html('<span class="icon-plus"></span>');
$(this).siblings('ul').stop(true, true).css('display', 'block').slideUp(navSpeed, 'linear', function() {
$(this).parent().toggleClass('expanded');
$(window).trigger('reup-navbar');
});
} else {
$(this).html('<span class="icon-cross"></span>');
$(this).siblings('ul').stop(true, true).css('display', 'none').slideDown(navSpeed, 'linear', function() {
$(window).trigger('reup-navbar');
});
$(this).parent().toggleClass('expanded');
}
$(window).trigger('reup-navbar');
});
$(document).on('click', '#navpanel .mainnav a[href="#"]', function() {
$(this).siblings('button').trigger('click');
return false;
});
#navbar #navpanel .mainnav {
position: relative;
margin: 0 auto;
}
#navbar #navpanel .mainnav > ul > .active > ul {
display: block;
text-align: center;
}
#navbar #navpanel .mainnav li li {
position: relative;
display: inline;
text-align: center;
}
<div class="mainnav">
<ul class="tier1">
<li id="blog">blog</li>
<li class="">
<a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
</li>
<li class="">
<a class="tier1title" href="/#">Categories</a>
<ul class="tier2">
<li class="">
Knits
</li>
<li class="">
Tops
</li>
<li class="">
Dresses
</li>
<li class="">
Bottoms
</li>
. . .
<li class="">
<a class="tier1title" href="/collections/sale">Sale</a>
</li>
<li class="registerform">
...
</li>
</ul>
</div>

You need to set the position of your sub-menu to absolute. Also, you need to change your first <li> display to inline-block instead of inline.
CSS:
.mainnav {
position: relative;
margin: 0 auto;
}
.mainnav ul > li {
display: inline-block;
text-align: center;
}
.mainnav ul li:hover ul {
display:block;
background:red;
height:auto;
width:auto;
}
.mainnav ul li ul {
position: absolute;
display: none;
padding: 0;
margin: 0;
}
Hope it helps. Updated Fiddle..

Adding 3rd level to CSS menu

I am using very old portal where the is not defined in the begining of the html code, and also I managed to use a jquery/css horizontal drop menu, I need help adding third level to the menu here is my code
#jsddm {
margin: 0;
padding: 0
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#jsddm li a {
display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap
}
#jsddm li a:hover {
background: #24313C
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white
}
#jsddm li ul li {
float: none;
display: inline
}
#jsddm li ul li a {
width: auto;
background: #A9C251;
color: #24313C
}
#jsddm li ul li a:hover {
background: #8EA344
}
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
and here is the menu
<ul id="jsddm">
<li>About us
<ul>
<li>Mission
<ul>
<li>Mission Statment 1</li>
</ul>
</li>
<li> vision </li>
<li>status </li>
</ul>
</li>
<li> Contact
<ul>
<li>Office </li>
<li> Support </li>
</ul>
</li>
</ul>
as you can see the 3rd level "Mession Statment 1" doesn't appear, and that's my problem, any suggestion ???

The problem is maybe due to these lines
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
in which you set an event handler only to the direct <li> children of #jsddm element. But your third <ul> is not contained in a such <li>, so try to change the above lines in
$('#jsddm li').bind('mouseover', jsddm_open);
$('#jsddm li').bind('mouseout', jsddm_timer);
and
function jsddm_open() {
...
ddmenuitem = $(this).children('ul:first').css('visibility', 'visible');}