[admin]

Hi,

Nope, unfortunately, the nav-justified class doesn’t work well for navbar navs. You will need some custom solution – e.g. this might help:

http://stackoverflow.com/questions/19073813/how-to-justify-navbar-nav-in-bootstrap-3

I haven’t checked all posted solutions but, hopefully, something will work for you.

[admin]

Hi Moe,

This is coming soon in the first 1.0.0 beta (along with some other accessibility improvements). By default the tab order will not include the sub menus any more – only if you activate some sub menu via Enter. And you could also deactivate the subs again via Escape.

If you cannot wait for it, I can try to prepare some instructions how to backport it to the current v0.9.7 but you will need to edit manually the “jquery.smartmenus.js” file. Just let me know.

[admin]

Yep, the hash in the link URL is neglected when detecting the current links. As for href="" – this links to the current location so it’s correctly detected as current. If you would like keep some of your links with dummy href attribute, to avoid the issue, you could use something like href="javascript:;" instead of href="#".

[admin]

Unfortunately, some projects I have been working on lately have been extended unexpectedly and I am still not able to concentrate on the 1.0 release although I’ve made some progress like porting themes to SASS, etc.

I am now even afraid to make an estimate given my last one 😕 but I hope I will be able to fully concentrate on the project soon enough (hopefully, within the next 2-3 weeks).

[admin]

Hi, I’m sorry for this delay! It’s been our Easter the past few days and I just wasn’t able to reply earlier!

Yep, if you would like to include nested UL’s in the mega dropdown you will need to use some additional CSS to override the inherited styles for the regular sub menus. So the following would be something like the bare minimum:

ul.mega-menu ul {
    display: block;
    position: static;
    top: auto;
}

Also, setting the subMenusMaxWidth: '' script option is probably a good idea to override the default value subMenusMaxWidth: '20em' which will probably not be enough for mega dropdowns. Here is an updated demo:

http://jsfiddle.net/96wroyf6/1/

From there, I am not sure what exact width you would like to achieve for your mega dropdown. Here are some code samples if you would like your mega dropdowns to take the full width of your menu container:

http://www.smartmenus.org/forums/topic/mega-menu-full-width-of-parent-element/

Please let me know if you still have any troubles.

[admin]

Sorry for this delay, it’s been our Easter the past few days and I just wasn’t able to reply earlier!

Admin tell to add this :

jQuery("#menu-main-menu").addClass('sm');

This should be added to some of the JS files that your theme uses. To be more precise, it should be like this so it is executed ondomready:

jQuery(function() {
	jQuery("#menu-main-menu").addClass('sm');
});

and this :

<?php wp_nav_menu( array( 'menu' => '...', 'menu_id' => 'menu-main-menu', 'menu_class' => 'sm' ... ) ); ?>

This should be added in the PHP include file that currently outputs your main menu. It might possibly be “header.php” but I am not familiar with the theme you use so it might be some other file.

[admin]

Hi and sorry for this delay, it’s been our Easter the past few days and I wasn’t able to reply earlier!

Unfortunately, I have no clear idea what exactly you have done with your code (not sure if the Bootstrap JS also kicks in for your navbar, etc.) so if possible please post some kind of demo URL where I can see and test your complete code and I will try to figure it out.

Thanks!

[admin]

Yes, you will need to use a slightly modified version of the JS code – for example, something like this:

$(function() {
  $('#menu-button').click(function() {
    var $this = $(this),
        $menu = $('#main-menu');
    if (!$this.hasClass('collapsed')) {
      if (!$menu.hasClass('collapsed')) {
        $menu.slideUp(250, function() { $(this).addClass('collapsed').css('display', ''); });
      }
      $this.addClass('collapsed');
    } else {
      $menu.slideDown(250, function() { $(this).removeClass('collapsed'); });
      $this.removeClass('collapsed');
    }
    return false;
  }).click();
});

[admin]

Just add the “mega-menu” class to your .dropdown-menu UL element. This will inform the SmartMenus plugin that this is a mega dropdown menu and it might contain any HTML, so the script will neglect any nested UL elements inside it – i.e.:

<ul class="mega-menu dropdown-menu wide-dropdown-menu-maya">
    <li>
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <ul class="wide-menu"><!-- <-- width this <ul><li> all dropdowns not work, class "wide-menu" is empty -->
                        <li>one</li>
                        <li>two</li>
                        <li>three</li>
                        <li>four</li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    second column
                </div>
                <div class="col-lg-3">
                    third column
                </div>
                <div class="col-lg-3">
                    fourth column
                </div>
            </div>
        </div>
    </li>
</ul>

Cheers!

[admin]

Hi,

Please take a look at this post for instructions how to make your menu collapsible even on desktop:

http://www.smartmenus.org/forums/topic/suggestion-functionality-for-mobile-responsive-to-be-available-for-desktop/#post-1454

And to expand the menu tree to the current item on page load, you can use the following code:

http://www.smartmenus.org/forums/topic/vertical-menu-expanded-on-page-load/#post-1535

Let me know if you still have any questions.

[admin]

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

Cheers!

