We help IT Professionals succeed at work.

Change style of the selected menu item

arcross
arcross asked
on
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!
Comment
Watch Question

CERTIFIED EXPERT

Commented:
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;
}

Author

Commented:
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.
CERTIFIED EXPERT

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

Commented:
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 :)

Commented:
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.
CERTIFIED EXPERT

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

Commented:
Bixen you're talking pap.

Commented:
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.

Author

Commented:
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.

Author

Commented:
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!

Commented:
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

Author

Commented:
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

Author

Commented:
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 :)

Commented:
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

Author

Commented:
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.
Commented:
This should do the trick, swap with your current one.

You could of course do this on the li too, as a background color.
a#a_home:hover{color:Blue;font-size:14pt;}
a#a_about:hover{color:Red;font-size:14pt;}
a#a_contact:hover{color:Orange;font-size:14pt;}

Open in new window

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

Author

Commented:
yeeees! got it working biXen !!!!

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

Commented:
No problem, glad to help :)
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.

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_23140441.html

Explore More ContentExplore courses, solutions, and other research materials related to this topic.