Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 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
        selectEl.style.backgroundColor = 'gray';
        selectEl.style.border = '0px inset black';
    }
    selectEl = el; // new selected
    el.style.backgroundColor = 'navy';
}
</script>

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 


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

I hope it helps you happy coding

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

Get the latest Asp.net, C#.net, 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

6 comments :

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
{
clear: both;
}

div.hideSkiplink
{
border-bottom:2px solid #e6e6e6;
width:100%;
}
div.menu
{
font-size: 17px;
height:35px;
padding-left:10px;
}
div.menu ul
{
list-style-type: none;
height: auto;
padding:0px;
margin: 0px;
}
div.menu ul li
{
display: inline;
margin:0px 8px 0px 8px;
}
div.menu ul li a
{
text-decoration: none;
color: #222222;
line-height: 1.35em;
padding: 4px 24px;
display:block;
}
div.menu 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

http://img593.imageshack.us/img593/1476/woe3.jpg

NANDHU said...

hi... i need the menu like http://allage.in/ this page.... i want the solution for this.

Give your Valuable Comments

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

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