Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts

    expandable menu help

    hi, i got a expandable menu that is working. i wonder if there is any way to make the links show as html and css if the user has disabled javascript

    i

    my code including javascript and css

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>


    <script language="JavaScript" type="text/JavaScript">
    <!--
    menu_status = new Array();

    function showHide(theid){
    if (document.getElementById) {
    var switch_id = document.getElementById(theid);

    if(menu_status[theid] != 'show') {
    switch_id.className = 'show';
    menu_status[theid] = 'show';
    }else{
    switch_id.className = 'hide';
    menu_status[theid] = 'hide';
    }
    }
    }

    //-->
    </script>

    <style type="text/css">
    .menu1{
    margin-left:25px;
    padding-left:20px;
    padding-top:2px;
    padding-bottom: 2px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 20px;
    width: 200px;
    background-color: #03C;
    border: thin solid #FFF;
    }


    .submenu{
    background-image: url(images/submenu.gif);
    display: block;
    height: 19px;
    margin-left: 38px;
    padding-top: 2px;
    padding-left: 7px;
    color: #333333;
    }

    .hide{
    display: none;
    }


    .show{
    display: block;
    }


    </style>


    </head>




    <body>


    <a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="hide">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
    <div id="mymenu4" class="hide">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
    <div id="mymenu5" class="hide">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>



    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    _________________________
    Devis comparatif mutuelle sante |Comparateur mutuelles sante |Comparer comparatif mutuel

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I dont know what that was supposed to tell me?

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    You could set them to be visible by default, then hide them as appropriate with JS as soon as the page loads.

    That's the only way I can think of doing it..

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    note that i want all menus and submenus visible as html and css if
    javascript is disabled
    i would appreciate some step by step instructions if possible
    Last edited by kimboslice; 12-07-2009 at 03:01 PM.

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Set all the class names of the divs to "show" in the HTML. Then apply a function like this:

    Code:
    var divs=document.getElementsByTagName("div");
    var menudivs=[];
    
    for(i=0;i<divs.length;i++) {
    if(divs.className.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
    }
    
    //menudivs is now an array of all the menu divs.
    
    //hide them:
    
    function hideDivs() {
    for(i=0;i<menudivs.length;i++) {
    menudivs[i].className="hide";
    }
    }
    
    window.addEventListener("load",hideDivs,false);
    
    //or in case you want to support IE for some reason:
    
    window.attachEvent("onload",hideDivs);

  • #7
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    thanks gus but i cant get that code to work, if i set all divs to show the submenus
    will be visible all the time and im not getting them to expand.

  • #8
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    There are some errors in it:

    Code:
    for(i=0;i<divs.length;i++) {
    if(divs.className.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
    }
    Should be

    Code:
    for(i=0;i<divs.length;i++) {
    if(divs[i].id.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
    }
    Also, put it after the menu so it doesn't try to reference the menu elements before they exist.

    This is the code I have working:

    Code:
    ...
    
    [menu divs]
    
    <script type="text/javascript">
    menu_status = new Array();
    
    function showHide(theid){
    var switch_id = document.getElementById(theid);
    
    if(menu_status[theid] != 'show') {
    switch_id.className = 'show';
    menu_status[theid] = 'show';
    } else {
    switch_id.className = 'hide';
    menu_status[theid] = 'hide';
    }
    }
    
    var divs=document.getElementsByTagName('div');
    var menudivs=[];
    
    for(i=0;i<divs.length;i++) {
    if(divs[i].id.indexOf('mymenu')!=-1) menudivs.push(divs[i]);
    }
    
    
    function hideDivs() {
    for(i=0;i<menudivs.length;i++) {
    menudivs[i].className='hide';
    menu_status[menudivs[i]]='hide';
    }
    }
    
    window.addEventListener('load',hideDivs,false);
    //window.attachEvent('onload',hideDivs) - add this within an "if IE" statement
    </script>
    
    </body>
    </html>
    Last edited by gusblake; 12-07-2009 at 03:51 PM.

  • #9
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    thanks, here is the full code but cant get it to work .
    i changed all submenus to show and put the script after the menu

    it dont work, all submenus shows and it dont expand at all

    note that i want all submenus to be hidden if javascript enabled

    any suggestions?



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>





    <style type="text/css">
    .menu1{
    margin-left:25px;
    padding-left:20px;
    padding-top:2px;
    padding-bottom: 2px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 20px;
    width: 200px;
    background-color: #03C;
    border: thin solid #FFF;
    }


    .submenu{
    background-image: url(images/submenu.gif);
    display: block;
    height: 19px;
    margin-left: 38px;
    padding-top: 2px;
    padding-left: 7px;
    color: #333333;
    }

    .hide{
    display: none;
    }


    .show{
    display: block;
    }


    </style>


    </head>




    <body>


    <a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="show">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="show">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="show">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
    <div id="mymenu4" class="show">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>
    <a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
    <div id="mymenu5" class="show">
    <a href="#" class="submenu">Link One here</a>
    <a href="#" class="submenu">Link Two here</a>
    <a href="#" class="submenu">Link Three here</a>
    <a href="#" class="submenu">Link Four here</a>
    </div>


    <script language="JavaScript" type="text/JavaScript">
    var divs=document.getElementsByTagName("div");
    var menudivs=[];

    for(i=0;i<divs.length;i++) {
    if(divs[i].className.indexOf("mymenu")!=-1) menudivs.push(divs[i]);
    }

    //menudivs is now an array of all the menu divs.

    //hide them:

    function hideDivs() {
    for(i=0;i<menudivs.length;i++) {
    menudivs[i].className="hide";
    }
    }

    window.addEventListener("load",hideDivs,false);
    //-->

    </script>



    </body>
    </html>

  • #10
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    aa now it works, thanks alot gus you the man for real homie

  • #11
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    You're welcome

  • Users who have thanked gusblake for this post:

    kimboslice (12-07-2009)

  • #12
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    one more question is there any way to make it work with both firefox and ie?

  • #13
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    It works for me in IE8 - did you uncomment the attachEvent line (and take out the note I put there)?

  • #14
    Regular Coder
    Join Date
    Dec 2009
    Posts
    102
    Thanks
    18
    Thanked 0 Times in 0 Posts
    it dont work for me , just checing how do you write the if statement?
    also this code dont work if i put it in a external js file is there any way around it?

    Thanks again

  • #15
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    The code has to be executed after the HTML - if you are linking to the external file in the head section it will try to reference elements that don't 'exist' yet. The solution would be to put the code inside a function, and call the function in the body onLoad.

    I'm afraid I can't help you as regards IE, but the problem might be in this list: http://www.howtocreate.co.uk/wrongWithIE/


  •  

    Posting Permissions

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