We Keep Coding

Highlight the current menu item?

So basically I'm trying to give a class "current" to highlight the menu item for the current page.
I've tried a couple of snippets I've seen on this website but most of them didn't work. This code is almost working for me, but the problem is although the current menu item is properly highlighted, Home button is also highlighted no matter which page I'm viewing. So like if I'm viewing "Archive" page, both Archive and Home are highlighted.
I'm using Wordpress to build the website by the way and I'm aware that Wordpress supports this effect but I'd like to achieve this without it.
HTML
<ul class="navigation">
<li>Home</li>
<li>Archive</li>
<li>About</li>
</ul>
JS
jQuery(function($) {
$('.navigation li a').each(function() {
var target = $(this).attr('href');
if(location.href.match(target)) {
$(this).addClass('current');
} else {
$(this).removeClass('current');
}
});
});
I'm not really familiar with javascript so there might be some errors.
Thank you for reading this, and have a great new year.

The suggestion of wp_nav_menu is the correct way in WordPress, but if you're just looking for a quick solution and the menu won't change that often, you can get by with a check inside of each list item.
<ul class="navigation">
<li>Home</li>
<li>Archive</li>
<li>About</li>
</ul>
This makes use of WordPress' "Conditional Tags" which effectively come back as "true" or "false" for a given page. Note that the second link checks multiple blog/post conditions (assuming that that is for the blog).

I'm not sure this is help you or not.
If you are using wordpress you can use this for your menu:
<?php
wp_nav_menu(array(
'theme_location' => 'header',
'menu_class' => 'navbar-nav px-0',
'depth' => 2,
'container' => false,
));
?>
and wordpress automatically add aria-current="page" to your 'nav-link' when you landing on current page.
then you can add css to attribute current page like this
ul.navbar-nav [aria-current]:not([aria-current="false"])
Also if you have 'sub-menu' wordpress add '.sub-menu' class to ul child and you can add css like this for 'sub-menu'.
ul.navbar-nav li ul.sub-menu [aria-current]:not([aria-current="false"])
this is my last website you can check it: http://kimiaroz.com/

You can use simple filter
add_filter('nav_menu_link_attributes', 'add_current_class_to_link', 10, 4);
function add_current_class_to_link($atts, $item, $args, $depth)
{
$atts['class'] = $item->current ? 'current' : '';
return $atts;
}

toggle the nav-bar active element

I'm using blade template, the template contains a navigation bar. it is something like this
<ul>
<li class="active">page1</li>
<li>page1</li>
<li>page1</li>
</ul>
Using jquery I can make the li element active once clicked.
Now the problem is when I click on the second link the page2 will be loaded and that page extends the same template so it will load it again and there then the 1st element will be active. The solution that I thought about is adding a div to each page to let me identify the page
<div class="type" data-type="page2"></div>
and when the page is loaded I set the selected li element depending on the page type.
I try this and it is working the only thing is that I don't think it is the perfect solution. Is there an other more simple way to solve this?
Thanks

I'd set a class on the html element to identity your page. That way you can have javascript as well as css react to what type of page you're on. Not that you need css in this particular example, but down the line use-cases might pop-up and then you already have a solution in place.
edit:
Adding class dynamically through a tiny script:
//script in specific page
<script>pagetype = "page2"</script>
//script as part of layout template shared between pages
<script>
$(function(){
$("html").addClass(pagetype);
})
</script>

In my opinion, a better solution would be detecting the current page with Request::segment() (or Request::is(), depending on the stucture of your URLs) method. Combine that with a View composer to avoid passing data to each view manually.
An example:
The view composer:
class PageComposer
{
public function compose($view)
{
$view->with('active', Request::segment(1));
}
}
The service provider:
class PageServiceProvider extends ServiceProvider
{
public function register()
{
View::composer('partials.header', 'PageComposer');
}
}
The part of the header file that is common to all your pages:
<ul id='pages'>
<li id='page1'>page1</li>
<li id='page2'>page2</li>
<li id='page3'>page3</li>
</ul>
The script that changes the active class:
<script>
$(document).ready(function () {
var activeLink = $('#{{ $active }}');
activeLink.addClass('active');
});
</script>
More information about this in Laravel 4 documentation:
Requests
View Composers

You can compare anchor href to pathname and then add style or assign class to correct anchor e.g
...
<li>Link</li>
...
$('a[href="'+window.location.pathname.split('/').pop()+'"]').css({ color: 'red' });
or
$('a[href="'+window.location.pathname.split('/').pop()+'"]').addClass('current');

highlight in different colors for links in main menu based on current page

How to highlight every link in main menu with a different color based on its current page ?
for example change the contact us link color to red in the main menu when the current page is contact us
and change the about us link color to orange in the main menu when the current page is about us and so on

You can use javascript to do this:
first, retrieve your current url path:
var pathname = window.location.pathname;
for example, return "/contact.html"
then you can use this value to detemine which item to be hilighted:
if(pathname == "/contact.html"){
document.getElementById("contact").addClass("hilighted");
}
and so on.

