DHTML Tree Menu That Remembers Open Subnav

[unurban]

I have a javascript menu based off of unordered lists that only shows
the subnav links when you click on the main nav links.

is there a way to keep any subnav items open after you click on a link
and are transferred to a new page?


Here is some of the code:


Code:
--------------------
<ul id="menuList">
<li class="menubar" ><a href="#" id="abdominopla styActuator" class="actuator ">&nbsp;&nbsp;& nbsp;Abdominopl asty<br>
&nbsp;&nbsp;&nb sp;(Tummy Tuck)</a>
<ul id="abdominopla styMenu" class="menu">
<li><a href="topics/abdominoplasty_ procedure.html" class="actuator 2">&nbsp;&nbsp; &nbsp;&nbsp;&nb sp;&nbsp;Proced ure</a></li>
<li><a href="topics/abdominoplasty_ recovery.html" class="actuator 2">&nbsp;&nbsp; &nbsp;&nbsp;&nb sp;&nbsp;Recove ry</a></li>
</ul>
</li>
</ul>

<script language="javas cript" type="text/javascript">
if (!document.getE lementById)
document.getEle mentById = function() { return null; }

function initializeMenu( menuId, actuatorId) {
var menu = document.getEle mentById(menuId );
var actuator = document.getEle mentById(actuat orId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I'm too tired

actuator.onclic k = function() {
var display = menu.style.disp lay;
menu.style.disp lay = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu( "surgicalMe nu", "surgicalActuat or");
initializeMenu( "abdominoplasty Menu", "abdominoplasty Actuator");
initializeMenu( "blepharoplasty Menu", "blepharoplasty Actuator");
initializeMenu( "invasiveMe nu", "invasiveActuat or");
initializeMenu( "botoxMenu" , "botoxActuator" );
initializeMenu( "breastaugmentM enu", "breastaugmentA ctuator");
initializeMenu( "breastliftMenu ", "breastliftActu ator");
initializeMenu( "breastreductio nMenu", "breastreductio nActuator");
initializeMenu( "browliftMe nu", "browliftActuat or");
initializeMenu( "buttockliftMen u", "buttockliftAct uator");
initializeMenu( "chinsurgeryMen u", "chinsurgeryAct uator");
initializeMenu( "faceliftMe nu", "faceliftActuat or");
initializeMenu( "facialimplants Menu", "facialimplants Actuator");
initializeMenu( "hairlossMe nu", "hairlossActuat or");
initializeMenu( "liposuctionMen u", "liposuctionAct uator");
initializeMenu( "lowerbodyliftM enu", "lowerbodyliftA ctuator");
initializeMenu( "upperarmliftMe nu", "upperarmliftAc tuator");
initializeMenu( "rhinoplastyMen u", "rhinoplastyAct uator");
initializeMenu( "otoplastyMenu" , "otoplastyActua tor");
initializeMenu( "thighliftMenu" , "thighliftActua tor");
initializeMenu( "celluliteMenu" , "celluliteActua tor");
initializeMenu( "camouflagecosm eticsMenu", "camouflagecosm eticsActuator") ;
initializeMenu( "chemicalpeelMe nu", "chemicalpeelAc tuator");
initializeMenu( "laserhairremov alMenu", "laserhairremov alActuator");
initializeMenu( "laserskinsurge ryMenu", "laserskinsurge ryActuator");
initializeMenu( "lasersurgeryMe nu", "lasersurgeryAc tuator");
initializeMenu( "microdermabras ionMenu", "microdermabras ionActuator");
initializeMenu( "schlerotherapy Menu", "schlerotherapy Actuator");
initializeMenu( "skinmanagement Menu", "skinmanagement Actuator");
initializeMenu( "softtissuefill ersMenu", "softtissuefill ersActuator");
initializeMenu( "varicoseveinsM enu", "varicoseveinsA ctuator");

}

</script>
--------------------


--
unurban
------------------------------------------------------------------------
unurban's Profile: http://www.highdots.com/forums/member.php?userid=216
View this thread: http://www.highdots.com/forums/showthread.php?t=1497957

[Douglas Crockford]

Re: DHTML Tree Menu That Remembers Open Subnav

> I have a javascript menu based off of unordered lists that only shows[color=blue]
> the subnav links when you click on the main nav links.
>
> is there a way to keep any subnav items open after you click on a link
> and are transferred to a new page?[/color]

This is a matter of state. Traditionally, the web is stateless.
However, to remember changes from page to page, you need a system
which is stateful. Cookies are a half-assed way of keeping state on
the client side. In many cases, it is better to keep the state on the
server side.

The Ajax techniques can be used to send state between the client and
server without requiring page replacement. JSON can be used to
serialize data structures for transmission back and forth.

[RobG]

Re: DHTML Tree Menu That Remembers Open Subnav

unurban wrote:[color=blue]
> I have a javascript menu based off of unordered lists that only shows
> the subnav links when you click on the main nav links.
>
> is there a way to keep any subnav items open after you click on a link
> and are transferred to a new page?
>
>
> Here is some of the code:
>
>
> Code:
> --------------------
> <ul id="menuList">
> <li class="menubar" ><a href="#" id="abdominopla styActuator" class="actuator ">&nbsp;&nbsp;& nbsp;Abdominopl asty<br>
> &nbsp;&nbsp;&nb sp;(Tummy Tuck)</a>[/color]

You shouldn't be using all those &nbsp; characters, use styles. There
is also no need to subvert the A elements this way, why not just use a
span?

[color=blue]
> <ul id="abdominopla styMenu" class="menu">
> <li><a href="topics/abdominoplasty_ procedure.html" class="actuator 2">&nbsp;&nbsp; &nbsp;&nbsp;&nb sp;&nbsp;Proced ure</a></li>
> <li><a href="topics/abdominoplasty_ recovery.html" class="actuator 2">&nbsp;&nbsp; &nbsp;&nbsp;&nb sp;&nbsp;Recove ry</a></li>
> </ul>
> </li>
> </ul>
>
> <script language="javas cript" type="text/javascript">
> if (!document.getE lementById)
> document.getEle mentById = function() { return null; }
>
> function initializeMenu( menuId, actuatorId) {
> var menu = document.getEle mentById(menuId );
> var actuator = document.getEle mentById(actuat orId);
>
> if (menu == null || actuator == null) return;
>
> //if (window.opera) return; // I'm too tired
>
> actuator.onclic k = function() {
> var display = menu.style.disp lay;
> menu.style.disp lay = (display == "block") ? "none" : "block";[/color]


The default display for LI is 'list-item' (for those browsers that
properly implement CSS 2), so the first time your script runs, the test
is evaluated to false, the LI's UL child has it's display is set to
'block' and nothing appears to happen. The second time it is clicked,
its display property is set to 'none' and the LI disappears.

This could be better as:

menu.style.disp lay = (display == "none") ? "" : "none";

That way you don't care what the initial display property is, you just
know it's not 'none'.
[color=blue]
> return false;
> }
> }
> window.onload = function() {
> initializeMenu( "surgicalMe nu", "surgicalActuat or");[/color]
[...][color=blue]
> initializeMenu( "microdermabras ionMenu", "microdermabras ionActuator");
> initializeMenu( "schlerotherapy Menu", "schlerotherapy Actuator");
> initializeMenu( "skinmanagement Menu", "skinmanagement Actuator");
> initializeMenu( "softtissuefill ersMenu", "softtissuefill ersActuator");
> initializeMenu( "varicoseveinsM enu", "varicoseveinsA ctuator");
>
> }
>
> </script>
> --------------------
>
>[/color]

This seems a verbose way of setting up your menu. Try the following (if
your menus are single level, more work required if multi-level). You
could store the ID of the menu item that was clicked on in a cookie if
its display property is set to '', other wise clear the cookie. When
loading the page anew, as a last onload action, read the cookie and if
it has a menu item ID, run mClick() using the appropriate element.

If there is no ID in the cookie, don't bother since all the menus were
(probably) collapsed.

As Douglas said, it's a dinky bit of code, but it's pretty harmless so
no loss if it doesn't work every time.

I've not included required feature testing for getElementById/TagName
or style object. IE does not seem to support CSS hover on spans.


<style type="text/css">

body { font-family: verdana, sans-serif;}

a:visited { color: #003366; }
a:hover { color: #003366; background-color: #eeeeff; }
a:active { color: #003366; }
a:link { color: #003366; }

li {
padding: 5px 0px 0px 15px;
font-size: 90%;
}

..actuator {
cursor: pointer;
font-weight: bold;
list-style-image: url(ball.gif);
color: #003366;
padding-bottom: 5px;
text-align: right;
}

..actuator:hove r {background-color: #eeeeff;}

</style>
<script type="text/javascript">

// Handle a click
function mClick(n) {
hideULs( n.parentNode, n );
var els = n.getElementsBy TagName('UL');
var x, i = els.length;
while ( i-- ) {
x = els[i]
if ( 'none' == x.style.display ) {
x.style.display = '';
// Put item ID into cookie
} else {
x.style.display = 'none';
// Clear item ID from cookie
}
}

// Attach click to UL's LI childnodes
function initMenu(m) {
var els = document.getEle mentById(m).chi ldNodes;
var x, i = els.length;
while ( i-- ) {
x = els[i];
if ( 'LI' == x.nodeName ) {
x.onclick = function () { mClick(this); };
}
}
hideULs(x.paren tNode);
// Read cookie, if has menu item ID
// Run mClick(document .getElementById (menuItemID))
}

// Hide all the ULs except those below t
function hideULs(p, t){
var els = p.childNodes;
var x, y, j, i = els.length;
while ( i-- ) {
x = els[i];
if ( t != x && 'LI' == x.nodeName ) {
y = x.getElementsBy TagName('UL');
j = y.length;
while ( j-- ) { y[j].style.display = 'none'; };
}
}
}

window.onload = function() { initMenu('menuL ist')};

</script>

<ul id="menuList">
<li class="menubar" ><span id="M-0"
class="actuator ">Abdominoplast y<br>(Tummy Tuck)</span>
<ul id="abdominopla styMenu" class="menu">
<li><a href="topics/abdominoplasty_ procedure.html"
class="actuator 2">Procedure </a></li>
<li><a href="topics/abdominoplasty_ recovery.html"
class="actuator 2">Recovery</a></li>
</ul>
</li>
<li class="menubar" ><span id="M-1"
class="actuator ">Lower body lift<br>(Hip lift)</span>
<ul class="menu">
<li><a href="topics/lowerbodylift_p rocedure.html"
class="actuator 2">Procedure </a></li>
<li><a href="topics/lowerbodylift_r ecovery.html"
class="actuator 2">Recovery</a></li>
</ul>
</li>
<li class="menubar" ><span class="actuator ">Close menus</span></li>
</ul>


--
Rob

[RobG]

Re: DHTML Tree Menu That Remembers Open Subnav

RobG wrote:
[...]
[color=blue]
> <script type="text/javascript">
>
> // Handle a click
> function mClick(n) {
> hideULs( n.parentNode, n );
> var els = n.getElementsBy TagName('UL');
> var x, i = els.length;
> while ( i-- ) {
> x = els[i]
> if ( 'none' == x.style.display ) {
> x.style.display = '';
> // Put item ID into cookie
> } else {
> x.style.display = 'none';
> // Clear item ID from cookie[/color]

}
------^

Agggghhh!! Seem to have dropped a closing brace... sorry.
[color=blue]
> }
> }
>[/color]
[...]


--
Rob