By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,101 Members | 1,463 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,101 IT Pros & Developers. It's quick & easy.

DHTML Tree Menu That Remembers Open Subnav

P: n/a

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="abdominoplastyActuator" class="actuator">&nbsp;&nbsp;&nbsp;Abdominoplasty< br>
&nbsp;&nbsp;&nbsp;(Tummy Tuck)</a>
<ul id="abdominoplastyMenu" class="menu">
<li><a href="topics/abdominoplasty_procedure.html" class="actuator2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;Procedure</a></li>
<li><a href="topics/abdominoplasty_recovery.html" class="actuator2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;Recovery</a></li>
</ul>
</li>
</ul>

<script language="javascript" type="text/javascript">
if (!document.getElementById)
document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);

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

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

actuator.onclick = function() {
var display = menu.style.display;
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("surgicalMenu", "surgicalActuator");
initializeMenu("abdominoplastyMenu", "abdominoplastyActuator");
initializeMenu("blepharoplastyMenu", "blepharoplastyActuator");
initializeMenu("invasiveMenu", "invasiveActuator");
initializeMenu("botoxMenu", "botoxActuator");
initializeMenu("breastaugmentMenu", "breastaugmentActuator");
initializeMenu("breastliftMenu", "breastliftActuator");
initializeMenu("breastreductionMenu", "breastreductionActuator");
initializeMenu("browliftMenu", "browliftActuator");
initializeMenu("buttockliftMenu", "buttockliftActuator");
initializeMenu("chinsurgeryMenu", "chinsurgeryActuator");
initializeMenu("faceliftMenu", "faceliftActuator");
initializeMenu("facialimplantsMenu", "facialimplantsActuator");
initializeMenu("hairlossMenu", "hairlossActuator");
initializeMenu("liposuctionMenu", "liposuctionActuator");
initializeMenu("lowerbodyliftMenu", "lowerbodyliftActuator");
initializeMenu("upperarmliftMenu", "upperarmliftActuator");
initializeMenu("rhinoplastyMenu", "rhinoplastyActuator");
initializeMenu("otoplastyMenu", "otoplastyActuator");
initializeMenu("thighliftMenu", "thighliftActuator");
initializeMenu("celluliteMenu", "celluliteActuator");
initializeMenu("camouflagecosmeticsMenu", "camouflagecosmeticsActuator");
initializeMenu("chemicalpeelMenu", "chemicalpeelActuator");
initializeMenu("laserhairremovalMenu", "laserhairremovalActuator");
initializeMenu("laserskinsurgeryMenu", "laserskinsurgeryActuator");
initializeMenu("lasersurgeryMenu", "lasersurgeryActuator");
initializeMenu("microdermabrasionMenu", "microdermabrasionActuator");
initializeMenu("schlerotherapyMenu", "schlerotherapyActuator");
initializeMenu("skinmanagementMenu", "skinmanagementActuator");
initializeMenu("softtissuefillersMenu", "softtissuefillersActuator");
initializeMenu("varicoseveinsMenu", "varicoseveinsActuator");

}

</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

Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
> 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?


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.
Jul 23 '05 #2

P: n/a
unurban wrote:
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="abdominoplastyActuator" class="actuator">&nbsp;&nbsp;&nbsp;Abdominoplasty< br>
&nbsp;&nbsp;&nbsp;(Tummy Tuck)</a>
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?

<ul id="abdominoplastyMenu" class="menu">
<li><a href="topics/abdominoplasty_procedure.html" class="actuator2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;Procedure</a></li>
<li><a href="topics/abdominoplasty_recovery.html" class="actuator2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;Recovery</a></li>
</ul>
</li>
</ul>

<script language="javascript" type="text/javascript">
if (!document.getElementById)
document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);

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

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

actuator.onclick = function() {
var display = menu.style.display;
menu.style.display = (display == "block") ? "none" : "block";

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.display = (display == "none") ? "" : "none";

That way you don't care what the initial display property is, you just
know it's not 'none'.
return false;
}
}
window.onload = function() {
initializeMenu("surgicalMenu", "surgicalActuator"); [...] initializeMenu("microdermabrasionMenu", "microdermabrasionActuator");
initializeMenu("schlerotherapyMenu", "schlerotherapyActuator");
initializeMenu("skinmanagementMenu", "skinmanagementActuator");
initializeMenu("softtissuefillersMenu", "softtissuefillersActuator");
initializeMenu("varicoseveinsMenu", "varicoseveinsActuator");

}

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


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:hover {background-color: #eeeeff;}

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

// Handle a click
function mClick(n) {
hideULs( n.parentNode, n );
var els = n.getElementsByTagName('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.getElementById(m).childNodes;
var x, i = els.length;
while ( i-- ) {
x = els[i];
if ( 'LI' == x.nodeName ) {
x.onclick = function () { mClick(this); };
}
}
hideULs(x.parentNode);
// 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.getElementsByTagName('UL');
j = y.length;
while ( j-- ) { y[j].style.display = 'none'; };
}
}
}

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

</script>

<ul id="menuList">
<li class="menubar"><span id="M-0"
class="actuator">Abdominoplasty<br>(Tummy Tuck)</span>
<ul id="abdominoplastyMenu" class="menu">
<li><a href="topics/abdominoplasty_procedure.html"
class="actuator2">Procedure</a></li>
<li><a href="topics/abdominoplasty_recovery.html"
class="actuator2">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_procedure.html"
class="actuator2">Procedure</a></li>
<li><a href="topics/lowerbodylift_recovery.html"
class="actuator2">Recovery</a></li>
</ul>
</li>
<li class="menubar"><span class="actuator">Close menus</span></li>
</ul>
--
Rob
Jul 23 '05 #3

P: n/a
RobG wrote:
[...]
<script type="text/javascript">

// Handle a click
function mClick(n) {
hideULs( n.parentNode, n );
var els = n.getElementsByTagName('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
}
------^

Agggghhh!! Seem to have dropped a closing brace... sorry.
}
}

[...]
--
Rob
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.