In a page with some navigation links,I want the link of the current page are hightlighted,just like this:
The link "HTML Attributes" is highlighted(bolded) since this link will take one to the current page.
I know this can be implemented manually(just hightlighted the according link,but is there some smart way? highlight the right link dynamically and automatically?
CSS:
.topmenu ul li.active a, .topmenu ul li a:hover {
text-decoration:none;
color:#fff;
background:url(../images/menu_a.jpg) no-repeat center top;
}
JavaScript:
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$(".topmenu a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
//for making parent of submenu active
$(this).closest("li").parent().parent().addClass("active");
}
});
});
</script>
Html Code:
<div class="topmenu">
<ul>
<li>Home</li>
<li>Newsletter</li>
<li>Forms</li>
<li>Mail</li>
<li>Service</li>
<li style="border:none;">HSE</li>
<li>MainMenu2
<ul>
<li>submenu1</li>
<li>submenu2</li>
<li>submenu3</li>
</ul>
</li>
</ul>
</div>
You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...
That probably didn't make much sense, so here's an example:
<body id="index">
<div id="menu">
<ul>
<li class="index" >Index page</li>
<li class="page1" >Page 1</li>
</ul>
</div> <!-- menu -->
</body>
In the page1.html, you would set the id of the body to: id="page1".
Finally in your CSS you have something like the following:
#index #menu .index, #page1 #menu .page1 {
font-weight: bold;
}
You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.
It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.
It seems to me that you need current code as this ".menu-current css", I am asking the same code that works like a charm, You could try something like this might still be some configuration
a:link, a:active {
color: blue;
text-decoration: none;
}
a:visited {
color: darkblue;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
div.menuv {
float: left;
width: 10em;
padding: 1em;
font-size: small;
}
div.menuv ul, div.menuv li, div.menuv .menuv-current li {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: 5px;
font-weight: normal;
}
div.menuv ul ul {
padding-left: 12px;
}
div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover {
display: block;
text-decoration: none;
padding: 2px 2px 2px 3px;
border-bottom: 1px dotted #999999;
}
div.menuv a:hover, div.menuv .menuv-current li a:hover {
padding: 2px 0px 2px 1px;
border-left: 2px solid green;
border-right: 2px solid green;
}
div.menuv .menuv-current {
font-weight: bold;
}
div.menuv .menuv-current a:hover {
padding: 2px 2px 2px 3px;
border-left: none;
border-right: none;
border-bottom: 1px dotted #999999;
color: darkblue;
}
<script id="add-active-to-current-page-nav-link" type="text/javascript">
function setSelectedPageNav() {
var pathName = document.location.pathname;
if ($("nav ul li a") != null) {
var currentLink = $("nav ul li a[href='" + pathName + "']");
currentLink.addClass("active");
}
}
setSelectedPageNav();
</script>
Css classes are here
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
Make your HTML like this, Set url as id
<div class="my_menu" id="index-url">Index</div>
<div class="my_menu" id="contact-url">Contac</div>
Here write javascript, put this javascript after the HTML code.
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
I would normally handle this on the server-side of things (meaning PHP, ASP.NET, etc). The idea is that when the page is loaded, the server-side controls the mechanism (perhaps by setting a CSS value) that is reflected in the resulting HTML the client sees.
You can use Javascript to parse your DOM, and highlight the link with the same label than the first h1 tags. But I think it is overkill =)
It would be better to set a var wich contain the title of your page, and use it to add a class at the corresponding link.
I usually use a class to achieve this. It's very simple to implement to anything, navigation links, hyperlinks and etc.
In your CSS document insert:
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
This will make the hover state of the list items have red text and a white background. Attach that class of current to any link on the "current" page and it will display the same styles.
Im your HTML insert:
<nav>
<ul>
<li class="current">Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
Please Look at the following:
Here is what's working:
1.) top menu buttons are visible and highlight correctly
2.) sub menu buttons are not visible until top menu is clicked
Here is what needs work:
1.) when sub menu is clicked, looking for new page to keep the selected sub menu open (i will highlight the selected sub menu button for further clarification on navigation)
Please see code here:
http://jsbin.com/ePawaju/1/edit
or here:
http://www.ceramictilepro.com/_6testingonly.php#
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Do I need to put this script in the head section? Where is the best place?
<div class="left">
<nav class="vmenu">
<ul class="vnavmenu">
<li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a>
</li>
</ul>
<ul class="Top1 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a>
</li>
</ul>
<ul class="vnavmenu">
<li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a>
</li>
</ul>
<ul class="Top2 navBarTextSize">
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a>
</li>
<li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a>
</li>
</ul>
</nav>
JQuery is new to me, any help would greatly be appreciated :)
var submenu;
$('.vnavmenu li').click(function () {
var elems = $('.vmenu ul:not(.vnavmenu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');
$('.vmenu ul:not(.vnavmenu)').slideUp(100, function () {
if (elems == 1) {
if (!visible) $refClass.slideDown('fast');
}
elems--;
});
if (visible) $('#breadcrumbs-pc').animate({
'margin-top': '0rem'
}, 100);
else $('#breadcrumbs-pc').animate({
'margin-top': '5rem'
}, 100);
});
JavaScript:
<script type="text/javascript">
$(function() {
var url = window.location;
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
</script>
CSS:
.active{
color: #fff;
background-color: #080808;
}
HTML:
<ul class="nav navbar-nav">
<li class="dropdown">
<i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
</li>
<li>
<?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
</li>
</ul>
</li>
</ul>
I prefer to keep code as short and plain as possible, and avoid using any external files (jquery included).
So here is what I've ended up with for myself after researching several topics - using plain Javascript and CSS, no need for jquery.
Put javascript code right after the menu finishes (after closing ul, div, whatever) - code from a snippet should be between <script>Copy code here</script>
That would allow for a script to execute right after menu will be loaded.
If you want to call it as a function on page load, then link will change only after all elements (including images) are loaded – place this code in a function, call it on page load, the code itself put before the closing tag like so:
<script>
function highlightCurrentURL() {
var a = document.getElementById("navig").getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
if (a[i].href.split("#")[0] == document.location.href.split("#")[0]) {
a[i].className = "current";
}
}
}
//
window.onload = function() {
highlightCurrentURL();
}
</script>
// restrict search to a parent with specific ID (main), rather than search in the whole document
var a = document.getElementById("navig").getElementsByTagName("a");
console.log("Current URL: ", document.location.href.split("#")[0]);
console.log("Links found in HTML: ");
for (var i = 0; i < a.length; i++) {
// for debugging you can check all found URLs in console (accessible in development mode) and delete next line after debugging
console.log(a[i].href);
// strip off any local (withing page) anchors (symbol "#" and what follows after)
if (a[i].href.split("#")[0] == document.location.href.split("#")[0]) {
// add a class to the matched link (<a>), define it in CSS
a[i].className = "current";
}
}
nav#navig a.current {
color: red;
}
<nav id="navig">
<ul>
<li>url1 name</li>
<li>url2 name</li>
<li>url3 name</li>
<li>Test link matching current URL</li>
</ul>
</nav>
You can Implement this in various ways usinh PHP or Jquery. Here is how I have implemented it in my Projects.
<?php
//set a default value when the page is not an active page
$dashboard_active=$profile_active=$home_active='inactive_page';
//get the Name of the current page;
//in simple php set the NAME of the php file similar to the link variable
//example set page name as home if you are going to print the variable $home/$home_active
$page = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
//OR
//in Laravel
$page=Route::currentRouteName();
//OR
//send page value from the controller
${$page."_active"} = 'active_page';
//the above method will change the value of the current active page variable
?>
In html print the php data
<ul class="nav navbar-nav ">
<li ><span class=" <?php echo $dashboard_active ?> "> Dashboard</span></li>
<li ><span class=" <?php echo $profile_active ?>"> Profile</span></li>
<li ><span class=" <?php echo $home_active ?>">Home</span></li>
</ul>
YOu can also do this with Jquery
<script>
//with jquery
$(function(){
//works when your href is an absolute href instead of relative href
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).children('span').addClass('active_page');
//to make the link only active
$(this).addClass('active_page');
//to make the list active
$(this).panrent('li').addClass('active_page');
}
});
});
</script>
IN the CSS you need to add this
<style>
.active_page:hover,.inactive_page:hover
{
background-color: rgb(218, 119, 5)!important;
color: white;
}
.active_page
{
background-color: green!important;
color: white!important;
}
.inactive_page
{
color:#fff;
}
</style>
Related
I am new to JS, HTML and CSS. I was trying to build a car dealership-like website to practice what I have learned so far and I have come to this one single problem. I made a div that would simulate a user dropdown when triggered using JS method. The method I used is when the user clicked the word car brands list it would show up the hidden div. But what happens is that without JS my dropdown design is all good, but then when JS is inserted into the equation it formats it like how it looks like without any CSS in it. Here is a picture for reference. First one is how it should be, the second one is how it looks with JS in it. Please pardon my bad usage of the tools in stack overflow. I am also new here.
var carListDropdown = document.getElementById("car-brand-dropdown")
carListDropdown.style.display = "none";
function carListDrop(){
if(carListDropdown.style.display === "none"){
carListDropdown.style.display = "block";
} else {
carListDropdown.style.display = "none";
}
}
#car-brand-dropdown {
background: black;
height: 350px;
width: 500px;
color: white;
display: flex;
justify-content: space-around;
margin-right: 90px;
position: absolute;
border-radius: 5px;
margin-top: 2px;
transform: translateX(700px);
z-index: 1;
}
<div class="car-brand-list" onclick="carListDrop()">Car Brands</div>
<div id="car-brand-dropdown">
<ul class="car-brand-list-one">
<li>Aston Martin</li>
<li>Audi</li>
<li>Bentley</li>
<li>BMW</li>
<li>Chevrolet</li>
<li>Dodge</li>
<li>Fiat</li>
<li>Ford</li>
</ul>
<ul class="car-brand-list-two">
<li>Honda</li>
<li>Jaguar</li>
<li>Jeep</li>
<li>KIA</li>
<li>Lamborghini</li>
<li>Land Rover</li>
<li>Lexus</li>
<li>Lotus</li>
</ul>
<ul class="car-brand-list-three">
<li>Mazda</li>
<li>Mercedes-Benz</li>
<li>Mini</li>
<li>Mitsubishi</li>
<li>Nissan</li>
<li>Porsche</li>
<li>Subaru</li>
<li>Toyota</li>
<li>Volkswagen</li>
</ul>
</div>
How it should look like
How it looks with JS inserted into the program
Edit this
var carListDropdown = document.getElementById("car-brand-dropdown")
carListDropdown.style.display = "none";
function carListDrop(){
if(carListDropdown.style.display === "none"){
carListDropdown.style.display = "flex";
} else {
carListDropdown.style.display = "none";
}
}
I removed your entire JS as it is not needed. We can do it directly with the onclick-trigger
I changed the ID of the element to a class for specificty weight reasons.
I added a class (.none) that contains display: none; to hide that element.
I changed the onclick-trigger to document.querySelector('.car-brand-dropdown').classList.toggle('none');
document.querySelector('.car-brand-dropdown') will select your list just like getElementById just the modern statement that can be used to select calsses, ID, tags...
classList.toggle('none) will remove the class .none if the elemnt has this class and add it, if the element does not have this class. So no need for if/else-statments.
.car-brand-dropdown {
background: black;
height: 350px;
width: 500px;
color: white;
display: flex;
justify-content: space-around;
margin-right: 90px;
position: absolute;
border-radius: 5px;
margin-top: 2px;
transform: translateX(700px);
z-index: 1;
}
.none {
display: none;
}
<div class="car-brand-list" onclick="document.querySelector('.car-brand-dropdown').classList.toggle('none');">Car Brands</div>
<div class="car-brand-dropdown none">
<ul class="car-brand-list-one">
<li>Aston Martin</li>
<li>Audi</li>
<li>Bentley</li>
<li>BMW</li>
<li>Chevrolet</li>
<li>Dodge</li>
<li>Fiat</li>
<li>Ford</li>
</ul>
<ul class="car-brand-list-two">
<li>Honda</li>
<li>Jaguar</li>
<li>Jeep</li>
<li>KIA</li>
<li>Lamborghini</li>
<li>Land Rover</li>
<li>Lexus</li>
<li>Lotus</li>
</ul>
<ul class="car-brand-list-three">
<li>Mazda</li>
<li>Mercedes-Benz</li>
<li>Mini</li>
<li>Mitsubishi</li>
<li>Nissan</li>
<li>Porsche</li>
<li>Subaru</li>
<li>Toyota</li>
<li>Volkswagen</li>
</ul>
</div>
The "default" value for a Flex container uses column for direction whereas for your layout you really want to use row. The individual ul elements within the parent container can be left as block level items and the parent will have the flex properties assigned to it. With Javascript you can easily toggle the appearance of an item using classList.toggle ~ which saves using inline node.style.display=... type syntax as you can define the look far easier with CSS.
Rather than adding inline event handlers it is generally considered better practise to use an external event listener -done using addEventListener. This makes for cleaner HTML markup and when the event handlers are stored in an external file it means they can be referenced in other pages by including that script.
/* two utility functions to shorten querySelector calls */
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
/* find the HTML elements of interest */
const oDiv=q('.car-brand-list');
const oSel=q('#car-brand-dropdown');
/*
add an event handler that toggles the class of the `select` type div,
modifies the class of the clicked text and resets the dataset attribute
that displays the hyperlink text when clicked.
*/
oDiv.addEventListener('click',function(e){
oSel.classList.toggle('flex');
this.classList.toggle('active');
oDiv.dataset.brand='';
});
/*
assign a click handler to each hyperlink - the functionaliyt of the
hyperlinks is unclear but here it is used to display the brand selected.
*/
qa('ul[class^="car-brand"] > li > a').forEach( a=>a.addEventListener('click',function(e){
e.preventDefault();
oDiv.dataset.brand=this.textContent
}));
*{font-family:monospace;}
a{
color:white!important;
text-decoration:none;
}
.car-brand-list{
font-size:1.5rem;
padding:0.25rem;
cursor:pointer;
font-weight:bold;
width:100px;
}
.car-brand-list.active{
background:black;
color:white;
border-radius:0.25rem;
}
.car-brand-list:after{
content:" - "attr(data-brand);
color:gray;
}
[data-brand='']:after{
content:'';
}
#car-brand-dropdown {
background: black;
max-height:350px;
color: white;
display:none;
border-radius:1rem;
transition:ease-in-out all 250ms;
z-index: 1;
}
.car-brand-list,
#car-brand-dropdown{width:500px;}
.flex{
display:flex!important;
justify-content:space-around;
flex-direction:row;
flex-wrap:nowrap;
margin:0.25rem auto;
}
ul{
flex:1;
margin:1rem;
padding:1rem;
list-style:none;
}
ul li{
padding:0.1rem;
font-size:90%;
}
<div class='car-brand-list' data-brand>Car Brands</div>
<div id='car-brand-dropdown'>
<ul class='car-brand-list-one'>
<li><a href='#'>Aston Martin</a></li>
<li><a href='#'>Audi</a></li>
<li><a href='#'>Bentley</a></li>
<li><a href='#'>BMW</a></li>
<li><a href='#'>Chevrolet</a></li>
<li><a href='#'>Dodge</a></li>
<li><a href='#'>Fiat</a></li>
<li><a href='#'>Ford</a></li>
</ul>
<ul class='car-brand-list-two'>
<li><a href='#'>Honda</a></li>
<li><a href='#'>Jaguar</a></li>
<li><a href='#'>Jeep</a></li>
<li><a href='#'>KIA</a></li>
<li><a href='#'>Lamborghini</a></li>
<li><a href='#'>Land Rover</a></li>
<li><a href='#'>Lexus</a></li>
<li><a href='#'>Lotus</a></li>
</ul>
<ul class='car-brand-list-three'>
<li><a href='#'>Mazda</a></li>
<li><a href='#'>Mercedes-Benz</a></li>
<li><a href='#'>Mini</a></li>
<li><a href='#'>Mitsubishi</a></li>
<li><a href='#'>Nissan</a></li>
<li><a href='#'>Porsche</a></li>
<li><a href='#'>Subaru</a></li>
<li><a href='#'>Toyota</a></li>
<li><a href='#'>Volkswagen</a></li>
</ul>
</div>
you'd better use addEventListener, but not html onclick attr.
JS:
document.querySelector('.car-brand-list').addEventListener('click',function(){
carListDrop();
})
I am trying to create an extra navigation tab using JavaScript. It kinda works but not the way I want it. So the idea is to add an extra navigation tab with the link leading to another page. However, when I create the tab 1) it comes without the a:hover properties (all other tabs have it) and 2) I don't know how to assign a value to it (link to another webpage). Here is my code:
HTML5
<nav>
<ul id="topnav">
<li>Home</li>
<li>About Us</li>
<li>Order</li>
<!-- Location.html --> <!-- Load dynamically -->
</ul>
</nav>
JavaScript:
var list = document.getElementById("topnav");
var contact = document.createElement("li");
list.appendChild(contact);
contact.innerHTML = "Location";
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
a {
color: black;
text-decoration: none;
}
a:hover {
background-color: #798585;
text-decoration: none;
}
create an element a and then append it to the list
var list = document.getElementById("topnav");
var contact = document.createElement("li");
var a = document.createElement("a");
a.setAttribute("href","somelink.html")
a.textContent="Location"
contact.append(a)
list.append(contact)
Try putting the anchor in the innerHTML of the li element you created:
contact.innerHTML = "Location";
Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.
you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/
You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}
Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.
I'm new to scripting.
Can someone help me to swap li's in ul
work Scenarios are :
1. when user click on anchor tag it should come middle means active position(Active item should always in center position).
2. list may not be in order it can be in any order.
var swapElements = function(siblings, subjectIndex, objectIndex) {
// Get subject jQuery
var subject = $(siblings.get(subjectIndex));
// Get object element
var object = siblings.get(objectIndex);
// Insert subject after object
subject.insertAfter(object);
}
$(function() {
swapElements($('li'), 0, 1);
});
ul li {
float: left;
display: inline-block;
list-style: none;
}
ul li a {
color: #000;
text-decoration: none;
padding: 15px;
display: block;
}
ul li.active a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="nav-item" href="#"><span>Quality</span></a></li>
<li><a class="nav-item" href="#"><span>Safety</span></a></li>
<li class="active"><a class="nav-item" href="#"><span>People</span></a></li>
<li><a class="nav-item" href="#"><span>Cost</span></a></li>
<li><a class="nav-item" href="#"><span>Delivery</span></a></li>
</ul>
I have tried to change the code but no luck.. Can anyone help me to solve my problem.
Thanks in advance..
Kindly consider the following code, with comments given for explanation. Please comment if there is something you do not understand.
$(document).ready(function() {
function change() {
// 1. remove active class from currently active component
$('.active').removeClass('active');
// 2. get html inside of the list element
var htm = $(this).html();
// 3. remove the list element
$(this).remove();
// 4. add a new list element after the 2nd child or (n /2)th child
$('li:nth-child(2)').after('<li class="active">' + htm + '</li>');
// 5. bind the change method to clicking of this new element
$('li:nth-child(3)').click(change);
}
// when a list element is clicked, call the change function
$('li').click(change);
});
ul li {
float: left;
display: inline-block;
list-style: none;
}
ul li a {
color: #000;
text-decoration: none;
padding: 15px;
display: block;
}
ul li.active a {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="nav-item" href="#"><span>Quality</span></a></li>
<li><a class="nav-item" href="#"><span>Safety</span></a></li>
<li class="active"><a class="nav-item" href="#"><span>People</span></a></li>
<li><a class="nav-item" href="#"><span>Cost</span></a></li>
<li><a class="nav-item" href="#"><span>Delivery</span></a></li>
</ul>
This question already has an answer here:
How to highlight active tab on the website menu?
(1 answer)
Closed 9 years ago.
My question is :
I have a menu items, and I want to highlight the active tab that users switch to that points to another page for sure .
stackover flow use :
.nav {
float: left;
font-size: 125%;
}
.nav ul {
margin: 0;
}
.nav li {
background: none repeat scroll 0 0 #777777;
display: block;
float: left;
margin-right: 7px;
}
**.nav .youarehere {
background: none repeat scroll 0 0 #FF9900;
}**
.youarehere a {
color: #FFFFFF;
}
.nav li:hover {
background-color: #FF9900;
}
.nav a {
color: #FFFFFF;
display: block;
padding: 6px 12px;
text-decoration: none;
}
Can anybody tell me what else they use to make this work ?
menu :
<ul class="nav">
<li> <a href="{$smarty.const._URL}/index.{$smarty.const._FEXT}" class="wide-nav-link menu_link" >{$lang.homepage}</a></li>
<li class="dropdown">
{$lang.category} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_video_categories}
</ul>
</li>
{if $smarty.const._MOD_ARTICLE == 1}
<li class="dropdown">
{$lang.articles} <b class="caret"></b>
<ul class="dropdown-menu menu_link">
{dropdown_menu_article_categories}
</ul>
</li>
{/if}
<li> {$lang.top_videos}</li>
<li>{$lang.new_videos}</li>
<li>{$lang.random_video}</li>
{if isset($mm_menu_always_inject1)}{$mm_menu_always_inject1}{/if}
<li>{$lang.contact_us}</li>
{if isset($mm_menu_always_inject2)}{$mm_menu_always_inject2}{/if}
{if $logged_in != 1 && isset($mm_menu_notlogged_inject)}{$mm_menu_notlogged_inject}{/if}
</ul>
Or you can add programmatically class="active" (or selected) to the current selected menu and do this:
.nav li a.active {
color: #FFFFFF;
}
#ChrisHerbert your solution will not work... you will change all the li of the menu... because the class is in your body tag. (EDIT: the solution was changed, see comments)
With #ChrisHerbert answer, you can do it in two ways:
1) with Javascript, take the class in the body tag then select the one with the associate index (:eq() in jQuery). (you can find a way without javascript for non-javascript user)
OR
2) you can do: .home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {}, etc. if you know the index of each page in your menu! Or other child selector but, old versions of IE don't like it!
I think you should do it with my solution rather then the body tag. Still, it is really useful to have that class in the body for page specific thingy to add.
Add a unique class to the <body> tag of each page. For example, on the home page:
<body class="home">
On the contact page: <body class="contact">
On the blog page: <body class="blog">
..and so on.
Then, in your CSS, do something like this:
.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
// styling to indicate active state
}
I think the question is, are you looking to have this done dynamically? Or are you coding each page? The other two solutions are great, but a bit overkill if actually you're accessing each page individually. You could just add a class to the selected nav element depending on the page. This is probably the easiest to get your head around if you've not done it before, but #ChrisHerbert's solution is the nicest way of doing it dynamically just using CSS (no PHP ifs etc).
HTML
<div class="nav">
Home
About us
Portfolio
</div>
CSS
.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}
EDIT: Just realised that #AnnieCaron's answer is the same as mine.