asked on

Change style of the selected menu item

how can i change the style of the current menu item depending of the page??
i would like not to use javascript??

<ul id="navlist">
<li ><a href="link1.aspx">LINK1</a></li>
<li><a href="link2.aspx">LINK2</a></li>
<li><a href="link3aspx">LINK3</a></li>

</ul>

can i use request.rawURl to identify the current page and alter the menu item style???
Thanks!

G0ggy

As this is in .NET, why not use the menu control? Then you can access the many properties of that control.

Of give it a CSS style:

a:active
{
color:#ff0000;
}

arcross

ASKER

hey thanks..
giving the active property wont work. That only will work when the mouse button is pressed. as soon you release it, it will come back to norma.

G0ggy

Something in your code then, the link should stay active until you navigate away.

biXen

As far as I can read on a quick google request.rawURl takes last part the URL so it could work. When you click on each of your pages, do they have a different filename in the url? Like first page is index.asp , second is aboutus.asp , or is it all index.asp and then an id or something like that to identify each page?

I think you should have posted a question in the ASP.net forum on how to output an identifier for the current page into the HTML code. Like aboutus gets id 2, contact us gets id 3 etc. Something like that.

If you can get that, I can help you with the rest easily :)

biXen

G0ggy: the active bit doesn't even work in many IE browsers, have to be fixed with javascript in that case, and he didn't want any javascript.

G0ggy

I reiterate the menu control, this is what it is designed for, why re-invent the wheel?

G0ggy

Bixen you're talking pap.

biXen

IE have implemented it slightly wrong, that's what I mean by not working. Also active is for showing what's being clicked on, it's the next step from hover, like the guy starting the question already said. It's not made for showing what's selected.

arcross

ASKER

yes biXen, my pages have different names. Ill have a look at what you suggest.

G0ggy, i know about the menu control. but that is not what im using.

arcross

ASKER

biXen you still there? i found out how to get the current page now i wonder if you could give a hand in the CSS area.

thanks!

biXen

Hey, I'm here. Check out the following code, first the CSS to put in the <head> area. If the current page has id of 100 the style will be called selected100. If the current page has id of 101 it will be selected101. Replace [[CURRENTPAGEID]]with your own way of outputting the id/name of the current page.

Now in the code that has the menu, set the class to be selected[[LINKPAGEID]] . By that I mean output the id of the page the menu item links to. For instance 105. Do that for each item. If you make the menu dynamically it's easier, so it would be like the last part of the code. If you do that dynamically you'd just have one line for the li in a loop, and output the page id in the loop.

Hope you understand, if not just ask. There are obviously other methods too, but I think this is simple.

The CSS
 
<style>
.selected[[CURRENTPAGEID]]{
background-color: #FF0000;
}
</style>
 
The HTML
 
<ul>
<li class="selected100">Home</li>
<li class="selected101">About Us</li>
<li class="selected102">Contact Us</li>
<li class="selected103">Disclaimer</li>
</ul>

Open in new window

arcross

ASKER

glad you are here!

Ive got this code in the master page. now i know in which page i am all the time.

 Dim PageName As String = (Path.GetFileName(Request.RawUrl.ToString))
 
        Select Case PageName
            Case "Default2.aspx"
                Me.a_home.Attributes("class") = "orange"
            Case "default.3.aspx"
                Me.a_about.Attributes("class") = "blue"
            Case "default4.aspx"
                Me.a_contact.Attributes("class") = "green"
        End Select

Open in new window

arcross

ASKER

ooops sorry i pressed the button ...

<div id="navcontainer">
<ul id="navlist">
<li><a href ="Default2.aspx" class="orange" id="a_home" runat ="server">Default 2</a></li>
<li><a href ="default.3.aspx" class="blue" id="a_about" runat="server">Default 3</a></li>
<li><a href ="default4.aspx" class="green" id="a_contact" runat ="server" >Default4</a></li>
</ul>
</div>

and this is what ive got in the CSS

