SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict rikmg's Avatar
    Join Date
    Jan 2002
    Location
    South Yorkshire - UK
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript menu problem/question



    I have built a menu using CSS and javascript, however I need it to remain in open state once clicked on a sub menu item within a particular section,

    It keeps closing, anyone offer me help/advice, please?

    see code below:

    thanx.

    <link href="css/nav.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" type="text/JavaScript">
    var last_expanded = '';
    function showHide(id)
    {
    var obj = document.getElementById(id);
    var status = obj.className;
    if (status == 'hide') {
    if (last_expanded != '') {
    var last_obj = document.getElementById(last_expanded);
    last_obj.className = 'hide';
    }
    obj.className = 'show';
    last_expanded = id;
    } else {
    obj.className = 'hide';
    }
    }
    </script>
    <table valign=top cellspacing=2 cellpadding=0 border=0 width=190>

    <tr>
    <td valign=top height="25px" align=left>
    <a href="#" class="menu1" onclick="showHide('mymenu1')">Commercial Services</a>
    <div id="mymenu1" class="hide">
    <a href="#" class="submenu">Corporate Finance</a>
    <a href="#" class="submenu">Projects & Commercial</a>
    <a href="#" class="submenu">IT & Telecoms</a>
    <a href="#" class="submenu">Dispute Resolutions</a>
    <a href="#" class="submenu">Commercial Property</a>
    <a href="#" class="submenu">Property Litigation</a>
    <a href="#" class="submenu">Employment</a>
    <a href="#" class="submenu">Debt Recovery</a>
    <a href="#" class="submenu">The Business Portal</a>
    </div>
    <a href="#" class="menu1" onclick="showHide('mymenu2')">Non - Commercial Services</a>
    <div id="mymenu2" class="hide">
    <a href="#" class="submenu">Wills & Estates</a>
    <a href="#" class="submenu">Personal Injury</a>
    <a href="#" class="submenu">Medical Negligence</a>
    <a href="#" class="submenu">Residential Property</a>
    <a href="#" class="submenu">Family Childcare</a>
    </div>
    <a href="#" class="menu1">Legal News</a>
    <div id="mymenu3" class="hide">
    </div>
    <a href="#" class="menu1">Office Locations</a>
    <div id="mymenu4" class="hide">
    </div>
    <a href="#" class="menu1" onclick="showHide('mymenu5')">Press & Events</a>
    <div id="mymenu5" class="hide">
    <a href="#" class="submenu">Events</a>
    <a href="#" class="submenu">Events & PR</a>
    <a href="#" class="submenu">Press Articles</a>
    <a href="#" class="submenu">Free Advice</a>
    </div>
    <a href="#" class="menu1">Contact Us</a>
    <a href="#" class="menu1" onclick="showHide('mymenu6')">Terms & Privacy Policy</a>
    <div id="mymenu6" class="hide">
    <a href="#" class="submenu">Terms</a>
    <a href="#" class="submenu">Client Care</a>
    <a href="#" class="submenu">Privacy Policy</a>
    <a href="#" class="submenu">Disclaimer</a>
    </div>
    </table>
    Affordable Web Design, UK
    http://www.rikmg.co.uk

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you have there too much css, needed just by javascript. Try it without all onclick, class and useless id. For example this code bellow has the same function, and works also when js is off.

    Code:
    <style type="text/css">
    .hide{display:none}
    a,.show{display:block}
    </style>
    <script type="text/javascript">
    function showHide(){
    var jsarea=document.getElementById('jsarea');
    var div=jsarea.getElementsByTagName('div');
    for(var i=0;i<div.length;i++){
    div[i].className='hide'
    }
    var lnk=jsarea.getElementsByTagName('a');
    for(var i=0;i<lnk.length;i++){
    lnk[i].onclick=function(){
    var sbl;
    if(this.nextSibling.nodeType!=3){sbl=this.nextSibling;}//gecko whitespace help
    else{sbl=this.nextSibling.nextSibling;}
    if(sbl.nodeName=='DIV'){
    sbl.className=sbl.className=='show'?'hide':'show';
    return false;
    }
    else{return true}
    }
    }
    }
    window.onload=showHide
    </script>
    <div id="jsarea">
    <a href="#">Commercial Services</a>
    <div>
    <a href="#">Corporate Finance</a>
    <a href="#">Projects & Commercial</a>
    <a href="#">IT & Telecoms</a>
    <a href="#">Dispute Resolutions</a>
    <a href="#">Commercial Property</a>
    <a href="#">Property Litigation</a>
    <a href="#">Employment</a>
    <a href="#">Debt Recovery</a>
    <a href="#">The Business Portal</a>
    </div>
    <a href="#">Non - Commercial Services</a>
    <div>
    <a href="#">Wills & Estates</a>
    <a href="#">Personal Injury</a>
    <a href="#">Medical Negligence</a>
    <a href="#">Residential Property</a>
    <a href="#">Family Childcare</a>
    </div>
    <a href="#">Legal News</a>
    <a href="#">Office Locations</a>
    <a href="#">Press & Events</a>
    <div>
    <a href="#">Events</a>
    <a href="#">Events & PR</a>
    <a href="#">Press Articles</a>
    <a href="#">Free Advice</a>
    </div>
    <a href="#">Contact Us</a>
    <a href="#">Terms & Privacy Policy</a>
    <div>
    <a href="#">Terms</a>
    <a href="#">Client Care</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Disclaimer</a>
    </div>

  3. #3
    SitePoint Addict rikmg's Avatar
    Join Date
    Jan 2002
    Location
    South Yorkshire - UK
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for the reply, will give it a whirl...
    Affordable Web Design, UK
    http://www.rikmg.co.uk

  4. #4
    SitePoint Addict rikmg's Avatar
    Join Date
    Jan 2002
    Location
    South Yorkshire - UK
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried the above, works fine, however when clicking to another page the nav closes, what I need to sort out is for it to remain open, i.e for it to remember which section its actually in?

    thanx for your help though...
    Affordable Web Design, UK
    http://www.rikmg.co.uk

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Session Cookies

    I am working on the same problem. The way to do it is to use session cookies. I am still working on a solution but I will give you what I have so far.

    Create a session cookie
    Create a new variable to check if the state of the menu needs to be remembered
    Pass into the cookie your menu
    When a page reloads or you navigate to a new page, you check the remember variable and load the menu from the cookie if true.

    I am having trouble figuring out what to store in the cookie. Once I get that figured out I'll let you know. I hope to complete the project today.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Progress

    I have ran into a bit of mental block but have made progress. I am using Daniel Nolan's expanding/contracting javascript function. http://www.dnolan.com/code/js/listmenu/
    It lacks persistence which is what this thread is addressing. There are three classes, treemenu, treenode, and treenodeopen.

    Code:
    titles = getElementsByClassName(document, "*", "treeopen");
    
    /*these are pretty much the functions used in Dynamic Drives slashdot menu*/
    
    //store the current menu state
    function store() {
    	var openState = new Array();
    	for (var i in titles) {
    	if (titles[i].className == "treeopen")
    	openState.push(i);
    	}
    	setCookie("menu", openState.join(",") , 30);
    }
    
    //restore the last menu state
    function restore() {
    	if(getCookie("menu")!=null){
    	var openState = getCookie("menu").split(",");
    	for (var i in openState) {
    	titles[openState[i]].className="treeopen";
    	}
      }
    }
    The first function above stores in a cookie any treeopen class. The second function is supposed to restore the menu after a page refresh, etc... since the openState array is holding all treeopen elements, I would like to do a find and replace operation, using treenodeopen. That way the menu will stay open. Does anyone foresee pitfalls with this approach?

    Thanks


Bookmarks

Posting Permissions

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