CODEWITHSUNDEEP
javascriptphpjquerycss
felixRo
felixRo

Reputation: 187

keep open submenu when new page

I have navigation menu on the left which can be opened to show more options to choose. When I click a submenu option it loads new page. Right now it works like this that when I open new page, the submenu is closed, but I want it to stay opened and be highlighted (apply itemActive class) as long as the page is on the screen. So the problem is to keep menu state after new page is loaded with the caret down.

This is my code: loading pages:

include_once("./includes/head.php");
include_once("./includes/header.php");
include_once("./includes/".$page.".php"); 
include_once("./includes/footer.php");

header.php contains menu code:

<div id="sidebar-wrapper">
  <nav id="spy">        
    <ul class="side-nav nav">
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m1"><i class="fa fa-fw fa-pencil-square-o"></i> Menu1 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m1" class="collapse">
          <li><a href="p1">Page1</a></li>
          <li><a href="p2">Page2</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m2"><i class="fa fa-fw fa-users"></i> Menu2 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m2" class="collapse">
          <li><a href="p3">Page3</a></li>
        </ul>
      </li>
    </ul>       
  </nav>        
</div>

JS code for collapse in/out when moving around menu: 

var $myGroup = $(".side-nav");
$myGroup.on("show.bs.collapse",".collapse", function() {
  $myGroup.find(".collapse.in").collapse("hide");   
});

CSS for turning caret down when menu is opened and turning left when is closed:

[aria-expanded="false"] > i.fa-caret-left {transform: rotate(0deg); transition: all ease-in-out .4s;}
[aria-expanded="true"] > i.fa-caret-left {transform: rotate(-90.01deg); transition: all ease-in-out .4s;}

.itemActive {outline: none; color: #fff; background-color: #000 !important;}

EDIT: I managed this to work as it's expected:

<div id="sidebar-wrapper">
  <nav id="spy">        
    <ul class="side-nav nav">
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m1" <?php echo in_array($page, ['p1','p2']) ? 'aria-expanded="true" class=""' : 'aria-expanded="false" class="collapsed"' ?>><i class="fa fa-fw fa-pencil-square-o"></i> Menu1 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m1" class="collapse<?php echo in_array($page, ['p1', 'p2']) ? ' in' : '' ?>">
          <li><a href="p1" class="<?php echo $page=='p1'?'itemActive':''?>">Page1</a></li>
          <li><a href="p2" class="<?php echo $page=='p2'?'itemActive':''?>">Page2</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#m2" <?php echo in_array($page, ['p3']) ? 'aria-expanded="true" class=""' : 'aria-expanded="false" class="collapsed"' ?>><i class="fa fa-fw fa-users"></i> Menu2 <i class="fa fa-fw fa-caret-left pull-right"></i></a>
        <ul id="m2" class="collapse<?php echo in_array($page, ['p3']) ? ' in' : '' ?>">
          <li><a href="p3" class="<?php echo $page=='p3'?'itemActive':''?>">Page3</a></li>
        </ul>
      </li>
    </ul>       
  </nav>        
</div>

Upvotes: 0

Views: 558

Answers (2)

Populus
Populus

Reputation: 7680

Add the in class if the submenu contains your current page.

<ul id="m1" class="collapse<?php= in_array($page, ['p1', 'p2']) ? '.in' : '' ?>">
    <li><a href="p1">Page1</a></li>
    <li><a href="p2">Page2</a></li>
</ul>

Upvotes: 1

akasummer
akasummer

Reputation: 362

Imagine you are on the home page: Your current URL is www.somesite.com/

When you press button "Page1" from the menu, you get redirected to another page:

URL is changing from www.somesite.com/ => www.somesite.com/p1/

Page2: www.somesite.com/ => www.somesite.com/p2

Page3: www.somesite.com/ => www.somesite.com/p3

You can clearly see which button was pressed by looking at URL

So, now possible solutions comes to mind:

1) Modify header.php to put format menu according to URL (maybe remove .collapse and add .itemActive)

2) Add extra javascript code which will do the same according to URL

These method fails when you can go to those pages from somewhere else (you probably don't want to expand menu in that case)

Another way would be to store data about pressed button in browser cookie, this way you will read the cookie and do your magic with .collapse and .itemActive

Upvotes: 0

Related Questions