aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Changing the Color of Selected item in menu using javascript

Apr 8, 2010
In header Section you should write the this script function

<script language="javascript">
var selectEl = null; // keep track of currently selected
function mo(el) {
    if (selectEl) { // unselect selected = 'gray'; = '0px inset black';
    selectEl = el; // new selected = 'navy';

After Completion of writing the script function design the table or div with your elements
after that give call the JavaScript function for whatever the elements you need to select

On each link write this function like this 

<a href="index.html"onclick="mo(this)">Products</a>

I hope it helps you happy coding

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Shameer said...

I hope this will me. i will check it tomorrow . Thank u

Anonymous said...

how to menu bar use.. Eg(File-->open click means open some file) how to use this in use coding and design..after how to write coding in radio button and dropdownlist..

kumar said...

Dear frnd this code will not work
as on click it will navigate you on next page
. on navigation it will refreshs the whole page

Unknown said...

hi bro . it's really helping but i also want to change the text color with background color after selection the tab..

PRAKASH said...

Hello sir

I am using a master page containing the following menu

< div class="clear hideSkiplink">
< asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">

< Items>
< asp:MenuItem NavigateUrl="~/Index.aspx" Text="HOME" />
< asp:MenuItem NavigateUrl="~/Master.aspx" Text="MASTER" />
< asp:MenuItem NavigateUrl="~/About.aspx" Text="ABOUT" />

< /asp:Menu>
< /div>

with the following css

clear: both;

border-bottom:2px solid #e6e6e6;
font-size: 17px;
} ul
list-style-type: none;
height: auto;
margin: 0px;
} ul li
display: inline;
margin:0px 8px 0px 8px;
} ul li a
text-decoration: none;
color: #222222;
line-height: 1.35em;
padding: 4px 24px;
} ul li a:hover
color: #d30545;
line-height: 1.35em;
border-left:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
border-top:1px solid #e6e6e6;
box-shadow:0px -1px 3px #777777;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;

I want to make my active menu lie the following

NANDHU said...

hi... i need the menu like this page.... i want the solution for this.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.