Programming Forums > Projects > Show Off Your Open Source Projects

Pizentios · Nov 24th, 2004, 4:30 PM

Hey,

check it:

menu.css

<style type="text/css">
<!--

ul.root, ul.root ul {
	display: block;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}
ul.root li {
	margin: 0;
}
ul.root li {
	display: inline;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}

 ul.root li ul {
	display: block;
	position: absolute;
	left: 0;
	top: 1em;
	visibility: hidden;
	width: 9em;
	z-index: 1000;
}

 ul.root li ul li {
	margin: 0 0 0 -1.5em;
	padding: 0;
	display: block;
	width: 100%;
	margin-left: 0;
}

ul.root li ul li a {
	display: block;
	margin: 0;
	padding: 0 0 0 5%;
	width: 100%;
	width: 95%;
}

ul.root li.submenu:hover {
	padding-bottom: 30em;
}
ul.root li.submenu:hover ul {
	left: 0;
	visibility: visible;
}
-->
</style>

then in your page just do this:

(Toggle Plain Text)

<html>
<head>
     <link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul class="root">
	<li><a href="#">Link 1</a></li>
	<li class="submenu"><a href="#">Link with drop-down</a>
 <ul>
 	<li><a href="#">Sub-item 1</a></li>
 	<li><a href="#">Sub-item 2</a></li>
 </ul>
	</li>
</ul>
</body>
</html>

Currently this makes a menu that is horizontal, but with a few easy changes you can make it virtical.

Pizentios · Nov 24th, 2004, 4:42 PM

also this won't work in IE because it doesn't support CSS2

Ooble · Nov 24th, 2004, 5:06 PM

Looking good. I'm gonna have to try this out.

monkey8 · Nov 24th, 2004, 5:41 PM

There's a tut here http://www.meyerweb.com/eric/css/edge/menus/demo.html and some other goodies at http://www.meyerweb.com/eric/css/edge/

Pizentios · Nov 24th, 2004, 5:48 PM

Yeah, those actually where among some of the sites that i read in order to code this.

Nov 24th, 2004, 4:30 PM	#1
Pizentios Programming Guru Join Date: May 2004 Location: Brandon, Manitoba, Canada Posts: 2,023 Rep Power: 7	Hey, check it: menu.css (Toggle Plain Text) <style type="text/css"> <!-- ul.root, ul.root ul { display: block; margin: 0; padding: 0; background-color: #FFFFFF; } ul.root li { margin: 0; } ul.root li { display: inline; list-style: none; position: relative; margin: 0; padding: 0; } ul.root li ul { display: block; position: absolute; left: 0; top: 1em; visibility: hidden; width: 9em; z-index: 1000; } ul.root li ul li { margin: 0 0 0 -1.5em; padding: 0; display: block; width: 100%; margin-left: 0; } ul.root li ul li a { display: block; margin: 0; padding: 0 0 0 5%; width: 100%; width: 95%; } ul.root li.submenu:hover { padding-bottom: 30em; } ul.root li.submenu:hover ul { left: 0; visibility: visible; } --> </style> <style type="text/css"> <!-- ul.root, ul.root ul { display: block; margin: 0; padding: 0; background-color: #FFFFFF; } ul.root li { margin: 0; } ul.root li { display: inline; list-style: none; position: relative; margin: 0; padding: 0; } ul.root li ul { display: block; position: absolute; left: 0; top: 1em; visibility: hidden; width: 9em; z-index: 1000; } ul.root li ul li { margin: 0 0 0 -1.5em; padding: 0; display: block; width: 100%; margin-left: 0; } ul.root li ul li a { display: block; margin: 0; padding: 0 0 0 5%; width: 100%; width: 95%; } ul.root li.submenu:hover { padding-bottom: 30em; } ul.root li.submenu:hover ul { left: 0; visibility: visible; } --> </style> then in your page just do this: (Toggle Plain Text) <html> <head> <link rel="stylesheet" type="text/css" href="menu.css"> </head> <body> <ul class="root"> <li><a href="#">Link 1</a></li> <li class="submenu"><a href="#">Link with drop-down</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> </ul> </li> </ul> </body> </html> <html> <head> <link rel="stylesheet" type="text/css" href="menu.css"> </head> <body> <ul class="root"> <li><a href="#">Link 1</a></li> <li class="submenu"><a href="#">Link with drop-down</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> </ul> </li> </ul> </body> </html> Currently this makes a menu that is horizontal, but with a few easy changes you can make it virtical. __________________ Profanity is the one language that all programmers understand. Check out my Blog <---updated Nov 30 2007!

Nov 24th, 2004, 4:42 PM	#2
Pizentios Programming Guru Join Date: May 2004 Location: Brandon, Manitoba, Canada Posts: 2,023 Rep Power: 7	also this won't work in IE because it doesn't support CSS2 __________________ Profanity is the one language that all programmers understand. Check out my Blog <---updated Nov 30 2007!

Nov 24th, 2004, 5:06 PM	#3
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	Looking good. I'm gonna have to try this out. __________________ Me :: You :: Them

Nov 24th, 2004, 5:48 PM	#5
Pizentios Programming Guru Join Date: May 2004 Location: Brandon, Manitoba, Canada Posts: 2,023 Rep Power: 7	Yeah, those actually where among some of the sites that i read in order to code this. __________________ Profanity is the one language that all programmers understand. Check out my Blog <---updated Nov 30 2007!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 24th, 2004, 5:41 PM	#4
monkey8 Newbie Join Date: Nov 2004 Posts: 12 Rep Power: 0	There's a tut here http://www.meyerweb.com/eric/css/edge/menus/demo.html and some other goodies at http://www.meyerweb.com/eric/css/edge/

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Programming Forums > Projects > Show Off Your Open Source Projects

Pure Css2 Menu