CODEWITHSUNDEEP
javascriptmenusubmenuitems
user3382853
user3382853

Reputation: 1

submenu on click must remain open

I have a vertical menu with some submenu items, and this submenu opens on click. But the problem is that when I click on one of the submenu items, the submenu closes, whereas I want it to remain open, since when I browse on the submenu items Here's the html:

<div class="ul_container">  

<ul class="mainnav" id="nav" style="list-style:none;"> 

 <li><a  id="active" href="index.html"><strong>HOME</strong></a></li>

 <li><a  href="javascript:void(0)" onclick="toggleID('sub1')">COLLECTIONS</a>

    <ul class="subnav" id="sub1" style="display:none">
        <li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a>
    <li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a>

        <li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a>
        <li class="first"><a href="Collections.html">autumn/winter 2011</a>

    </ul>

 </li>

 <li><a  href="Portrait.html">PORTRAIT</a></li>

 <li><a  href="Heritage.html">HERITAGE</a></li>

 <li><a  href="Press.html">PRESS</a></li>

 <li><a  href="Contacts.html">CONTACTS</a></li> 

</ul>

</div>

and the js

function toggleID(IDS) {

  var sel = document.getElementById('nav').getElementsByTagName('ul');

  for (var i=0; i<sel.length; i++) { 

    if (sel[i].id != IDS) { sel[i].style.display = 'none'; }

  }

  sel = document.getElementById(IDS);

  sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';

}

Upvotes: 0

Views: 1034

Answers (3)

user3382853
user3382853

Reputation: 1

Urban Bjorkman, I use your code but something is wrong...is that right?

<html>
<head>
<script type="text/javascript" >
if (localStorage.getItem("state") == "closed") // <-- this checks closed/open state and sets subnav accordingly
$('.subnav').hide();


$('.subnav').parent().click(function () {
    $(this).find('#sub1').toggle(); //<-- This toggles the menu open/close

    // ** Block to remeber state ** //
    if (localStorage.getItem("state") == "open") {
        localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates        
    } else {
        localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
    }
    // ** Block to remeber state ** //
});
</script>
</head>
<body>
<div class="ul_container">
    <ul class="mainnav" id="nav" style="list-style:none;">
        <li><a id="active" href="index.html"><strong>HOME</strong></a>
        </li>
        <li><a href="javascript:void(0)">COLLECTIONS</a>

            <ul class="subnav" id="sub1">
                <li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a>
                </li>
                <li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a>
                </li>
                <li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a>
                </li>
                <li class="first"><a href="Collections.html">autumn/winter 2011</a>
                </li>
            </ul>
        </li>
        <li><a href="Portrait.html">PORTRAIT</a>
        </li>
        <li><a href="Heritage.html">HERITAGE</a>
        </li>
        <li><a href="Press.html">PRESS</a>
        </li>
        <li><a href="Contacts.html">CONTACTS</a>
        </li>
    </ul>
</div>
 </body>
 </html>

Upvotes: 0

Urban Bj&#246;rkman
Urban Bj&#246;rkman

Reputation: 2105

Is your problem thay you need to remember the visibility state of the submenu once you klick on the subitems?

If so, you need to remember the state of the submenu. You can accomplish this using cookies or localstorage.

Html (just small changes, like removing onclick and fixing html)

<div class="ul_container">  
<ul class="mainnav" id="nav" style="list-style:none;"> 
 <li><a  id="active" href="index.html"><strong>HOME</strong></a></li>
 <li><a  href="javascript:void(0)">COLLECTIONS</a>
    <ul class="subnav" id="sub1">
        <li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a></li>
        <li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a></li>

        <li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a></li>
        <li class="first"><a href="Collections.html">autumn/winter 2011</a></li>
    </ul>
 </li>
 <li><a  href="Portrait.html">PORTRAIT</a></li>
 <li><a  href="Heritage.html">HERITAGE</a></li>
 <li><a  href="Press.html">PRESS</a></li>
 <li><a  href="Contacts.html">CONTACTS</a></li> 
</ul>
</div>

Javascript (using jquery with localstorage)

if(localStorage.getItem("state") == "closed")  // <-- this checks closed/open state and sets subnav accordingly
    $('.subnav').hide();


$('.subnav').parent().click(function () {
    $(this).find('#sub1').toggle(); //<-- This toggles the menu open/close

    // ** Remeber state ** //
    if (localStorage.getItem("state") == "open") {
        localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates        
    } else {
        localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
    }
    // ** Remeber state ** //
});

My example uses jquery, if you have the possibility to start using it you should do so. You can replace most of your javascript with a few lines using jquery

Check out working fiddle here

http://jsfiddle.net/urbanbjorkman/jGwnz/

Upvotes: 0

dgk
dgk

Reputation: 899

<div class="ul_container">
<ul class="mainnav" id="nav" style="list-style:none;">
    <li><a id="active" href="#"><strong>HOME</strong></a></li>
    <li><a href="javascript:void(0)" id="test" onclick="toggleID('sub1');">COLLECTIONS</a>
            <ul class="subnav" id="sub1" style="display:none">
            <li class="first"><a href="#">spring/summer 2013</a></li>
            <li class="first"><a href="#">autumn/winter 2013</a></li>
            <li class="first"><a href="#">autumn/winter 2012</a></li>
            <li class="first"><a href="#">autumn/winter 2011</a></li>
        </ul>
    </li>
    <li><a href="#">PORTRAIT</a></li>
    <li><a href="#">HERITAGE</a></li>
    <li><a href="#">PRESS</a></li>
    <li><a href="#">CONTACTS</a></li>
</ul>


    $("#test").click(function() {
    var sel = document.getElementById('nav').getElementsByTagName('ul');
    for (var i = 0; i < sel.length; i++) {
      if (sel[i].id != 'sub1') {
            sel[i].style.display = 'none';
        }
  }
    sel = document.getElementById('sub1');
  sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';
});

Working Example

Upvotes: 2

Related Questions