SideNav (edge: &#38;#039;left&#38;#039;)

Topic: SideNav (edge: 'left')

Everton Gabriel pro asked 7 years ago

Hi there, I'm using a sideNav menu on my website anda I tried to change the origin adding this code: $('.test').sideNav({ edge: 'left' // Choose the horizontal origin }); But here, some problems occured: 1. The origin still is the right side and when click on the .button-colapse, the panel crossed all the screen and stopped on left side. Then... 2. I can't close it. I clicked on different screen points and the panel doesn't close. The div overlay was gone but the panel stays visible. 2. If I change the width, like this: $('.test').sideNav({ menuWidth: 350, // Default is 240 edge: 'left', // Choose the horizontal origin }); The panel doesn't hide entire. It's possible to see a bit of it on the right side. I need to fix this issues ASAP. Waiting for your answer. Tks in advance. PS. I'm using the MDB Pro - last version and I don't changed anything on the JS and CSS.

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer

Yep! exactly this. I used your CSS and works fine. Tks!

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

Hi Everton, it seems there was a z-index conflict. Take a look here and click on the menu1 and menu2: http://mdbootstrap.com/live/_doc/sidenav-fix.html Is it a desired result? If yes - add to your project this single line of css:

 #sidenav-overlay {
            z-index: 998;
        }

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer

Mi Michal,
Realy there is a problem. See the code:

<ul id="primary-menu" class="side-nav admin-side-nav dark-side-nav"> ... </ul></code></pre>

And

<pre><code>
 
 <a href="#" data-activates="menu-filters" class="button-collapse menu-filters">
    <i class="material-icons left">filter_list</i> Game Filters
 </a>

The initialization is:
<pre><code>
// Initialize collapse button
    $('.primary-menu').sideNav({
       menuWidth: 240, // Default is 240
      edge: 'right' // Choose the horizontal origin
    });

$('.menu-filters').sideNav({
      menuWidth: 240, // Default is 240
      edge: 'left' // Choose the horizontal origin
    });
</code></pre>

The first menu opens when click the link, but, when click out, it doesn't close.
The second menu works fine. But, if I try to click on the fist, I broke the second.

What's wrong?

You can see this on http://brutuspedia.com.au/v2/video-list.php and set your browser to 'sm' view.

Please insert min. 20 characters.

Mi Michal, Realy there is a problem. See the code:

<!-- Buttom menu mobile -->
<a href="#" data-activates="primary-menu" aria-haspopup="true" aria-expanded="false" class="navbar-toggle button-collapse white-text primary-menu"><i class="fa fa-bars"></i></a>

 <!-- Sidebar navigation -->
 <ul id="primary-menu" class="side-nav admin-side-nav dark-side-nav"> ... </ul>

And


 <!-- SideNav button -->
 <a href="#" data-activates="menu-filters" class="button-collapse menu-filters">
    <i class="material-icons left">filter_list</i> Game Filters
 </a>

<div id="menu-filters"> ... </div>

The initialization is:


// Initialize collapse button
    $('.primary-menu').sideNav({
       menuWidth: 240, // Default is 240
      edge: 'right' // Choose the horizontal origin
    });

    $('.menu-filters').sideNav({
      menuWidth: 240, // Default is 240
      edge: 'left' // Choose the horizontal origin
    });

The first menu opens when click the link, but, when click out, it doesn't close. The second menu works fine. But, if I try to click on the fist, I broke the second. What's wrong? You can see this on http://brutuspedia.com.au/v2/video-list.php and set your browser to 'sm' view.

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer

Solved. Tks.

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer

Hi, I sent the e-mail yesterday and I'm waiting for your help. My e-mail is evertong@gmail.com Tks!

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

I missed that, I'm sorry. Send me please files of your project via email: m.szymanski@mdbootstrap.com I'll take a look at it.

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer

But I do that. See the code below. I have the .primary-menu and .test (like slide-out and slide-out2). But when I test, one of then works fine. The other one, shows when click on the button but don't hide when click out.

Add comment

Michal Szymanski staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

If you want to use more than one SideNav on one page, you have to set different IDs for each menu and also set an appropriate attributes for trigger buttons Example: SideNav 1.

<ul id="slide-out" class="side-nav default-side-nav light-side-nav">
[..]
</ul>

<a href="#" data-activates="slide-out" class="button-collapse"></a>

SideNav 2.

<ul id="slide-out-2" class="side-nav default-side-nav light-side-nav">
[..]
</ul>

<a href="#" data-activates="slide-out-2" class="button-collapse"></a>

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer

See my code: // Initialize collapse button $('.primary-menu').sideNav({ edge: 'right' }); $('.test').sideNav({ edge: 'left' }); $('.collapsible').collapsible(); And in the page I have 2 structres with different navs. But only one is colapsible. THe other one don't hide when click out.

Add comment

Everton Gabriel pro answered 7 years ago

0 0 Best answer