#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    6
    Rep Power
    0

    Navigation barr effect help


    Hello friends. I just recently started HTML and CSS programming. I have tried a few things in CSS and HTML. I just checked this link
    and I liked its navigation bar. I have replicated the navigation bar except the glow effect that it gives on hovering over any link on the navigation bar. Can u tell me how can i add that only using CSS. I don't know much javascript so I may not be able to understand if this has a javascript solution.

    Oops how do i insert the URL I am a new member. I write the main part "mrc-productivity". Please use ctrl+enter to reach the link.

    Thanks
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Location
    Burb of Detroit, Michigan
    Posts
    91
    Rep Power
    78

    Question


    I'm guessing something like this:

    Code:
         nav ul li a {    
           color: #fff;
           transition: color 0.7s ease-in 0.3s;
           -moz-transition: color 0.7s ease-in 0.3s;
           -webkit-transition: color 0.7s ease-in 0.3s;
           -o-transition: color 0.7s ease-in 0.3s;
           -moz-transition: color 0.7s ease-in 0.3s;
         }
    
         nav ul li a:hover { color: #ffa }
    PDO Registration and Login tutorial @ http://www.jrpepp.com/displayPage.php?page=193
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    6
    Rep Power
    0
    Originally Posted by Strider64
    I'm guessing something like this:

    Code:
         nav ul li a {    
           color: #fff;
           transition: color 0.7s ease-in 0.3s;
           -moz-transition: color 0.7s ease-in 0.3s;
           -webkit-transition: color 0.7s ease-in 0.3s;
           -o-transition: color 0.7s ease-in 0.3s;
           -moz-transition: color 0.7s ease-in 0.3s;
         }
    
         nav ul li a:hover { color: #ffa }
    Thanks. I will try this as soon as i reach home
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    from what I see, that website is using a sprite image [buttonsprite.png] along with CSS [sprites.css] for the NAV to control what part of the sprite image is being displayed during the :hover event.

IMN logo majestic logo threadwatch logo seochat tools logo