#navcontainer
{
      font-family: Arial,Sans-Serif;
      margin: 0 auto;
      width: 100%;
      border-bottom: 1px solid #ddd;
}
#navlist
{
      width: 60%;
      text-align: center;
      margin: 0 auto;
      padding: 0;
      text-indent: 0;
      list-style-type: none;
}
#navlist li
{
      padding: 0;
      margin: 0;
      text-indent: 0;
      display: inline;
      letter-spacing: -1px;
      text-decoration: none;
      color: #ccc;
      font-size: 1em;
      padding: 0 2px;
      border-top: .5em solid #eee;
}

#navlist a.blue:hover {color:blue;}
#navlist a.green:hover {color:green;}
#navlist a.orange:hover {color:orange;}

#navlist a:hover {border-top: none;font-size: 1.5em;}
a.orange {color: orange;}
a.blue{color:Blue;}
a.green {color:green;}
a:link,a:visited
{
      color: gray;
      font-size: 10px;
      text-decoration: none
}

what i was trying to do is to leave the selected option in its color. Sorry i cant explain it better but ive got a job to explain myself in english :)

biXen

I think I need to know if the first code works like I think first. If you put the code under here in, does one of the three links in the menu get the class selected according to the page you are on?

(I assume you use the web developer addon for firefox or something to check? very useful)

 Dim PageName As String = (Path.GetFileName(Request.RawUrl.ToString))
 
        Select Case PageName
            Case "Default2.aspx"
                Me.a_home.Attributes("class") = "selected"
            Case "default.3.aspx"
                Me.a_about.Attributes("class") = "selected"
            Case "default4.aspx"
                Me.a_contact.Attributes("class") = "selected"
        End Select

Open in new window

arcross

ASKER

that works biXen. This works too...

CSS
----

#navcontainer
{
      font-family: Arial,Sans-Serif;
      margin: 0 auto;
      width: 100%;
      border-bottom: 1px solid #ddd;
}

#navlist
{
      width: 60%;
      text-align: center;
      margin: 0 auto;
      padding: 0;
      text-indent: 0;
      list-style-type: none;
}

#navlist li
{
      padding: 0;
      margin: 0;
      text-indent: 0;
      display: inline;
      letter-spacing: -1px;
      text-decoration: none;
      color: #ccc;
      font-size: 10px;
      padding: 0 2px;
      border-top: .5em solid #eee;
}

#navlist li a:hover {border-top: none;font-size: 1.5em;}

a.blue{color:Blue;font-size:14pt;}
a.red{color:Red;font-size:14pt;}
a.orange{color:Orange;font-size:14pt;}

vb.net
-------

Dim PageName As String = (Path.GetFileName(Request.RawUrl.ToString))

Select Case PageName
Case "Default2.aspx"
Me.a_home.Attributes("class") = "orange"
Case "default.3.aspx"
Me.a_about.Attributes("class") = "blue"
Case "default4.aspx"
Me.a_contact.Attributes("class") = "red"
End Select

HTML
-------

<div id="navcontainer">
<ul id="navlist">
<li><a href ="Default2.aspx" id="a_home" runat ="server">Default 2</a></li>
<li><a href ="default.3.aspx" id="a_about" runat="server">Default 3</a></li>
<li><a href ="default4.aspx" id="a_contact" runat ="server" >Default4</a></li>
</ul>
</div>

BUT i would need now is when i hover on the menu item, that item, shoud be the same color of the class.

ASKER CERTIFIED SOLUTION

biXen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

biXen

Eh, don't swap. Add it I meant :)

arcross

ASKER

yeeees! got it working biXen !!!!

Thanks so much for your patience and help !!
You really deserver these points!

biXen

No problem, glad to help :)

Mayank_Agarwal

Can you please help me with this issue...
It seems that we are on same line, but my menu is generated dynamically and i an using ASP.NEt Menu Control.

https://www.experts-exchange.com/questions/23140441/Styling-a-Menu.html