CODEWITHSUNDEEP
javascriptcss
user3003821
user3003821

Reputation:

Highlight active menu item on menu bar

I am using the below css for my menu items. I need to highlight the active page in the menu bar. Can anyone correct the css. Or can I achieve using javascript or some type script? 

#menu ul {
margin: 0;
padding: 7px 6px 0;
background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width 100%;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 16px;
color: #444444;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#menu a:hover {
background: #000;
color: #fff;
}
#menu .active a,
#menu li:hover > a {
background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px;
background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px;
color: #444;
border-top: solid 1px  #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu ul ul a:hover {
background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url('/Images/Overlay.png') repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#menu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

* html #menu ul { height: 1%; }

<div id="menu">
                <ul>
                    <li><a href="Update.aspx" title="Update"><span>Home</span></a></li>
                    <li><a href="Save.aspx" title="Save"><span>Save</span></a></li>
                    <li><a href="User.aspx" title="User"><span>User</span></a></li>
                </ul>
            </div>

Upvotes: 1

Views: 2421

Answers (3)

Alan Wells
Alan Wells

Reputation: 31320

Two basic things must happen:

  1. Function to be triggered.
  2. Then the function must somehow affect the styling.

There are probably many ways to do this. But what's the best way? Let's look at some various options

Function to be triggered

  • onclick manually embedded into each of the menu elements
  • Dynamically inject onclick event into each menu item when the document loads
  • Event listener for a certain type of element
  • Event listener for a class
  • Multiple event listeners for a specific id for each menu item

In any case, you either need an onclick event, or an event listener. The onclick is more direct.

<a onclick="myFunction()">Home</a>

This way, you look at the HTML, and you immediately know that an onclick event is tied to it. Whether the trigger for the function is embedded in the HTML element, or and event listener in a <script> tag, either way, there must be a way to identify the element in order to change the style. So, the element needs an id.

<a id="menuHome" onclick="myFunction()">Home</a>

Even if you use the this key word, you still need an id. this.id

<body>
 <a id="myId" onclick="runIt(this.id)">Home</a>
</body> 

<script type="text/javascript">
    function runIt(argInput) {
        alert("This is what was passed in: " + argInput);
    };
</script>

If you use the this keyword alone, in the tag, it returns nothing.

<a id="myId" onclick="runIt(this)">Home</a>

The above line of code won't give you anything for a reference to what element was clicked.

So, again, even if the this keyword is used, there needs to be a way to identify what element was clicked.

Change the Styling

To change the style of a menu item, this code can be used:

<body>
 <a id="myId" onclick="runIt(this.id)">Home</a>
</body> 

<script type="text/javascript">     
    function runIt(argInput) {
        //alert("This is what was passed in: " + argInput);
        var whatMenuItem = argInput;
        var objectElement = document.getElementById(whatMenuItem);
        objectElement.style.color = "green";        
    };
</script>

The above code changes the color of the menu item to green.

Or maybe you want to dynamically inject onclick events into every menu item when the document loads. This jsFiddle shows how to do that.

jsFiddle Inject onclick events into menu anchor tags

In the jsFiddle example, not only an id is used, but also a class. Why? In order to loop through every <a> tag in the menu, that information needs to somehow be retrieved. It is retrieved by:

document.getElementsByClassName("className")

Now you have yet one more thing added to your HTML.

<div id="menu">
    <ul>
        <li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a></li>
        <li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a></li>
        <li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a></li>
    </ul>
</div>

This jsFiddle shows changing the menu style with an event listener:

jsFiddle Event Listener - Change Style

Determining what menu element was clicked and changing the style of that menu element is only part of what is needed. There needs to be a way to put the menu item back to its original style if the user navigates to another menu.

This jsFiddle shows a complete working example of highlighting the current menu item, recording which menu item is current, setting the old menu item back to it's default, and checking if the user clicked the active menu item twice.

jsFiddle Highlight Active Menu Item on Menu Bar

Upvotes: 0

Ryman Holmes
Ryman Holmes

Reputation: 756

Why all the tricky JavaScript or jQuery? This can be done so easily with some simple CSS and HTML.

Create a CSS class for the active page, for example:

.active{
background-color:white;
color:red;

}

Then on each of your pages, add the class .active in your navbar to whichever menu item is the current page, for example:

** On the Update page:**

<div id="menu">
                <ul>
                    <li><a href="Update.aspx" class="active" title="Update"><span>Home</span></a></li>
                    <li><a href="Save.aspx" title="Save"><span>Save</span></a></li>
                    <li><a href="User.aspx" title="User"><span>User</span></a></li>
                </ul>
            </div>

So on each page whichever <li> in your navbar is the current page just simply add class="active" as shown above.

Upvotes: 1

Nishant
Nishant

Reputation: 916

This can't be done only via css you need to use some jQuery or PHP to add an active class to the current page link and then style it via css

Check these

Stackoveflow question with same problem

Solution from css tricks

Upvotes: 2

Related Questions