Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

navigation mouseover remains active on pages

How do I modify page so the mouseover effect remains activated when visitor opens a web page?  I created a class but it didn't work right.  I put it on the Caregiving button on this page only.


http://www.embracecaremanagement.com/caregiving.html
http://www.embracecaremanagement.com/embrace.css

<li class="active"><a href="caremanagement.html">Care Management</a></li>
<ul id="nav"> 
   <li><a href="services.html">Services</a></li>
     <li class="active"><a href="caremanagement.html">Care Management</a></li>
     <li><a href="caregiving.html">Caregiving</a></li>
     <li><a href="team.html">Team Members</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="stories.html">Client Stories</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="video.html">Video</a></li>
    <li><a href="http://sheboyganseniorcare-helpishere.blogspot.com/" target="_blank">Blog</a></li>
    <li><a href="links.html">Links/Resources</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="index.html">Home</a></li>
    </ul>



.active {color: #3b2f18; 
background: #c7e7b7;/* light green mouseover color on button */
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}

Open in new window

SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jebpotly
jebpotly

First issue is knowing which link should be activated. Since this is an html page and not some sort of scripting language page then you will have to use javascript. In your url for the link you can put the name of the link to highlight. Then when the page loads, have javascript set the current link to be active.

This site has a cool function for getting at url parameters: http://www.netlobo.com/url_query_string_javascript.html

Here is the resulting page which works for me:
<ul id="nav"> 
   <li id="services"><a href="services.html?page=services">Services</a></li>
     <li id="caremanagement"><a href="caremanagement.html?page=caremanagement">Care Management</a></li>
     <li id="caregiving" ><a href="caregiving.html?page=caregiving">Caregiving</a></li>
     <li id="team"><a href="team.html?page=team">Team Members</a></li>
    <li id="faq"><a href="faq.html?page=faq">FAQ</a></li>
    <li id="testimonials"><a href="testimonials.html?page=testimonials">Testimonials</a></li>
    <li id="stories"><a href="stories.html?page=stories">Client Stories</a></li>
    <li id="news"><a href="news.html?page=news">News</a></li>
    <li id="video"><a href="video.html?page=video">Video</a></li>
    <li><a href="http://sheboyganseniorcare-helpishere.blogspot.com/" target="_blank">Blog</a></li>
    <li id="links"><a href="links.html?page=links">Links/Resources</a></li>
    <li id="contact"><a href="contact.html?page=contact">Contact Us</a></li>
    <li id="index"><a href="index.html?page=index">Home</a></li>
    </ul>

<style type="text/css">

.active {color: #3b2f18; 
background: #c7e7b7;/* light green mouseover color on button */
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}
</style>
<script type="text/javascript">
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
function setActive(el_id) {
	var elem = document.getElementById(el_id);
	var is_active = (gup('page') == el_id);
	if (is_active) {
		elem.className  = 'active';
	} else {
		elem.className  = 'inactive';
	}
}
window.onload = function () {
	setActive('caremanagement');
	setActive('caregiving');
	setActive('team');
	setActive('faq');
	setActive('stories');
	setActive('testimonials');
	setActive('news');
	setActive('video');
	setActive('links');
	setActive('contact');
	setActive('index');
	setActive('services');
}
</script>

Open in new window

Avatar of nsitedesigns

ASKER

HainKurt,

How do I modify the css?  That is my question.

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
greatGerm,

I tried moving the css down the sheet and adding the important tag to the background and this is what happened.

http://screencast.com/t/VxLizwgrwUI
Oops - I see what I did to get the goofy results with the link above.  I fixed that.  But still not getting the results that I am hoping for.

Back to square one.
Not square one :)

Change .active to .active a
You are right, square two.  : )

adding "a" to active worked partially.  I had to add important! to all active declarations.  Is that ok to do?  I heard to use important! sparingly.

.active a {color: #3b2f18!important;
background: #c7e7b7 !important;/* light green mouseover color on button */
background-image:url(img/mouseover2.png)!important;
background-repeat:no-repeat!important;
background-position:left center!important;}
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Yes, you would need to add the !important rule to all declarations that are overridden down the cascade.

You are correct, you will want to use it sparingly since it does break out of the cascade, but this is the type of situation for which it was meant.  Like most things CSS you have other options such as changing the order of the declarations, putting the styles inline, using client-side scripting (i.e. javascript), etc.

How you do it is up to you.
Hey Kravimir!

I removed the important! from the declaration and changed it to "ul#nav .active a" but that only worked partially.  I see the green bar now but not the little ball to the left.  The link below is the only page that I have this applied to:  See what I mean...  What did I miss?

http://www.embracecaremanagement.com/caregiving.html

ul#nav .active a {color: #3b2f18; 
background: #c7e7b7;/
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}

Open in new window

I moved the declaration lower on the css page too and it still doesn't seem to work...
It's not working because of the stray slash at the end of this line:

background: #c7e7b7;/
Wahoo-dilly-do!

thanks.  Time for new glasses I guess.
Thanks all!