a:active : when you click on the link and hold it.
a:visited : when the link has already been visited.
If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -
.current {
color: red;
background-color: #000000;
}
Add this new class .current only to the corresponding li (link), either on server-side or on client-side (using javascript/jquery).
With JQuery you could use the .each function to iterate through the linkswith the following code:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("current");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
$("nav [href]").each ...
if you are using url parameters, it may be necessary to strip these:
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.
source

There are a lot of approaches, it's hard to say which is best without seeing your code.
You could use some Javascript on each page to add or change the class of your links.
For instance on your contact us page use a a script like
var contactLink = document.getElementById("contactUs");
contactLink.addClass("orangeLink");

You can add active class to the menu based on current page.
if you are in contact page then add active class to contact us menu, same for about us page, then do some css for that active class.
for example if you are in contact-us page then :-
<ul>
<li class="home">Home</li>
<li class="contact active">Contact Us</li>
<li class="about">About Us</li>
</ul>
Now do some css for that :-
.contact.active{
color : red;
}
.about.active{
color : orange;
}
It will worked for you.

Hide what ever exceeds 720px and display the hidden area onClick?

I am trying to make a bunch of <li>'s which are placed next to each-other and they look like boxes; to display 10 every time. The rest to be hidden and to be displayed onClick.
So it should look something like this:
The <li>'s has to be placed in the same <ul> and have no or the same class. So basically the HTML should look something like this:
<ul id="bxs" class="tab1">
<li id="item-1">1</li>
<li id="item-2">2</li>
<li id="item-3">3</li>
<li id="item-4">4</li>
<li id="item-5">5</li>
<li id="item-6">6</li>
<li id="item-7">7</li>
<li id="item-8">8</li>
<li id="item-9">9</li>
<li id="item-10">10</li>
<li id="item-11">11</li>
<li id="item-12">12</li>
<li id="item-13">13</li>
<li id="item-14">14</li>
<li id="item-15">15</li>
<li id="item-16">16</li>
<li id="item-17">17</li>
<li id="item-18">18</li>
<li id="item-19">19</li>
<li id="item-20">20</li>
</ul>
and... this is my question. How can I make them act like this: http://jsfiddle.net/mnCck/6/show/ so if you click on the button, the other 10 appear etc. (On the example, I used 2 ul's and I hide the one and display the other onClick)
Why I need to do this?
Basically, this is a little bookmark page for a client. The boxes will be the bookmarks and they will be created one by one dynamically like this: http://jsfiddle.net/WNZdr/show/ So if you notice, every time you create a box, it gets an ID and it ends up to be like the html I pasted above. I want only 10 of the boxes to be visible and when the client reach that limit then the boxes will be hidden and they will look like they are in another tab so they can be accessed using the nav buttons.
I am not new with javascript or css, it's just I cant think of a way of doing this. I was thinking to place a div ontop of which hides everything out of the range of 720px and then when the nav button is clicked, hide the li's, push them with css at right:720px and display them again. That will look and feel that they are in tabs?
Sorry if the title is somehow confusing, I don't know how to describe all this in a title.

NOTE: Question was not tagged with javascript or jquery, but your example used jquery so I assumed the solution could as well.
You can use overflow: hidden and then adjust the scrollTop.
http://jsfiddle.net/WNZdr/1/
$("#prev").click(function() {
page--;
if (page < 0) page = 0;
$("#bxs").scrollTop(page * 70);
});
$("#next").click(function() {
page++;
$("#bxs").scrollTop(page * 70);
// adjust in case next was clicked and there are no more
page = $("#bxs").scrollTop() / 70;
});
This will need slight tweeking to get the heights/offsets just right, but gives the basic idea.

hide show div when multiple nested layers exist

function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}
I need this code to close the current layer and them open another. These layers exist in the content div and are nested 12 deep.
For instance:
This is in the body of the container(navigation) to control the content container which is nested 12 deep. (I came up with an idea on my own but it wound up closing all layers making my web page disappear)
<li>US News</li>
Hence when the navigation button marked US News is clicked via the above it opens
Now, if I have US News open, and I click on say Politics (the third nested layer, I want USNews (the first nest layer) to close and only Politics to open (noticing of course that Politics is the Third Layer and USNews is the first layer).. and so forth..
I've attempted if else statements but I have been out of this for years now and am just frustrated beyond belief... any help would be greatly appreciated

You can loop all the layers and hide them before. And only then show selected one.
function showlayer(layer){
var Layers=document.getElementsByTagName("div");
for(i=0;i<Layers.length;i++){
if(Layers.getAttribute("class")=="layer"){
Layers.style.display="none";
}
}
document.getElementById(layer).style.display="block";
}
<li onclick="javascript:showlayer('USNews')"><a href="#" >US News</a></li>
<li onclick="javascript:showlayer('UkNews')"><a href="#" >Uk News</a></li>
<li onclick="javascript:showlayer('ArNews')"><a href="#" >Ar News</a></li>
<div id="USNews" class="layer"></div>
<div id="UkNews" class="layer"></div>
<div id="ArNews" class="layer"></div>

Instead of writing the raw Javascript, why not use a library instead.
In JQuery you could move to the correct layer, and hide or show it relatively easily.
(Probably one line of script tbh.)