Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Rollover Help

Discussion in 'Website Design Forum:' started by wac, Nov 30, 2010.

  1. wac

    wac Senior Member

    Hey guys,
    whats peoples opinions on the best way to make a rollover for the web like the one here (http://www.goldsmiths.co.uk/) don't need a drop down menu, just a similar effect.

    many thanks
     
  2. Sunburn

    Sunburn Active Member

    You could do it with css and an image sprite, or you could do it using css(3) and specifiy a linear grad.
     
  3. Harry

    Harry Senior Member

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Nav</title>
    	
    	<style>
    		
    		body{
    			font-family:Calibri, Arial, Verdana, sans-serif;
    		}
    		#nav{
    			list-style:none;
    			padding:0;
    			margin:0 0 20px 0;
    			width:100%;
    			overflow:hidden;
    			background:#da1b43;
    			background:-moz-linear-gradient(-90deg, #f43059, #da1b43);
    			background:-webkit-gradient(linear, left top, left bottom, from(#f43059), to(#da1b43));
    		}
    		#nav li{
    			float:left;
    		}
    		#nav a{
    			padding:5px;
    			display:block;
    			color:#fff;
    			text-decoration:none;
    			border-left:1px solid #ff5176;
    			border-right:1px solid #b82745;
    		}
    		#nav a:hover{
    			background:#222;
    			background:-moz-linear-gradient(-90deg, #666, #222);
    			background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#222));
    		}
    		#nav li:first-of-type a{
    			border-left:none;
    		}
    		#nav li:last-of-type a{
    			border-right:none;
    		}
    		
    	</style>
    	
    </head>
    <body>
    	
    	<ul id="nav">
    		<li><a href="/">Home</a></li>
    		<li><a href="/about/">About</a></li>
    		<li><a href="/services/">Services</a></li>
    		<li><a href="/portfolio/">Portfolio</a></li>
    		<li><a href="/contact/">Contact</a></li>
    	</ul>
    	
    </body>
    </html>
     
  4. wac

    wac Senior Member

    Cheers guys.

    Harry that's incredibly helpful just what I was looking for, I see by the code what Geoff meant by a css gradient. Did you just whip that code up?
     
  5. Harry

    Harry Senior Member

    Yup yup, coded it up of the top of my head: it should work.

    Before you copy/paste though, make sure you 100% understand every single piece of it.
    Any bit you don't understand just lemme know and I'll explain.
     
  6. Sunburn

    Sunburn Active Member

    @ Harry - Your too generous mate, next your be telling me you work for £5 per hour :) hehee
     
  7. wac

    wac Senior Member

    wow, well thanks for taking the time to do that. It all seems pretty straightforward now, I found this site (CSS3 Gradient Generator) for actually creating the grads by eye. The only thing is 'overflow:hidden' what exactly does that mean/do?
     
  8. Harry

    Harry Senior Member

    Haha, five minutes of my time is worth a nice thank-you :)

    No worries.
    As for the overflow, see: Float Clearing
     
  9. wac

    wac Senior Member

    many thanks :)
     

Share This Page