SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Css Roll Over Breadcrumb Question

    Hello,
    This CSS makes button turn gray when the mouse does a roll over. How do I make that color stay when the person is on that page?

    Below is the CSS. Thanks for your help.

    CSS

    Code:
    #mainMenu a {
    
    	display:-moz-inline-block;
    	display:-moz-inline-box;
    	display:inline-block;
    	padding:2px 6px;
    	text-decoration:none;
    	
    /*	font-weight:bold;
    */	color:#444;
    	border:solid #000;
    	border-width:0 1px;
    	background-color:#FFFFFF
    }
    
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#000;
    	background:#ccc;
    /*	background:#BCD;
    */}
    
    #mainMenu li {
    	display:inline;
    	padding:0 4px;
    }
    
    #mainMenu {
    	list-style:none;
    	padding:8px 0 16px;
    }
    HTML

    Code:
    <div>
     
     <ul id="mainMenu"> 
     		<li><a href="index.html">Home</a></li>
    <li><a  href="aboutus.html">About St. Jude School</a></li> 
    		<li><a href="admissions.html">Admissions</a></li> 
    		<li><a href="facultystaff.html">Faculty & Staff</a></li> 
            		<li><a href="news.html">News & Events</a></li> 
            <li><a href="#">Contact Us</a></li>
    	</ul>
     
      </div>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Rollover=hover. Let's go into your CSS and find where the hover rules are

    Code:
    #mainMenu a:active,
    #mainMenu a:focus,
    #mainMenu a:hover {
    	color:#000;
    	background:#ccc;
    /*	background:#BCD;
    */}
    That background#BCD is commented out..but anyway. I know from experience that #CCC is gray (from memory..)

    That's your culprit. Think about your problems logically mate

    For current page highlighting, check this link
    http://www.visibilityinherit.com/code/current-page.php
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback. But I would also want the button to remain grayed out once the button has been clicked. In other words, if I click on the events button and go to the events page I want that events page to remain grayed out.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Another Designer View Post
    Thanks for the feedback. But I would also want the button to remain grayed out once the button has been clicked. In other words, if I click on the events button and go to the events page I want that events page to remain grayed out.
    You'll need to add a hook in the HTML - CSS alone won't check whether the destination of a link matches the current URL.

    If you hard-code the menu into the HTML on each page, it's simple - just add a class="current" to the relevant item on each page, and then put a .current {...} in the stylesheet.

    If you use PHP to build the page, I am sure there is a way to get the PHP to check whether the link destination equals the current URL and dynamically add a class="current" and then proceed as above.

    If you pull the menu into the page using a server-side include, you have to be a bit more canny about it. See http://www.sitepoint.com/forums/show...76#post4678076 for more info on how to go about it.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •