• (2 Pages)
  • +
  • 1
  • 2

CSS pretty Horizontal and Vertical Menus Rate Topic: ***** 1 Votes

#1 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Post icon  Posted 18 September 2007 - 01:44 PM

*
POPULAR

Rollover menus are all the rage. I can't stand a menu that doesn't rollover * cough * To me it is just feels icky when I mouse over a menu item and nothing happens. CSS makes pretty menus quite easy. Today we are going to learn how to make horizontal and vertical menus that are pretty and creative :) Let's get started.

First I will show you the basics with a horizontal menu, so lets make a list:

<div id="menu1">
 <ul>
   <li><a href="#">Freaking</a></li>
   <li><a href="#">Pretty</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Just</a></li>
   <li><a href="#">For</a></li>
   <li><a href="#">You</a></li>
 </ul>  
</div>



Easy enough. Now let's start off with the basics for a horizontal menu:

#menu1{
	height:25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu1 ul li{
	display:inline;
}
#menu1 ul li a{
	text-decoration:none;
	float:left;
	height:25;
	margin:12px 0;
	padding:15px;
	width:65px;
	text-align:center;
}



Posted Image

Well thats nice but it sure is ugly! Let's make it pretty now...time to go to photoshop...don't freak out it is the easiest step: Make a new file that is 25px in height and 3px in width:

Posted Image

Pick any two colors you like, put one on the forground and one on the background. I am going to go with dream-in-code orange. Now get your gradient tool, make sure the gradient is set on foreground to background:

Posted Image

Now make a line from the top to bottom and save it for the web in your images folder:

Posted Image

Now make a line from the bottom to the top and do the same:

Posted Image

Now here add this to your CSS, using your own image names:

#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url(images/link.gif);
	background-repeat:repeat-x;
	background-position:center;
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url(images/hover.gif);
	background-repeat:repeat-x;
	background-position:center;
}




Still not good enough for ya? OK let's spruce it up a bit with a border:

#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url(images/link.gif);
	background-repeat:repeat-x;
	background-position:center;
	border: 1px solid #f16b12;
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url(images/hover.gif);
	background-repeat:repeat-x;
	background-position:center;
	border: 1px solid #e89642;
}



Posted Image

Wow!!! Pretty!!...as pretty as orange can be...ok let's make a vertical one, use the same unordered list and here is the basic CSS for the vertical menu:

#menu2{
	padding:24px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu2 ul {
	margin:0px;
	padding:0px;
	list-style-type:none;
}
#menu2 ul li{
	padding:0;	
}
#menu2 ul li a{
	display: block;
	width:150px;
	height:30px;
	margin:0;
	padding: 10px;
	text-decoration:none;
	text-align:right;
}



But we need to make it pretty now! Go to photoshop and do the same as before only make the width the same as your ul li a width + padding on each side = 170 and make the height 3px, then take your gradient from right to left and then left to right. Then add this to your CSS:

#menu2 a:link, #menu2 a:visited{
	color:#fff;
	background-image:url(images/link2.gif);
	background-repeat:repeat-y;
	background-position:center;
	border: 1px solid #f16b12; /* this border doesn't work in IE6 */
}
#menu2 a:hover, #menu2 a:active{
	color:#000;
	background-image:url(images/hover2.gif);
	background-repeat:repeat-y;
	background-position:center;
	border: 1px solid #e89642; 
}



The possibilities are endless, you can play with margins, padding, color, borders-- just remember DON'T mess with the ul margins and don't cop out w/ the a's you MUST have them in this order link, visited, hover, active. Otherwise they won't work properly. Let me know how it goes!

You can see these menus at: http://www.webtestin....com/tutorials/

Is This A Good Question/Topic? 5
  • +

Replies To: CSS pretty Horizontal and Vertical Menus

#2 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Posted 18 September 2007 - 07:07 PM

Excellent explanation, and an example page too!

+1 for good use of the word Freaking.
Was This Post Helpful? 0
  • +
  • -

#3 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Posted 18 September 2007 - 08:24 PM

Very nicely done! Good work.
Was This Post Helpful? 0
  • +
  • -

#4 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1868
  • View blog
  • Posts: 20,280
  • Joined: 17-March 01

Posted 18 September 2007 - 08:42 PM

What's wrong with orange?! :blink: :P
Was This Post Helpful? 0
  • +
  • -

#5 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 19 September 2007 - 07:13 AM

awww thank you guys...

I knew I couldn't use the alternative to freakin ;)

I am a fan of all colors, even the ugliest color can look good if it is complemented right, and the orange on this site is done well, I don't think any other color would do, it is unique enough to constitute a brand, I get a nice warm fuzzy feeling from it when I visit the site and when I see the color I will always associate it w/ </dream.in.code> haha but orange is just one of those colors that only fit well in certain situations, it is hard to make it work ;) but works perfectly for this site
Was This Post Helpful? 0
  • +
  • -

#6 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Posted 19 September 2007 - 01:45 PM

Good one, you encourage me to finish my tutorial.
Regards.
Was This Post Helpful? 0
  • +
  • -

#7 smdesignworks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-September 07

Posted 20 September 2007 - 09:02 PM

Essentially you could even make it better by using the "CSS Sprite" technique to put both those images on a single image file and just make the CSS move the positioning of the image down. I believe (or have read) that it makes the hover more responsive which means faster, and also instead of 2 menu images, its just one and would have a tiny bit less of a file size (I guess this is because it only needs 1 color palette instead of 2), so its even that much faster. Not to mention its so much cleaner when you have less images in your image folder, just one aspect of being extremely organized. :)
Was This Post Helpful? 0
  • +
  • -

#8 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 21 September 2007 - 11:37 AM

View Postsmdesignworks, on 20 Sep, 2007 - 09:02 PM, said:

Essentially you could even make it better by using the "CSS Sprite" technique to put both those images on a single image file and just make the CSS move the positioning of the image down. I believe (or have read) that it makes the hover more responsive which means faster, and also instead of 2 menu images, its just one and would have a tiny bit less of a file size (I guess this is because it only needs 1 color palette instead of 2), so its even that much faster. Not to mention its so much cleaner when you have less images in your image folder, just one aspect of being extremely organized. :)


hrm that is a valid point, i'll have to google that one
Was This Post Helpful? 0
  • +
  • -

#9 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1868
  • View blog
  • Posts: 20,280
  • Joined: 17-March 01

Posted 21 September 2007 - 11:39 AM

View Postsmdesignworks, on 20 Sep, 2007 - 10:02 PM, said:

Essentially you could even make it better by using the "CSS Sprite" technique to put both those images on a single image file and just make the CSS move the positioning of the image down. I believe (or have read) that it makes the hover more responsive which means faster, and also instead of 2 menu images, its just one and would have a tiny bit less of a file size (I guess this is because it only needs 1 color palette instead of 2), so its even that much faster. Not to mention its so much cleaner when you have less images in your image folder, just one aspect of being extremely organized. :)


Interesting, never thought of doing that but it makes complete sense.
Was This Post Helpful? 0
  • +
  • -

#10 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 21 September 2007 - 12:09 PM

found something...very interesting...

http://www.alistapar...rticles/sprites
Was This Post Helpful? 0
  • +
  • -

#11 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Posted 21 September 2007 - 01:07 PM

Ugh I'm no good at this. Ok so here is my code. It is not looking like yours at all. :crazy:

<!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">
<head>
<link rel="stylesheet" type="text/css" href="redefine.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="menu1">
<ul>
   <li><a href="#">Electric</a></li>
   <li><a href="#">Acoustic</a></li>
   <li><a href="#">Amps</a></li>
   <li><a href="#">Other Sites</a></li>
</ul>  
</div>


</body>
</html>




and here is the CSS


#menu1{
	height:25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu1 ul li{
	display:inline;
}
#menu1 ul li a{
	text-decoration:none;
	float:left;
	height:25;
	margin:12px 0;
	padding:15px;
	width:65px;
	text-align:center;
}

#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url(../Images/menu2.jpg);
	background-repeat:repeat-x;
	background-position:center;
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image: url(../Images/menu1.jpg);
	background-repeat:repeat-x;
	background-position:center;
	border: 1px solid #e89642;
}




What's going on? :(
Was This Post Helpful? 0
  • +
  • -

#12 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 21 September 2007 - 02:11 PM

Is the "other sites" dropping down? This is what it does for me when I pasted your code in my testing lab...I tried positioning the background to the top for the a lvha and that helped a little.....let me keep tweaking it...it is the fact that it is on two line, I even tried to put a br in it, and that didn't work either...let me keep tweaking and see...
Was This Post Helpful? 0
  • +
  • -

#13 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 21 September 2007 - 02:27 PM

turns out the background position did work but it still looks like poo. So if you delete the width, or make it long enough so that word won't wrap you problem will be solved...also deleting the height will make the border quit being funny, but it will always come out a little bit, but there is no white space
here is the link:

http://www.webtestin...rials/test.html

and new code

#menu1{
	height:25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menu1 ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu1 ul li{
	display:inline;
}
#menu1 ul li a{
	text-decoration:none;
	float:left;
	margin:12px 0;
	padding:15px;
	text-align:center;
}

#menu1 a:link, #menu1 a:visited{
	color:#fff;
	background-image:url(images/link.gif);
	background-repeat:repeat-x;
	background-position:top;
}
#menu1 a:hover, #menu1 a:active{
	color:#000;
	background-image:url(images/hover.gif);
	background-repeat:repeat-x;
	background-position:top;
	border: 1px solid #e89642;
}


Was This Post Helpful? 0
  • +
  • -

#14 smdesignworks  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-September 07

Posted 21 September 2007 - 04:32 PM

View Postskyhawk133, on 21 Sep, 2007 - 11:39 AM, said:

Interesting, never thought of doing that but it makes complete sense.


Thats actually the article I was referring to, you can do the technique with a ton of things, for example if you have a h2 tag where you use custom art for it instead of straight text you can line up all those h2 images, lets say you have 6 different h2 images, you can just have one art file for all those 6 images and just move the positioning with classes on those h2's, also anything with a hover the sprite technique is recommended, its just better... It may be a pain at first but stick with it and eventually it just clicks and it becomes really easy and requires less code for things like hovers. :)

Hope that makes sense.
Was This Post Helpful? 0
  • +
  • -

#15 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Posted 21 September 2007 - 07:59 PM

Hey thanks a lot! I almost had it figured out it looks like. This is a great tutorial. :)
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2