HTML, CSS, Navigation selected or active

Hi,

I have the following HTML code


 <div id="topnav">
                <ul>
                    <li class="active"><a href="Home.aspx">Home</a></li>
                    <li><a href="Whoarewe.aspx">Who are we</a></li>
                    <li><a href="Services.aspx">Services</a></li>
                    <li><a href="ContactUs.aspx">Contact Us</a> </li>
                </ul>
            </div>

Open in new window


Then have this in CSS

#topnav{
	display:block;
	float:left;
	width:660px;
	margin:0;
	padding:0;
	list-style:none;
	font-size:13px;
	font-weight:normal;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	background-color:#000000;
	}

#topnav ul, #topnav li{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	}

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
	display:block;
	margin:0;
	padding:15px 20px;
	color:#FFFFFF;
	background-color:#000000;
	}

#topnav ul ul li a:link, #topnav ul ul li a:visited{
	border:none;
	}

#topnav li.last a{
	margin-right:0;
	}

#topnav li a:hover, #topnav ul li.active a{
	color:#FFFFFF;
	background-color:#059BD8;
	}
	

Open in new window


But the problem is that when I move through the navigation only HOME stays highlighted and not the page that I am on

Please help

Thanks

R8VI
R8VIAsked:
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.

LZ1Commented:
If you're looking to highlight a menu item, you'll need either some type of server side help.

Or if you want to do it in CSS only, you'll have to give each page some type of class or ID in say the body tag.

Can you share a live link so we can take a closer look?
0
WebDevEMCommented:
HI,

There are javascript methods to change which one has the "active" class, but there's also a sneaky way through pure HTML/CSS:
<style>
body.home #navhome{color:#FFFFFF;background-color:#059BD8;}
body.whoweare #navwhoweare{color:#FFFFFF;background-color:#059BD8;}
body.services #navservices{color:#FFFFFF;background-color:#059BD8;}
body.contact #navcontact{color:#FFFFFF;background-color:#059BD8;}
</style>

<div id="topnav">
                <ul>
                    <li id="navhome"><a href="Home.aspx">Home</a></li>
                    <li id="navwhoweare"><a href="Whoarewe.aspx">Who are we</a></li>
                    <li id="navservices"><a href="Services.aspx">Services</a></li>
                    <li id="navcontact"><a href="ContactUs.aspx">Contact Us</a> </li>
                </ul>
            </div>

Open in new window

Then in the BODY tag of each page, set a class like this: <body class="home"> or <body class="contact">  That will apply the color and background colors appropriately.  For instance, the last line of the CSS above will apply to an ID of "navcontact" only on a page that has body class="contact"
0
Alexandre SimõesManager / Technology SpecialistCommented:
You want to move the class="active" depending on the page you're in right?

As you're in ASP.net you can kind of hardcode it:

                <ul>
                    <li <% if(Request.RawUrl.EndsWith("/Home.aspx")) { %>class="active"<%}%>><a href="Home.aspx">Home</a></li>
                    <li <% if(Request.RawUrl.EndsWith("/Whoarewe.aspx")) { %>class="active"<%}%>><a href="Whoarewe.aspx">Who are we</a></li>
                    <li <% if(Request.RawUrl.EndsWith("/Services.aspx")) { %>class="active"<%}%>><a href="Services.aspx">Services</a></li>
                    <li <% if(Request.RawUrl.EndsWith("/ContactUs.aspx")) { %>class="active"<%}%>><a href="ContactUs.aspx">Contact Us</a> </li>
                </ul>

Open in new window


I wrote this here and didn't check for syntax errors... but should work :)
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
COBOLdinosaurCommented:
Instead of screwing around with a lot of client side hacks that just adds to an already bloated bit of CSS.  Look at what LZ1 said about doing it on the server.  Change the class for active to an id for active.  Then in your page generation code you just set the menu item that is active to the active id.  

Or just make a mess on the client where trying to set it after the fact is not very good practice, and just creates a way for things to get broken.

Cd&
0
Alexandre SimõesManager / Technology SpecialistCommented:
What I think is that if it's a style thing it should be visible on the markup otherwise you're just spreading logic all around but at the end is all about you feel more comfortable.
In either case you'll need to use the <%= ASP.net %> markup templating syntax to style the menu :)

Either you create a UserControl for your menu, put everything inside, making it auto-sufficient, and add it to the master-page or you just spread the code all over :p

Have fun!
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
HTML

From novice to tech pro — start learning today.