Change HTML/CSS from ASP(C# or VB) code

Question

In my case, I have an HTML/CSS Menu in the site master.

enter image description here

So, when you hover your mouse over "Graphics", it highlights it (using CSS onHover).

Now what I need to do is that when you actually click on "Graphics" (and it takes you to the graphics page), it remains highlighted, if possible in a different colour.

I'm thinking of modifying the Site.Master style from C# or VB code.

Any ideas? Thanks.

Does HTML/CSS Menu mean not a server side control?

Indi
– Indi

2012-03-20 18:09:11 +00:00
Commented Mar 20, 2012 at 18:09 — Indi
– Indi, Commented Mar 20, 2012 at 18:09

Reinaldo · Accepted Answer · 2012-03-20 18:54:33Z

2

An idea would be to check what page you are in, and apply a css class:

    <li class="<%= this.Page.ToString().ToLower().EndsWith("graphics_aspx") ? "selected" : "normal"%>">
Graphics<li>

Hope it helps!

edited Mar 20, 2012 at 18:54

answered Mar 20, 2012 at 18:13

Reinaldo

4,6863 gold badges26 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

David Over a year ago

awesome! I'll try it out and mark this as answer if I manage.

David Over a year ago

@Reinaldo Hmm, could you look at this screenshot?: gyazo.com/b13a69ae943f1fb096b2dd2e6b4cdb2b It didn't work (as I did it). My page actually ends with Graphics.aspx. So I created the styles selectedStyle and unselectedStyle and gave it a shot. Note that this code is in the sitemaster though.

Reinaldo Over a year ago

@David you are right, my mistake, use it like this: this.Page.ToString().ToLower().EndsWith("graphics_aspx") . Notice that I replace the dot with an underscore, and the page name is all lower case. I've updated the answer. Let me know how it goes.

David Over a year ago

@Reinaldo

<li class="<%= this.Page.ToString().ToLower().EndsWith("graphics_aspx") ? "selectedStyle" : "unselectedStyle"%>">                                     <a href="\Graphics.aspx" target="_self">  Graphics</a></li>

Does not seem to be working. Styles:

.selectedStyle         {             border-right-style: solid;             border-left-style: solid;             border-right-color: #000000;             border-left-color: #000000;             color:Blue;         }         .unselectedStyle         {             color:Black;         }

Reinaldo Over a year ago

@David write this in your Master page and see what you get: '<%= this.Page.ToString().ToLower() %> Maybe you can change the condition to match the output.

|

Ben · Accepted Answer · 2012-03-20 18:04:26Z

0

You can either use the CSS active state if the page you are on directly relates to the link, however if the menu points to sections (i.e. multiple pages) you may need to use a bit of server side code to your master page, that gets the requested URL and determines which link is active. Usual convention is to then add the class 'active' or similar to the outputted html.

answered Mar 20, 2012 at 18:04

Ben

1,78616 silver badges33 bronze badges

Comments

Pankaj · Accepted Answer · 2012-03-20 18:04:27Z

0

You can convert the UL/LI with runat = "server" and finally add styles in the code behind

Example

Control.Style.Add("display", "none");

answered Mar 20, 2012 at 18:04

Pankaj

10.2k40 gold badges152 silver badges298 bronze badges

3 Comments

David Over a year ago

"You can convert the UL/LI" what does that mean please? How and to what should I convert them?

Pankaj Over a year ago

Add runat server property in these tags and make it available in your code behind. Now add styles to that control.

David Over a year ago

<li><a href="\Graphics.aspx" target="_self" class="navmenustyle" id="graphicsMenu" runat="server"> Graphics</a></li> Does not work - still can't find the object "graphicsMenu" from my C# code.

Collectives™ on Stack Overflow

Change HTML/CSS from ASP(C# or VB) code

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related