Power By 专否社区

Toggle menu - keep the menu open on the current page

Go To StackoverFlow.com

0

I've got a toggle menu, please see code and function in JsFiddle

When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.

However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.

Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?

Any code or examples would be appreciated.

Thanks in advance.

2012-04-04 00:28
by grumpypanda

1

http://jsfiddle.net/LcsLr/33/

HTML

   <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>

<body>

  <div id="productmenu">
    <div class="submenublock" id="submenu1">

        <h3>
            <a href="#" class="link" >Category 1</a>
            <a href='#' class="arrow" ></a>             
        </h3>
        <ul class="second_level">
           <li><a href="#" class="linkx">Option 1</a></li>
           <li><a href="#" class="linkx">Option 2</a></li>
        </ul>
      </div>

      <div class="submenublock" id="submenu2">

      <h3><a href="#" class="link">Category 2</a></h3>

      </div>

      <div class="submenublock" id="submenu3">
          <h3>
              <a href="#" class="link">Category 3</a>
              <a href='#' class="arrow" ></a>
          </h3>
           <ul class="second_level">
               <li><a href="#" class="linkx">Option 1
                   </a></li>
               <li><a href="#" class="linkx">Option 2
                   </a></li>
               <li><a href="#" class="linkx">Option 3
                   </a></li>
           </ul>
      </div>


   </div>

</body>​

JS

   $(document).ready(function() {

    $('h3,.second_level li').each(function(){
        var href = $(this).children('a').attr('href');

        if(window.location.pathname.search(href) != -1) {
          $(this).children('a').addClass('currentPage')
        }
    });

    $('.currentPage').each(function(){

        var parent;

        if($(this).parent('h3').length > 0){
            parent = $(this).parent('h3');
        }
        else{
            parent = $(this).parents('ul').siblings('h3');
        }

        $(parent).children('.arrow').addClass('open');
        $(parent).siblings('ul').show();

    });

    $('.link').click(function() {

        OpenParent($(this).parent('h3'));

        window.location = $(this).attr('href');

    });

    $('.arrow').click(function(e){
        e.preventDefault();
        OpenParent($(this).parent('h3'));

    });        
});

function OpenParent(CurrentParent){
   var currentArrow = $(CurrentParent).children('.arrow');

   $('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');

   currentArrow.toggleClass('open');

   $(CurrentParent).next().slideToggle('fast');

}​

CSS

   #sidebar {
   float:left;
   width:220px;
}


#productmenu { width:220px; margin-left: 0px;}

.submenublock{

    margin: 0px;
    padding: 0px;

}

.submenublock h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    margin: 0px; 
    border-bottom:#CCC 1px solid;
}

.submenublock h3 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    text-decoration:none;
    color: #000000;

}

.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}

.second_level{
    list-style-type:none;
    list-style:none;
    margin:0px;
    padding:0px;

}

.second_level li{
    list-style-type:none;
    list-style:none;
    display: block;
    border-bottom:#CCC 1px dashed;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    /* background:url(images/menuarrowright.gif) no-repeat right;*/
}

.second_level li a{
    display: block;
     margin-left:15px;
     text-decoration:none;
     color:#000000;


}

#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}


.second_level{
  display:none;
}

a.currentPage{
  color:blue !important;
}

.link{
    padding:10px;15px;
    display:block;
}

.linkx{
    padding:10px;15px;
    display:block;
}

.arrow{
   background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;

    float:right;
    height:17px;
    width:13px;
    margin-top:-27px;
}

.open{
   background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}


</style>​
2012-04-04 00:40
by rmagnum2002
Hi rmagnum, thanks for your reply. The problem is that my h3 are a tags which in your case it will be the Titles, so the page will go to the h3 linking page and the submenu stays open all the time when you click on h3. is there any way you can have a look at my code and alter it from there? Thanks heaps - grumpypanda 2012-04-04 00:52
http://jsfiddle.net/LcsLr/33 - rmagnum2002 2012-04-04 01:07
you used the same class for link in submenu and in menu, as they were the same class both of them did the same function, that's why your menu was closing when you clicked the submenu link - rmagnum2002 2012-04-04 01:12
is there anything missing in my answer? I thought your problem is solved, or there is something more to do - rmagnum2002 2012-04-04 01:43
Hi @rmagnum, I've been trying your code. It is working very well now, I really appreciate your help, thank you - grumpypanda 2012-04-04 04:27
Hi rmagnum, just one further question regarding the h3 a tags. if you click on one a h3 tag eg Category 1, it opens the menu and goes to the Category 1 page, however if you click on Category 1 again, the menu closes and opens again on the same page, is there any way I can avoid the open and close function for the h3 tags on the current page? Thanks heaps - grumpypanda 2012-04-04 20:24
normally when you click the category it should only expand the menu and then yo click on the link to opent the page, I don't know really what to say here, I never used this kind of menus this way.. but if you need the H3 tag to have a link inside then normally it will take to that page when you click to close the menu.. I think you should ask about it someone hwo knows better javascript - rmagnum2002 2012-04-04 22:35
All good, I'll do. Thanks for your great help. Thank you - grumpypanda 2012-04-04 23:27
take look here http://stackoverflow.com/questions/970388/jquery-disable-a-link it says something about the thing you are looking fo - rmagnum2002 2012-04-04 23:33
Ads