addon bootstrap vertical menu

[becki]

hello there,

first, really thanks a lot for such a nice plugin! just awesome 😉

currently working on a bootstrap layout and implemented the bootstrap addon without any problems or whatsoever

so my current testing page displays the top horizontal navbar with multiple layers.

but now i got a second, smaller navbar, in the sidebar of that layout.

i want this smaller navbar, also multiple levels, to be displayed vertical instead of horizontal.

how could that be done with smartmenus?

any help or hint would be more than appreciated 😉

thanks & all the best
greetings
becki

[admin]

Hi,

By default Bootstrap doesn’t have vertical navbars so this is not a tested scenario with the SmartMenus Boostrap plugin although it probably wouldn’t be very difficult to achieve. If you like, please post a live demo of how you created your vertical navbar and I will check if it could be done quickly. If it requires more time (which, unfortunately, I currently don’t have), I may consider creating some kind of demo in the future).

Thanks!

[becki]

hello admin 😉

thanks a lot for your reply!

yes, bootstrap doesn’t have a default vertical navbar, but if you ever find the time to look into it and implement this feature into the smartmenus bootstrap addon I would be more than glad, i guess other too 😉 some kind of demo in the future … you would be the man 😉

anyway, i managed to get both a horizontal bootstrap navbar and a standard vertical smartmenus menu (right sidebar) to run on a site. here’s the link:

http://upgrade.haadyaodivers.com/en/kohphangandivingcourses.php?padidivecourses=beginners

it’s a responsive layout update for a client and all of course still in beta mode.

the only issue i got implementing both menus on the page is your fix for collapsible menu detection for bootstrap3 in your bootstrap addon file on line 69

// fix collapsible menu detection for Bootstrap 3
	$.SmartMenus.prototype.isCollapsible = function() {
		//return this.$firstLink.parent().css('float') != 'left';
	};

if i comment out the line like in the code above i can hover over the vertical menu item in the right sidebar and the sub-menu opens up

if i enable the line in your code above the mouseover doesn’t work anymore and if i then click on the menu item the sub-menu opens to the right, out of the actual viewport.

what are your thoughts on this? any response would be great!

thanks again for such a nice jquery plugin 😉

greetings
becki

[admin]

OK, I just got the time to test a bit more thoroughly your code.

The main problem is that the SmartMenus core CSS was not designed and intended to be used with the Bootstrap addon and it will break all kinds of things related to your regular Bootstrap navbar and most notably the collapsible mobile menu on small screens. So I would suggest you to not use a standard SmartMenus menu for your sidebar menu but instead add another regular Bootstrap horizontal navbar in your sidebar and then make it vertical with just a little additional CSS. Here are quick instructions:

1) Remove the links to “sm-core-css.css” and “sm-simple.css”.

2) Use the original version of “jquery.smartmenus.bootstrap.js”.

3) Replace your current sidebar menu UL:

        <!-- menu vertical START -->
        <ul id="sidebar-menu" class="sm sm-vertical sm-simple sm-simple-vertical">
                ...
        </ul>

with the following:

<nav id="navbar-sidebar" class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-sidebar-collapse" aria-expanded="false" aria-controls="navbar-sidebar-collapse">
        <span class="sr-only">Navigation ein-/ausblenden</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="navbar-sidebar-collapse" class="navbar-collapse collapse">

      <!-- start sidebar nav -->
      <ul class="nav navbar-nav navbar-right sm-vertical">
                ...
      </ul>
      <!-- end sidebar nav -->

    </div><!-- end navbar-sidebar-collapse -->

  </div><!-- end container -->
</nav><!-- end navbar navbar-default -->

4) Use the following additional CSS to make the navbar vertical:

@media (min-width: 768px) {
	#navbar-sidebar .container-fluid,
	#navbar-sidebar .navbar-collapse {
		padding: 0;
	}
	#navbar-sidebar .navbar-right {
		margin-right: 0;
	}
	#navbar-sidebar .nav > li {
		width: 100%;
	}
}

Let me know if you have any troubles.

[becki]

hello admin,

thanks a lot for your time to look at my code. i followed your quick instructions and updated my code on the website.

and what can i say? YOU’RE A STAR 😉

vertical bootstrap menu now works on my site and I’m really greatful for your help. recommending smartmenus to others will be on top of my list.

and if you ever find time to make a demo or document on how to create vertical bootstrap navbar with smartmenus … well … please don’t hesitate 😉

again, thanks a lot for your help!

greetings & all the best
becki

[admin]

Np at all, glad I was able to help! 🙂

Cheers!

[Author]

Posts