[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.

[admin]

Yep, you can achieve it by using the following mod:

$(function() {
	$('#main-menu').bind('activate.smapi', function(e, item) {
		var $deepestCurrent = $('#main-menu a.current').eq(-1);
		if ($(item).is('#main-menu > li > a.current') && item != $deepestCurrent[0]) {
			setTimeout(function() { $('#main-menu').smartmenus('itemActivate', $deepestCurrent); });
		}
	});
});

Let me know if you have any troubles.

[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!

[admin]

Glad to hear you’ve fixed the issue! Yep, this is a quite common problem actually since it’s quite easy to mess up the structure if you don’t pay attention. And when it’s not valid all kinds of troubles might arise.

[admin]

Yep, your #container DIV has overflow: hidden applied and that’s what cuts the top part of the sub menus. Just edit this rule and remove the declaration:

#container {
  max-width: 1140px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 0px;
  background-color: #fff;  
  overflow: hidden;
}

in:

http://temp07.cww-temp.nl/sysfiles/skins/Rsp-MP04/css/style.css

I guess it has been added for clearing any floats inside but you already have a clearer div inside it anyway <div class="clear"></div> (and you could use other ways for clearing floats, too, if needed) so removing the overflow declaration shouldn’t hurt anything.

Cheers!

[admin]

The styles for the arrows are at the top of “jquery.smartmenus.bootstrap.css” (the “.sub-arrow” class). Though you will need to play with them quite a bit to achieve something like that.

Plus in the current version of the Bootstrap add-on the default Bootstrap behavior is honored and it doesn’t allow to separate the behaviour of the arrow from the rest of the menu item – i.e. use the rest of the item for link and the arrow always for sub menu toggle. The default Bootstrap behaviour is to use the whole item just as a sub menu toggle. This will probably be changed in the next SmartMenus release and what you gave as an example will then be the default behaviour for the SmartMenus Bootstrap add-on but at least for now, it’s not.

[admin]

Hi,

The problem @sau_152mm had was caused by additional custom code he had added on the page. So it shouldn’t be related to your issue although you get a similar error message. I suspect in your case you simply need to make sure your menu HTML structure is valid – e.g. make sure opened <li> tags are closed properly, all tags are properly nested, etc.

If you can’t cope on your own, please post an URL to some kind of live demo and I will check it at first chance.

Cheers!

[admin]

I tested exactly with the Bootstrap add-on. I guess you are missing something so here is a complete sample on Codepen:

http://codepen.io/vadikom/pen/RNYmyv?editors=101

Cheers!

[admin]

Yep, just call the refresh API method:

http://www.smartmenus.org/docs/#refreshInstance

after you append the sub menu and it should work – e.g. try this:

$('#Action').click(function() {

	// append sub menu
	$("#wsnmotes > ul").append(
	  '<li id="wsnnode"><a href="#"><i class="fa fa-plus-square"></i> mote name: L1</a>'+
	    '<ul id="sub1" class="dropdown-menu">'+
	      '<li><a href="#"><i class="fa fa-question-circle"></i> Discover</a> </li>'+
	      '<li><a href="#"><i class="fa fa-info-circle"></i> Mote Config</a></li>'+
	    '</ul>'+
	    '</li>'
	);

	// refresh menu tree after the DOM change
	$("#my-nav").smartmenus('refresh');
});

Also just make sure you set the “my-nav” id to your nav so that you can reference it in your script:

<ul id="my-nav" class="nav navbar-nav">...

[admin]

There won’t be any major issues. Just the “PT Sans Narrow” font won’t be loaded from Google fonts and on systems that don’t have the font installed (e.g. standard Windows installs) instead of like this:

the menu font would look something like this:

[admin]

Hi,

You can use the following mod (just include it on your page after the SmartMenus jQuery plugin .js file):

// always emulate touch mode
$.SmartMenus.prototype.isTouchMode = function() {
	return true;
};

This would emulate touch mode even when mouse input is available and thus make sure any sub menu is only activated on tap/click.

Cheers!

[admin]

The following code:

$("#main-menu").smartmenus("itemActivate",$("#main-menu").find("a.current").eq(-1));

must be executed ondomready. So you need to change it like this:

$(function() { $("#main-menu").smartmenus("itemActivate",$("#main-menu").find("a.current").eq(-1)); });

However, unlike @YellowPhoenix, you are using a dropdown menu and not a collapsible one and it doesn’t make big sense to expand it on page load. You can see what I mean, when you fix the above.

[admin]

The second one is caused by the use of CSS gradients in “sm-blue.css” which are still a W3C working draft. There is no way to avoid these errors, unless you remove all declarations that use the gradients. But again, you shouldn’t really worry about these errors too – they won’t affect anything on your page in any way.

[admin]

That’s because @YellowPhoenix doesn’t use the expand logic for the top dropdown menu (it doesn’t make sense to be used for a dropdown menu really), just for the left collapsible menu – i.e. they use just this:

$("#left-menu").smartmenus("itemActivate",$("#left-menu").find("a.current").eq(-1));

If you are having troubles, please post an URL to some kind of demo. On theory it should work, so there must be something wrong with your code.

[Author]

Posts