shadowayex Posted April 26, 2009 Share Posted April 26, 2009 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> Link to comment Share on other sites More sharing options...
chibineku Posted April 26, 2009 Share Posted April 26, 2009 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 More sharing options...
Ingolme Posted April 26, 2009 Share Posted April 26, 2009 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 More sharing options...
shadowayex Posted April 26, 2009 Author Share Posted April 26, 2009 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 . Link to comment Share on other sites More sharing options...
shadowayex Posted April 26, 2009 Author Share Posted April 26, 2009 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 More sharing options...
chibineku Posted April 26, 2009 Share Posted April 26, 2009 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 More sharing options...
Ingolme Posted April 26, 2009 Share Posted April 26, 2009 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 More sharing options...
chibineku Posted April 26, 2009 Share Posted April 26, 2009 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 More sharing options...
shadowayex Posted April 26, 2009 Author Share Posted April 26, 2009 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.