www.webdeveloper.com
Results 1 to 3 of 3

Thread: Keep State Toggle Menu

  1. #1
    Join Date
    May 2003
    Location
    UK
    Posts
    220

    Keep State Toggle Menu

    Hi there,

    I've got the following code, which works ok. However, all my menu items are hidden on load (only menu headers are visible), and when they click the header, it opens ok. But when they click a menu item, ait loads the relevant page, but all menus are closed again.

    Is it possible to include a 'keep state' that will keep any menus that they have opened, opened on all subsequent pages.

    But I would then like any keep states deleted when they close the browser, so that any future visits reverts to all closed on the home page.

    Thanks very much/...

    Code:
    <script type="text/javascript">
    		<!--
    			function window.onload()
    			{
    				newBuildMenu.style.display = "none";
    				sportsMenu.style.display = "none";
    				genInfoMenu.style.display = "none";
    				departmentsMenu.style.display = "none";
    			}
    
    			function toggle( targetId )
    			{
    				if (document.getElementById)
    				{
    					target = document.getElementById( targetId );
    							if (target.style.display == "none")
    							{
    								target.style.display = "";
    							}
    							else
    							{
    								target.style.display = "none";
    							}
    				}
    			}
    		-->
    		</script>
    		<div class="menuHeader"><a href="/">Home</a></div>
    
    		<div class="line"></div>
    
    		<div class="menuHeader"><a href="#" onclick="toggle('newBuildMenu'); return false;" title="Show/hide this sub-menu ">New Build</a></div>
    			<ul id="newBuildMenu">
    				<li class="menuItem"><a href="/html/newbuild/">New Build Home</a></li>
    				<li class="menuItem"><a href="/html/newbuild/progress.asp">Progress Report</a></li>
    				<li class="menuItem"><a href="/html/newbuild/imagegallery.asp">Image Gallery</a></li>
    				<li class="menuItem"><a href="/html/newbuild/kepnewsletter.asp">KEP Newsletter</a></li>
    			</ul>
    		<div class="line"></div>
    
    		<div class="menuHeader"><a href="#" onclick="toggle('sportsMenu'); return false;" title="Show/hide this sub-menu ">Sports College</a></div>
    			<ul id="sportsMenu">
    				<li class="menuItem"><a href="/html/sportscollege/">Sports College Home</a></li>
    				<li class="menuItem"><a href="/html/sportscollege/sportsresults.asp">Sports Results</a></li>
    				<li class="menuItem"><a href="/html/sportscollege/clubssocieties.asp">Clubs &amp; Societies</a></li>
    				<li class="menuItem"><a href="/html/sportscollege/giftedtalented.asp">Gifted &amp; Talented</a></li>
    				<li class="menuItem"><a href="/html/sportscollege/community.asp">Community</a></li>
    			</ul>
    		<div class="line"></div>
    
    		<div class="menuHeader"><a href="#" onclick="toggle('genInfoMenu'); return false;" title="Show/hide this sub-menu ">General Information</a></div>
    			<ul id="genInfoMenu">
    				<li class="menuItem"><a href="/html/newsalerts.asp">News Alerts</a></li>
    				<li class="menuItem"><a href="/html/calendar.asp">School Calendar</a></li>
    				<li class="menuItem"><a href="/html/homelearning/">Home Learning</a></li>
    				<li class="menuItem"><a href="/html/prospectus.asp">Prospectus</a></li>
    				<li class="menuItem"><a href="/html/courier.asp">Courier</a></li>
    				<li class="menuItem"><a href="/html/headsmessage.asp">Head's Message</a></li>
    			</ul>
    		<div class="line"></div>
    
    		<div class="menuHeader"><a href="#" onclick="toggle('departmentsMenu'); return false;" title="Show/hide this sub-menu ">Departments</a></div>
    			<ul id="departmentsMenu">
    				<li class="menuItem"><a href="/html/departments/">Departments Home</a></li>
    				<li class="menuItem"><a href="/html/departments/sixthform/">Sixth Form</a></li>
    				<li class="menuItem"><a href="/html/departments/aen/">Additional Educational Needs</a></li>
    				<li class="menuItem"><a href="/html/departments/artdesign/">Art &amp; Design</a></li>
    				<li class="menuItem"><a href="/html/departments/business/">Business Studies</a></li>
    				<li class="menuItem"><a href="/html/departments/careers/">Careers</a></li>
    				<li class="menuItem"><a href="/html/departments/citizenship/">Citizenship</a></li>
    				<li class="menuItem"><a href="/html/departments/designtech/">Design Technology</a></li>
    				<li class="menuItem"><a href="/html/departments/english/">English</a></li>
    				<li class="menuItem"><a href="/html/departments/geography/">Geography</a></li>
    				<li class="menuItem"><a href="/html/departments/hsc/">Health &amp; Social Care</a></li>
    				<li class="menuItem"><a href="/html/departments/history/">History</a></li>
    				<li class="menuItem"><a href="/html/departments/humanities/">Humanities</a></li>
    				<li class="menuItem"><a href="/html/departments/ict/">Information Technology</a></li>
    				<li class="menuItem"><a href="/html/departments/l&t/">Leusire &amp; Tourism</a></li>
    				<li class="menuItem"><a href="/html/departments/mfl/">Modern Languages</a></li>
    				<li class="menuItem"><a href="/html/departments/mathematics/">Mathematics</a></li>
    				<li class="menuItem"><a href="/html/departments/music/">Music</a></li>
    				<li class="menuItem"><a href="/html/departments/pe/">Physical Education</a></li>
    				<li class="menuItem"><a href="/html/departments/re/">Religious Education</a></li>
    				<li class="menuItem"><a href="/html/departments/science/">Science</a></li>
    			</ul>
    		<div class="line"></div>
    
    		<div class="menuHeader"><a href="/html/contactus.asp">Contact Us</a></div>
    		<div class="menuHeader"><a href="/html/links.asp">Links</a></div>
    Last edited by ldoodle; 09-26-2006 at 09:00 AM.

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    You could do that with cookies.

  3. #3
    Join Date
    May 2006
    Posts
    69
    Best way I can think of is to pass a variable in the URL name.

    For example:
    Assume your menu system has 4 menus. Listed 1 - 4.

    Clicking menu 1, opens menu 1. Clicking an item in the menu, takes you to a different page.
    You would have to add to the code something like:
    li class="menuItem"><a href="/html/departments/?1">Departments Home</a></li>
    ( assuming that's in menu 1. )

    In the departments page code you'd have:

    location.search.substring(1)
    Which will read everything after the '?' then use that value in your javascript menu to reopen the menu.

    One adantage is that you don't need cookies and it resets when you leave the site.
    Although, it doesn't work offline in IE. But online is fine.

    Hope that helps.

    Jason.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles