Make the active tab stand out in the navigation menu

Question

Make the active tab stand out in the navigation menu

Could you please advise on how to highlight the active tab in a menu when users switch to another page? This is my current code:

.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;
}

I would appreciate any suggestions on how to enhance this functionality.

The menu structure looks like this:

<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">
                        <a href="#" class="dropdown-toggle wide-nav-link menu_link " data-toggle="dropdown">{$lang.category} <b class="caret"></b></a>
                        <ul class="dropdown-menu menu_link">
                        {dropdown_menu_video_categories}
                        </ul>
                      </li>

                      {if $smarty.const._MOD_ARTICLE == 1}
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle wide-nav-link menu_link " data-toggle="dropdown">{$lang.articles} <b class="caret"></b></a>
                        <ul class="dropdown-menu menu_link">
                        {dropdown_menu_article_categories}
                        </ul>
                      </li>
                      {/if}
                      <li> <a href="{$smarty.const._URL}/topvideos.{$smarty.const._FEXT}" class="wide-nav-link menu_link ">{$lang.top_videos}</a></li>
                      <li><a href="{$smarty.const._URL}/newvideos.{$smarty.const._FEXT}" class="wide-nav-link menu_link">{$lang.new_videos}</a></li>
                      <li><a href="{$smarty.const._URL}/randomizer.php" rel="nofollow" class="wide-nav-link menu_link">{$lang.random_video}</a></li>
                      {if isset($mm_menu_always_inject1)}{$mm_menu_always_inject1}{/if}     
                      <li><a href="{$smarty.const._URL}/contact_us.{$smarty.const._FEXT}" class="wide-nav-link menu_link">{$lang.contact_us}</a></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>

javascript html css

Answer 1

Answer №1

One option is to dynamically add the "active" (or selected) class to the currently selected menu item and apply the following style:


.nav li a.active {
    color: #FFFFFF;
}

@ChrisHerbert's solution may not be effective as it could change all menu items due to the class being applied to the body tag. (EDIT: Solution has been updated, refer to comments)

With @ChrisHerbert's answer, you have two options:
1) Use Javascript to target the specific menu item based on its index relative to the body tag. (Non-Javascript alternatives can be explored)
OR
2) Utilize CSS selectors like .home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {}, etc. if you are aware of each page's index in the menu. Be cautious with older versions of IE when using child selectors!

It is advisable to implement this solution without relying on the body tag. However, having the class on the body can still be beneficial for adding page-specific styles.

Answer 2

One option is to dynamically add the "active" (or selected) class to the currently selected menu item and apply the following style:


.nav li a.active {
    color: #FFFFFF;
}

@ChrisHerbert's solution may not be effective as it could change all menu items due to the class being applied to the body tag. (EDIT: Solution has been updated, refer to comments)

With @ChrisHerbert's answer, you have two options:
1) Use Javascript to target the specific menu item based on its index relative to the body tag. (Non-Javascript alternatives can be explored)
OR
2) Utilize CSS selectors like .home .nav li:nth-child(0) {}, .about-us .nav:nth-child(1) {}, etc. if you are aware of each page's index in the menu. Be cautious with older versions of IE when using child selectors!

It is advisable to implement this solution without relying on the body tag. However, having the class on the body can still be beneficial for adding page-specific styles.

Answer 3

Answer №2

Assign a distinct class to the <body> tag for each individual page. For instance, on the homepage:

<body class="home">

For the contact page: <body class="contact">

As for the blog page: <body class="blog">

...and so forth.

Subsequently, in your CSS, implement something along these lines:

.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
  // apply styles to show active state
}

Answer 4

Assign a distinct class to the <body> tag for each individual page. For instance, on the homepage:

<body class="home">

For the contact page: <body class="contact">

As for the blog page: <body class="blog">

...and so forth.

Subsequently, in your CSS, implement something along these lines:

.home .nav li.home, .contact .nav li.contact, .blog .nav li.blog {
  // apply styles to show active state
}

Answer 5

Answer №3

When considering how to approach this task, the key question is whether you want the functionality to be dynamic or if you are manually coding each page. While the existing solutions are effective, they may be excessive if you are only dealing with individual pages. One simple solution would be to apply a class to the relevant navigation element based on the current page. This method is straightforward for beginners but @ChrisHerbert's approach offers a more elegant way to achieve dynamic styling using just CSS without the need for PHP conditionals.

HTML

<div class="nav">
<a href="home">Home</a>
<a href="about-us">About us</a>
<a href="portfolio" class="selected">Portfolio</a>
</div>

CSS

.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}

UPDATE: On further review, I see that @AnnieCaron's response aligns closely with my own viewpoint.

Answer 6

When considering how to approach this task, the key question is whether you want the functionality to be dynamic or if you are manually coding each page. While the existing solutions are effective, they may be excessive if you are only dealing with individual pages. One simple solution would be to apply a class to the relevant navigation element based on the current page. This method is straightforward for beginners but @ChrisHerbert's approach offers a more elegant way to achieve dynamic styling using just CSS without the need for PHP conditionals.

HTML

<div class="nav">
<a href="home">Home</a>
<a href="about-us">About us</a>
<a href="portfolio" class="selected">Portfolio</a>
</div>

CSS

.nav a {
color:#ff4444;
}
.nav a.selected {
color:#ff44ff;
}

UPDATE: On further review, I see that @AnnieCaron's response aligns closely with my own viewpoint.

Make the active tab stand out in the navigation menu

Answer №1

Answer №2

Answer №3

Similar questions

Issue arises when CSS selectors do not function properly with absolutely positioned divs

How to inject a variable into an AngularJS service that utilizes both $http and $interval functions?

unable to retrieve element values using class names

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

Discovering repeated arrays within an array

JavaScript - Swapping out element in object array

Converting Base64 data from a canvas to a blob and then processing it in PHP

Maintaining form data while dynamically including more instances of a <div> element to the form

Is there a way to search for a sequence of bytes within a file and then substitute them with a different buffer of data?

Run JavaScript Function from Within

Shifting and implementing various styles across numerous elements at the same time

CSS Flexibility in Action

What is the most efficient way to switch between different views in AngularJS while preserving the data in the views'

Centering Tabs in React-Bootstrap

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

Localized Error: The property 'clientWidth' cannot be retrieved as the object is null or undefined

Retrieve the element that was clicked during the show.bs.collapse event in Bootstrap 4's Collapse feature

Troubleshooting AJAX Problems in ASP.NET and C#

Issues with voice state updates in JavaScript

Performance rating - Displaying the overall rating