• Locked
No replies
Wed, 2009-03-18 10:25
wilorichie
wilorichie's picture
Offline
Regular
Last seen: 13 years 13 weeks ago
Timezone: GMT+10
Joined: 2009-02-13
Posts: 14
Points: 3

Hey guys

I started another thread for this as this isn't really on topic from my last one.

I'm wondering how much better this menu can get. I have spent countless hours on this simple menu...

It's the tut from the a list 'suckerfish' website.

I would really appreciate it if someone could go through this code (copy and paste it into a text file) and see if you can simplify the code or make it better.

I have used !important becuase there was no other way to make those attributes work.

If you guys could show me the better (if there is) way, I would be so happy!

You will need to make a large gif file (approx 1000x300 pixels) and just colour it to be able to see the menu - main.gif

You can copy and paste this full code into an html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
 
	<style type="text/css">
		/* THIS IS THE CSS NAV MENU ACROSS THE TOP */
		ul#nav {				background: url(main.gif); width: 670px; padding: 0px; margin: 0px 0px 0px 10px; }
		ul#nav li {				float: left; position:relative; list-style-type: none; }
		ul#nav li.others {		margin-left: 3px; }
		ul#nav li.contact {		margin-left: 25px; }
		ul#nav li a {			height: 35px; display: block; text-indent: -9999px; outline: none; }
 
		li#nav_home a, li#nav_services a, li#nav_contact a { background: url(main.gif); }
 
		li#nav_home a {				background-position: 0 0; width: 90px; left: 0px; }
		li#nav_home a:hover {		background-position: 0 35px; }
 
		li#nav_services a {			background-position: -279px 0; width: 90px; left: 279px; }
		li#nav_services a:hover {	background-position: -279px 35px; }
 
		li#nav_contact a {			background-position: -580px 0; width: 90px; left: 580px; }
		li#nav_contact a:hover {	background-position: -580px 35px; }
		/* END CSS NAV MENU ON TOP */
 
		/* THIS IS THE DROP DOWN PART */
		#tr_menu {					z-index: 100; position: relative; overflow: visible; }
 
		li ul {						display: none; position: absolute; top: 35px; left: -40px; }
		li > ul {					top: 35px; left: -40px; }
 
		ul li ul li {				text-align: left; background-color: #f5eade; border-bottom: 1px #ead7c3 solid; width: 155px; padding: 5px;
									float: none !important; position: relative !important; }
 
		li:hover ul {				display: block; }
 
		ul li ul li a {				background: none !important; text-indent: 0px !important; background-position: 0px !important; left: 0px !important; height: 10px !important; width: 155px !important;			
									padding: 5px; }
 
		li:hover ul, li.over ul {	display: block; }	
		/*END DROP DOWN PART */
	</style>
 
</head>
<body>
 
 
 
 
	<ul id="nav">
		<li id="nav_home"><a href="index.php" title="Front Page">HOME</a></li>
		<li id="nav_services" class="others"><a href="services.php" title="Our Services">SERVICES</a>
			<ul>
				<li><a href="1" class="lid">Link 1</a></li>
				<li><a href="2" class="lid">Link 2</a></li>
				<li><a href="3" class="lid">Link 3</a></li>
				<li><a href="4" class="lid">Link 4</a></li>
				<li><a href="5" class="lid">Link 5</a></li>
			</ul>
		</li>
		<li id="nav_contact" class="contact"><a href="contact.php" title="Contact Us">CONTACT</a></li>
	</ul>
 
 
 
 
 
</body>
</html>

Cheers fellas and ladies.

Top
Tags: