Jump to content

Simple Css Pop Out Menus


shadowayex
 Share

Recommended Posts

Hey everyone. I was looking at some tutorials for some CSS Pop Out Menus and a lot of them seemed overly complex. So, I decided to build a simple one myself and see if I really needed all of the code they showed. Here's what I came up with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>CSS Menu</title> 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<style type="text/css">			/*--------------------------------Warning--------------------------------				The following code should be handle with care. The Styling 				Code section can safely be editted freely as long as if you 				change the border size, the absolute positioning in the				Effect Code section is changed so the numbers match. Leave 				the hyphen (-) there, as it fixes a bug with the menus being				positioned lower than the parent menu, the distance matching				the width of the parent's border. Other than that, do not				play with the Effect Code unless you know what you're doing.				Copywrite © 2009 Cyle Dawson. All Rights Reserved.				This code is free to use and edit as long as this warning				remains untouched.			-----------------------------------------------------------------------*/							/*---- Styling Code ----*/						ul.navi			{				width: 150px;			}			ul.navi li			{				border: solid 1px #000000;			} 			/*---- Effect Code ----*/			ul.navi, ul.navi ul			{				margin: 0px;				padding: 0px;			}			ul.navi li			{				list-style-type: none;				position: relative;			}			ul.navi ul			{				display: none;			}			ul.navi li:hover > ul			{				display: block;				position: absolute;					/* Edit "top" so it matches parent's border width (i.e 1 and -1) */					top: -1px; 					left: 100%;				width: 100%;			}		</style>	</head>	<body>		<!---- Each submenu Must be a new ul inside of a parent li ---->		<ul class="navi">			<li>One				<ul>					<li>One - One						<ul>							<li>One - One - One</li>						</ul>					</li>				</ul>			</li>			<li>Two				<ul>					<li>Two - One</li>				</ul>			</li>		</ul>	</body></html>

I put in some comments so hopefully it's easy enough to use. The word I have in there were just to make sure they were hiding and showing properly. They can be changed to whatever the options should say. I put in minimal styling, a width and a border. They both can be changed, but make note of the warning I placed. Any other styling should work just fine.I tested this in Firefox 3 and IE8 and it works in both. I don't have anything else, so if anyone cares to test this in Opera, IE6/7, Safari, or any other browsers and post the results I will keep a compatibility list for everyone.Secondly, let me know what you think and what you think would improve this, without making it overly complex of course. I want to keep it as simple as possible.Works In:Firefox 3.0Internet Explorer 8Does Not Work In:Internet Explorer 6 - IE6 does not support > operator. <rant>Nobody should be using IE6 any >_<. It's old and doesn't support a whole lot of useful and neat CSS things. Stupid IE6 and your lack of the > operator which flaws the entire system. </rant>

Edited by ragae
Link to comment
Share on other sites

It works, obviously, but I've never seen the '>' operator used in CSS before. What is it's purpose? I don't really understand the workings of this menu and I'd like to.

Link to comment
Share on other sites

It works, obviously, but I've never seen the '>' operator used in CSS before. What is it's purpose? I don't really understand the workings of this menu and I'd like to.
It selects only direct child nodes rather than just any descendant. It does not work in Internet Explorer 6, so I don't use it.
Link to comment
Share on other sites

It works, obviously, but I've never seen the '>' operator used in CSS before. What is it's purpose? I don't really understand the workings of this menu and I'd like to.
Well, take this code for example:
<div class="main">	<div>	   <p>Paragraph One</p>	</div>	<p>Paragraph Two</p></div>

If I did div.main p {color: red;} it would make both paragraphs have red text, even the one inside the second <div>.When you use the > operator, you are only looking for the children of that parent, and not any children of children. So div.main > p {color: red;} would only affect paragraph two, since paragraph one is in another <div>, even if it is in <div class="main">. That make sense?Edit: Inglome beat me to it :).

Edited by ragae
Link to comment
Share on other sites

It selects only direct child nodes rather than just any descendant. It does not work in Internet Explorer 6, so I don't use it.
Well then I would assume this system won't work in IE6 then. Any way around that?
Link to comment
Share on other sites

Ah, I see. Muy bueno. Well, not if it's not universally supported. Would it be more robust to assign the child you want to change a different class or Id and make the hover subclass switch its visibility, or is that not possible without scripts?

Link to comment
Share on other sites

Try to design the system for only one or two levels of nesting. Your current system seems to attempt to work on any amount of nesting. You can use class names for each level, like "first", "second" and "third" to make sure that you can specify which level opens under which hover.

Link to comment
Share on other sites

Easy to adjust the way Ingolme suggests:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>CSS Testing Zone</title> 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		<style type="text/css">			/*--------------------------------Warning--------------------------------				The following code should be handle with care. The Styling 				Code section can safely be editted freely as long as if you 				change the border size, the absolute positioning in the				Effect Code section is changed so the numbers match. Leave the hyphen (-) there, as it fixes a bug with the menus being				positioned lower than the parent menu, the distance matching				the width of the parent's border. Other than that, do not				play with the Effect Code unless you know what you're doing.				Copywrite © 2009 Cyle Dawson. All Rights Reserved.				This code is free to use and edit as long as this warning				remains untouched.			-----------------------------------------------------------------------*/							/*---- Styling Code ----*/						ul.navi	{				width: 150px;			}			ul.navi li {				border: solid 1px #000000;			} 			/*---- Effect Code ----*/			ul.navi, ul.navi ul{				margin: 0px;				padding: 0px;			}			ul.navi li {				list-style-type: none;				position: relative;			}ul.navi li.navi1,li.navi2 {display:none;} 						ul.navi li:hover li.navi1 {				display: block;				position: absolute;					/* Edit "top" so it matches parent's border width (i.e 1 and -1) */					top: -1px; 					left: 100%;				width: 100%;			}ul.navi li.navi1:hover li.navi2 {				display: block;				position: absolute;					/* Edit "top" so it matches parent's border width (i.e 1 and -1) */					top: -1px; 					left: 100%;				width: 100%;			}		</style>	</head>	<body>		<!---- Each submenu Must be a new ul inside of a parent li ---->		<ul class="navi">			<li>One				<ul>					<li class="navi1" id="navi2">One - One						<ul>							<li class="navi2">One - One - One</li>						</ul>					</li>				</ul>			</li>			<li>Two			<ul>					<li class="navi1">Two - One</li>				</ul>			</li>		</ul></body></html>

Link to comment
Share on other sites

Yeah, my system was originally designed so that it could be short and simple, but still work. The original design started off with some class names for levels, but the code became large so I scrapped it. I suppose I could try another system with some class names for different levels. I'll be back with another version on the code.Edit: Your version looks good chibineku :)

Edited by ragae
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...