SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Horizontal navbar with hover effect

    Hello everyone,

    Just wondering if anyone is able to help me out with a CSS question. I'm trying to create a horizontal navigation bar for a home page, and I would like it so when the user hovers over the link, the image is changed.

    Here is the code I have at the minute, but this puts one image for all links (the home.gif image). I would like to be able to target each href in the ordered list so that I can change the home.gif, to about_us.gif etc;

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    	<title>Bar Zest</title>
    	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
    <div id="container"> 
    <div id="navmenu">
    	<ol>
    		<li><a href="#">About us</a></li>
    		<li><a href="#">Products</a></li>
    		<li><a href="#">VIP</a></li>
    		<li><a href="#">Contact us</a></li>
    	</ol>
    </div>		
    </div>
    
    	
    </div>
    </body>
    
    </html>
    and here is the CSS:

    Code:
    #container {
    	text-align: center;
    	margin: 15px;
    }
    
    #navmenu {
    	width: 900px;
    	height: 60px;
    	padding: 0px;
    	margin: 0px auto;
    }
    
    #navmenu ol {
    	list-style-type: none;
    	margin: 4px;
    	padding: 0px;
    	text-align: center;
    }
    
    #navmenu ol li {
    	width: 200px;
    	float: left;
    	margin: 4px;
    }
    #navmenu ol li a {
    	text-decoration: none;
    	display: block;
    	color: transparent;
    	width: 200px;	
    	height: 60px;
    	line-height: 40px;
    	font-size: 14pt;
    	background-image: url(images/home.gif);
    }
    
    #navmenu a:hover {
    	background-image: url(images/home.gif);
    	background-position: -207px 0px;
    	
    }
    
    #navmenu ol li a {
    	text-decoration: none;
    	display: block;
    	color: transparent;
    	width: 200px;	
    	height: 60px;
    	line-height: 40px;
    	font-size: 14pt;
    	background-image: url(images/home.gif);
    	background-repeat: no-repeat;
    
    }
    
    #navmenu a:hover {
    	background-image: url(images/home.gif);
    	background-position: -207px 0px;
    	
    }
    Any help would be very much appreciated,

    Cheers

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The best way is to do it with sprites. Here is the css code and how to make the image. http://www.visibilityinherit.com/code/sprites.php

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    The best way is to do it with sprites. Here is the css code and how to make the image. http://www.visibilityinherit.com/code/sprites.php
    Thanks for the quick reply Eric

    With that, it seems be one complete image, is there a way to have individual images for each button as the ones I have aren't on the one image. For some reason, I'm unable to load one of the images on here to aid,

    Cheers

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JohnoLFC View Post
    Thanks for the quick reply Eric

    With that, it seems be one complete image, is there a way to have individual images for each button as the ones I have aren't on the one image. For some reason, I'm unable to load one of the images on here to aid,

    Cheers
    No prob. Keeps me busy. Ya you can do that. Just make the sprite different. There will of course be more and complicated css though.

    If you didn't want to do the sprite there are other ways. You could use one of these methods. http://www.visibilityinherit.com/cod...image-swap.php. Or place one image on top of the other and say opacity 0 onHover. That's most of them that won't give you a flicker when hovered the first time before cached.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Eric,

    Thanks for your help, I managed to do it using your method;


    <!DOCTYPE html>

    <html>
    <head>
    <title>Bar Zest</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
    <ul id="nav">
    <li><a href="#" id="a">ABOUT US</a></li>
    <li><a href="#" id="b">MENU</a></li>
    <li><a href="#" id="c">PRODUCTS</a></li>
    <li><a href="#" id="d">CONTACT US</a></li>
    </ul>

    </body>

    </html>
    And heres the CSS;


    * {
    margin:0;
    padding:0;
    }
    body {
    background:#eee;
    }
    #nav {
    list-style:none;
    width:1200px;
    height:50px;
    margin:20px auto;
    overflow:hidden;
    }
    #nav li {
    float:left;
    }
    #nav a {
    float:left;
    width:200px;
    padding-top:50px;
    padding-bottom: 50px;
    outline:0;
    margin-right: 4px;
    }
    /* Default State */
    #nav #a{background:url(images/aboutus.gif); background-repeat: no-repeat; background-position:0px -5px;}
    #nav #b{background:url(images/menu.gif); background-repeat: no-repeat; background-position:0px -9px;}
    #nav #c{background:url(images/products.gif); background-repeat: no-repeat; background-position: 0px -7px;}
    #nav #d{background:url(images/contactus.gif); background-repeat: no-repeat; background-position: 0px -7px;}

    /* Hover/Focus State */
    #nav #a:hover {background-position: -207px -5px;}
    #nav #b:hover {background-position: -207px -9px;}
    #nav #c:hover {background-position: -207px -7px;}
    #nav #d:hover {background-position: -207px -7px;}
    #nav #e:hover {background-position: -197px 5px;}
    Thanks again for your help with this, you have done something a whole morning on youtube couldnt teach me! haha

    Cheers

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Good. Np prob. I'm glad to be of help.


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
  •