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!
LVL 8
arcrossAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

G0ggyCommented:
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;
}
0
arcrossAuthor 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.
0
G0ggyCommented:
Something in your code then, the link should stay active until you navigate away.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

biXenCommented:
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 :)
0
biXenCommented:
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.
0
G0ggyCommented:
I reiterate the menu control, this is what it is designed for, why re-invent the wheel?
0
G0ggyCommented:
Bixen you're talking pap.
0
biXenCommented:
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.
0
arcrossAuthor 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.
0
arcrossAuthor 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!
0
biXenCommented:
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

0
arcrossAuthor 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

0
arcrossAuthor 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 :)
0
biXenCommented:
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

0
arcrossAuthor 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.
0
biXenCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
biXenCommented:
Eh, don't swap. Add it I meant :)
0
arcrossAuthor Commented:
yeeees! got it working biXen !!!!

Thanks so much for your patience and help !!
You really deserver these points!
0
biXenCommented:
No problem, glad to help :)
0
Mayank_AgarwalCommented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.