Welcome to WebmasterWorld Guest from 54.161.116.225

Forum Moderators: open

Message Too Old, No Replies

collapse vertical menus

     
7:12 am on Sep 7, 2005 (gmt 0)

New User

10+ Year Member

joined:Sept 7, 2005
posts:6
votes: 0


Hi,

I know zero javascript so please take pity on my inability to do this on my own, lord knows I tried.

I have a simple webpage with a simple vertical menu.

All I would like to do is to collapse the parent list items (the ones with the dark background) and then have them expand when clicked. I *think* javascript is the way to go with this but I have not a clue how to accomplish this and none of the scripts that I have found allow me to retain the format of my menu. If anyone can point me in the way of a good tutorial, or can help create the javascript, I would appreciate it.

Thanks,

Mark

[edited by: jatar_k at 5:06 pm (utc) on Sep. 7, 2005]
[edit reason] no urls thanks [/edit]

11:46 am on Sept 7, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


Personal URL's aren't allowed in the TOS [webmasterworld.com], so here's a quick snip of the relevant HTML for when the URL is removed later...

<ul> 
<li class="Main"><a href="#content">Butterfly</a>
<ul>
<li class="Item"><a href="#">Biology</a></li>
<li class="Item"><a href="#">Model</a></li>
</ul>
</li>

<li class="Main"><a href="#junk">Salmon</a>
<ul>
<li class="Item"><a href="#">Biology</a></li>
<li class="Item"><a href="#">Model</a></li>
</ul>
</li>

<li class="Main"><a href="#">Extinction Modeling</a>
<ul>
<li class="Item"><a href="#">Biology</a></li>
<li class="Item"><a href="#">Model</a></li>
</ul>
</li>
</ul>

11:48 am on Sept 7, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


Anyway, here's a solution
(although there's a simpler one available, if you don't mind putting onclick handlers on all the main links)

HTML-------------------------------------------------------------
Set all hrefs in class="Main" links to: "javascript:void 0;"
-----------------------------------------------------------------

<li class="Main"><a href="javascript:void 0;">Butterfly</a>

CSS-------------------------------------------------------------
Add this rule - for ULs within 'Main' LIs
-----------------------------------------------------------------

.Main ul
{
display: none;
}

JS--------------------------------------------------------------

! Pipe chars, , will need to be corrected

-----------------------------------------------------------------

getEventSrc = window.Event 
? function(e){var targ=e.target;return targ.nodeType==1?targ:targ.parentNode}
: function() {return event.srcElement}

document.onclick = function(e)
{
var src, regName, subListS;
src = getEventSrc(e);
if(/UL/i.test(src.tagName)) return;
src = getAncestor(src,'tagName',/li/i)
if(! /\bmain\b/i.test(src.className)) return;

subListS = src.getElementsByTagName('ul')[0].style;
subListS.display = (!subListS.display )? 'block' : '';
}

function getAncestor(elm,prop,regVal, excludeElm)
{
if(excludeElm) elm = elm.parentNode;
while(elm)
{
if(regVal.test(elm[prop])) return elm;
elm = elm.parentNode;
}
}

[edited by: jatar_k at 4:20 pm (utc) on Oct. 5, 2005]

12:12 pm on Sept 7, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


<< CHANGE >>

I changed my mind about something, so I'm going for something simpler, easier to understand (, and less likely to go bad).

This version also leaves the menu fully open when JS is disabled in the browser.

HTML-------------------------------------------------------------
Set all links that are 'headers' thusly..
-----------------------------------------------------------------

<li class="Main"><a href="#" onclick="togSub(this); return false;">Butterfly</a>

CSS-------------------------------------------------------------
Add this rule
( applies to the sublists when the HTML elm has a class added - via the script )
-----------------------------------------------------------------

html.scriptEnabled .Main ul
{
display: none;
}

JS--------------------------------------------------------------

Here's the script
-----------------------------------------------------------------

document.getElementsByTagName('html')[0].className = "scriptEnabled"; 

function togSub(link)
{
var subListS = link.parentNode.getElementsByTagName('ul')[0].style;
subListS.display = (!subListS.display )? 'block' : '';
}

10:04 pm on Sept 7, 2005 (gmt 0)

New User

10+ Year Member

joined:Sept 7, 2005
posts:6
votes: 0


Sorry about the TOS violation, and thanks for not ripping into me for it.

Bernard, your solution looks like exactly what I need. I will try it out later this evening! Thanks again!

10:08 pm on Sept 7, 2005 (gmt 0)

New User

10+ Year Member

joined:Sept 7, 2005
posts:6
votes: 0


and by the way, the idea to leave the menus open when js is disabled is a great one. i was wondering how i was going to solve that issue.

thanks again!

5:16 am on Sept 8, 2005 (gmt 0)

New User

10+ Year Member

joined:Sept 7, 2005
posts:6
votes: 0


WOW! easy and it works beautifully! This is exactly what I was looking for. Thanks so much.

Mark

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members