Welcome to WebmasterWorld Guest from 54.198.3.15

Forum Moderators: not2easy

Message Too Old, No Replies

Pure CSS collapsing menu

css acordion menu, collapsing with no javascript

     
10:37 am on Aug 10, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0



Is it possible to make a collapsing menu with no javascript at all? only using pure CSS? I have found a couple of articles that said it was just css but they always call a javascript somehow.

this is what i want it to look like:

parent 1
---child1
---child2
---child3
parent 2
---child1
---child2
parent 3
parent 4

I want every parent to show their child menus when it (the parent) is clicked on and hide those visible children when a different parent is clicked on.

12:47 pm on Aug 10, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Apr 9, 2004
posts:250
votes: 0


I think I remember seeing somewhere that it is indeed possible, but IE does not support it. That's why everyone uses Javascript to do it.
12:58 pm on Aug 10, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts:2264
votes: 0


Is there any reason why you wanted no js? (Apart from the fact that a few people have it disabled?)
1:47 pm on Aug 10, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 25, 2005
posts:31
votes: 0


I was going to post the exact same question - my reason for no js being that i don't understand it, and i'm not comfortable having script i don't understand on my page, even if it works perfectly.

Any suggestions for a dead simple tutorial for show/hide lists even if it does involve some js?

2:11 pm on Aug 10, 2005 (gmt 0)

Full Member

10+ Year Member

joined:July 30, 2003
posts:322
votes: 0


Google for "Son of Suckerfish". A List Apart is another good resource to check. Seems that they recently did an artical about an alternative method for collapsing menus.
4:05 pm on Aug 10, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 9, 2005
posts:28
votes: 0


I'm sure that it can be done.
I was just checking out a menu where a caption would appear appear along side a button when hovered over ;
and it couldn't be that hard to just have a another expandable button appear instead.

The way I see it working though is not collapsing and contracting, but rather cascading or stacking. Vertical expanding right would be neat.

The trigger for the 'appear' looks like this:

div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 200px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}

// and links look
<div id="links">
<a href="link.html/">Link<span> Link caption</span></a>
</div>
--------------------------------
If placed closer to the 1st link, (overlapping enough to not break the hover) the span should stay visible because you're still over the #divlinks ; so just insert child layers.

10:58 pm on Aug 10, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 3, 2005
posts:24
votes: 0


I dont think there is any way to do this without any sort of script sry, of course it easy to do with a hover effect, but I don't think there is, or will ever be a way for css to recognize clicks.
2:51 am on Aug 11, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


There is a difference between a "drop-down menu" (like Suckerfish, which has been mentioned here already) and an accordion style menu. An accordion style menu opens options when a menu link is clicked, an event that css cannot handle. A drop menu opens options when a link is hovered, an event that css can handle.

If you want an accordion style menu that opens options with a link-click on the same page , you will, need to use JS or some other scripting language capable of capturing the mouse click event and processing it without reloading the page.

If, however, you want an accordion style menu that opens the sub menu on the destination page of the main menu link, CSS is perfectly capable of doing this.

Remember, the key difference here is on which page the sub menu opens. If it opens on the SAME page where you click the main menu link: javascript. If it opens on the destination page of the clicked main menu link: CSS.

For instructions on the first kind, see this thread [webmasterworld.com]. The code in message 4 uses javascript to open menu items on the same page.

Opening them on the destination page is simple, too. Simply assign each page a unique body id and each sub-menu (the nested UL) a unique id. Set all the sub menus to display:none. Then use the cascade to tell the browser, "when on the page with body id="one", style the ul with id="ul_one" as display:block. Repeat that code for each body/ul pair and you've got a pure css accordion menu that expands on the destination page....

html:
<body id="one">
...
<ul id="main">
<li><a href="#">Parent Link 1</a>
<ul class="sub" id="ul_one">
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</li>
<li><a href="#">Parent Link 2</a>
<ul class="sub" id="ul_two">
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
<li><a href="#">Link C</a></li>
</ul>
</li>
</ul>

css:
.sub{display:none;}
body#one ul#ul_one, body#two ul#ul_two {display:block;}

cEM

8:22 am on Aug 11, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 25, 2005
posts:31
votes: 0


Thanks cEM - that really clears it up. Just one question - a js accordian menu can be used in a vertical link stack, and will shift the links below downwards to create room for the submenu. Can you tell me whether this can be done with a CSS hover? - in suckerfish et al vertical stacks, the submenus all seem to open to the side.
10:02 am on Aug 11, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


shift the links below downwards to create room for the submenu. Can you tell me whether this can be done with a CSS hover?

The most "common" practice in creating drop menus is to use absolute positioning to place the sub_menu in a location beneath or beside the corresponding main link. When doing this, making the other links shift down would be very difficult, if not impossible. Because abs pos elements are removed from the flow and do not influence other elements on the page, you would have to explicitly move the rest of the menu when you hover that link. Depending on the structure, you might be able to accomplish this, by, for instance, setting a bottom margin equal to the sub-menu height on the main menu link when it is hovered. This would push the links that follow down and you could then slot the sub menu into that space with absolute positioning.

Another, perhaps easier approach, might be to use somthing other than abs pos to build the drop menu. Relative positioning might work better, since space is reserved in the flow for those elements. So if the hover brings the sub menu into display, and sets it with position:relative, it might work.

If you're just stacking the links and menus vertically, as in the accordion menu code, just don't use any positioning properties at all. That leaves all the list elements right in the flow and able to influence one another. When a sub menu is brought into display, the page will reflow around it. In other words, it would work EXACTLY like the accordion menu in the thread linked in the above post, except that hovering the link will open the menu, rather than clicking. Note, however, that this probably wouldn't be a very easy nor pleasant menu to use, since mouse hovers, including unintentional ones, would cause the menu to jump opan and closed, shifting things up and down. Still, you could try it and see hwo it works.

cEM

10:48 am on Aug 11, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 25, 2005
posts:31
votes: 0


Hmm, hadn't considered the 'jumpiness' of a hover driven accordian menu. Maybe its time to start learning a bit of js.

Thanks.

11:49 am on Aug 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 8, 2005
posts:122
votes: 0


Good point Kate, I don't like that "jumpiness" either, I think it can get a bit annoying for visitors of my page.

One of the reasons that I try to stay out of JS is because I have read that most search engines will not spider links that are contained inside a Java Script, therefore it will leave basically most of my content out for spidering.

I am no expert in any of these subjects so I would like to hear your opinions.

12:51 pm on Aug 11, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 25, 2005
posts:31
votes: 0


I think this thread that cEM mentioned before covers some of the js/spider issues, might be worth a look.

[webmasterworld.com...]

Btw cEM, if i do something based on that js for my site, do i need to credit? And more generally, is it wise to credit where something has been heavily based on something else (sorry if this is off topic)