Setting a <li> to id="current" (<li id="current"&gt

[Stepyogameup]

I have a masterpage and in a master page I have a menu.

I want when a user clicks on a menu to set id="current" on li html attribute.

I not sending the user to another page because the menu is in the MasterPage.

How can I solve this problem using c# code?

Menu

<!-- header menu-->
<div id="header">
    <span id="slogan"><asp:Label runat="server" ID="lblSlogan" Text="DevWebshop" /></span>
    <!-- tabs -->
    <ul>
        <li [COLOR=red]id="current"[/color]><a href="CustomerInformation.aspx"><span>Home</span></a></li>
        <li><a href="Default.aspx?IsPage=Administration"><span>Show shopping cart</span></a></li>
        <li><a href="Sales.aspx?IsPage=Sales"><span>Customer account</span></a></li>
        <li><a href="#"><span>Contact us</span></a></li>
    </ul>
</div>

CSS

/* header */
#header {
	position: relative;
	margin: 0; padding: 0;
	height: 60px;
}
#header span#slogan {
	z-index: 3;
	position: absolute;
	left: 3px; bottom: 7px;
	font: bold 1.2em Verdana, Arial, Tahoma,  Sans-serif;	
	color: #FFF;	
}

#header-logo {
	position: relative;
	clear: both;
	height: 50px; 
	margin: 0; padding: 0;	
}
#header-logo #logo {
	position: absolute;
	top: 3px; left: 5px;
	font: bold 30px "trebuchet MS", Arial, Tahoma, Sans-Serif;
	margin: 0; padding: 0;
	letter-spacing: -1px;
	color: #000;
}

/* navigation tabs */
#header ul {
	position: absolute;
	margin:0;
	list-style:none;
	right:-18px ; bottom: 3px;
	font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
}
#header li {
	display:inline;
	margin:0; padding:0;
}
#header a {
	float:left;
	background: url(../Images/tableft.gif) no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}
#header a span {
	float:left;
	display:block;
	background: url(../Images/tabright.gif) no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
	color:#FFF;
}
#header a:hover {
	background-position:0% -42px;
}
#header a:hover span {
	background-position:100% -42px;
}
#header #current a {
	background-position:0% -42px;
}

#header #current a span {
	background-position:100% -42px;
}

 

[jbenson001]

If you want to use C# code then you will have to make the list item a server object by setting runat="server" then you can accesse it. Otherwise you will have to do something clientside with javascript.

 

[jmeckley]

I want when a user clicks on a menu to set id="current" on li html attribute.

client side = js
server side = .net
take your pick

I not sending the user to another page because the menu is in the MasterPage.

according to the markup you provided you are. it's a link, if the user clicks the link they are directed to that page. at this point it doesn't matter how the link was rendered, (master, page, webusercontrol) it's all the same.

MasterPage is just a template. They are actually very similar to how webusercontrols. by clicking on the link they will be redirected to that page.

How can I solve this problem using c# code?

as it stands now, you can't. the mark up is simple html. not a webcontrol or htmlcontrol. the code behind has not idea the list exists (nor should it. it's template code. the code behind should only get data from a service and bind.)

to solve this your best option is to use some jquery magic and set a css class on the selected item once the page is ready. jquery can append the class and then css takes over.

you'll need to do some comparisons you will need
1. a list of items from the list.
2. the current url

then iterate over the collection of items and compare the link hrefs to the window.location. check out jquery's site. for more help jquery has a google group. you can also use forum216.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[Stepyogameup]

Ok, I understand it a little better now.

<!-- header menu-->
<div id="header">
    <span id="slogan"><asp:Label runat="server" ID="lblSlogan" Text="DevWebshop" /></span>
    <!-- tabs -->
    <ul>
        <li id="Home" runat="server"><a href="Default.aspx"><span>Home</span></a></li>
        <li id="Trolley" runat="server"><a href="Trolley.aspx"><span>Show shopping cart</span></a></li>
        <li id="CustomerAccount" runat="server"><a href="CustomerAccount.aspx"><span>Customer account</span></a></li>
        <li id="ContactUs" runat="server"><a href="ContactUs.aspx"><span>Contact us</span></a></li>
    </ul>
</div>

void Page_PreInit(object sender, EventArgs e)
{
    Home.SkinID = "current";
}

How can I change the SkindId for example Home <li> at Page_PreInit but it does not execute at a MasterPage but it does gets hit at a regular aspx