[admin]

It’s a path related issue and jQuery is probably not loaded. Do not link to “jquery-loader.js” (it is used to allow easy testing with different jQuery versions) but include directly jQuery on your page – i.e. replace:

<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery-loader.js"></script>

with:

<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>

or with something like:

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

[admin]

Hmm, which default implementation are you referring to? All default demos feature a horizontal main menu with vertical sub menus just like the Bootstrap addon demos.

As for horizontal sub menus with Bootstrap, this is not possible by default. You can try searching the web for some custom Bootstrap demos with horizontal sub menus though I am not sure if such exist.

[admin]

Hmm, I may think of some easy tweak in the future (like a new data-* attribute to control this easily) but for now you would need to edit “jquery.smartmenus.bootstrap.js” – you need to replace the following code:

			$this.addClass('sm').smartmenus({

					// these are some good default options that should work for all
					// you can, of course, tweak these as you like
					subMenusSubOffsetX: 2,
					subMenusSubOffsetY: -6,
					subIndicators: false,
					collapsibleShowFunction: null,
					collapsibleHideFunction: null,
					rightToLeftSubMenus: $this.hasClass('navbar-right'),
					bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
				})

with the following:

			$this.addClass('sm').smartmenus({

					// these are some good default options that should work for all
					// you can, of course, tweak these as you like
					subMenusSubOffsetX: 2,
					subMenusSubOffsetY: -6,
					subIndicators: true,
					subIndicatorsPos: 'append',
					subIndicatorsText: '',
					collapsibleShowFunction: null,
					collapsibleHideFunction: null,
					rightToLeftSubMenus: $this.hasClass('navbar-right'),
					bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
				})
				.find('span.sub-arrow').addClass('caret').end()

[admin]

OK, just got the chance to test it. It looks great in general and needed just few minor tweaks to output proper HTML code for use with SmartMenus jQuery + Bootstrap addon. I did the changes so just get the updated version from here (apart from those changes it’s identical to the original code):

https://github.com/vadikom/wp-bootstrap-navwalker

The only other thing you may need to tweak is the depth parameter if you have more sub menu levels – e.g.:

wp_nav_menu( array(
	'menu'              => 'primary',
	'theme_location'    => 'primary',
	'depth'             => 3,
	// ...

Cheers!

[admin]

There is no “official” recommended way of using Bootstrap + SmartMenus in WordPress at the moment so I have taken a note to think about this and maybe add a tutorial in the docs.

But to try to help you out right now, to be honest, I am not familiar with this class (if this is it – https://github.com/twittem/wp-bootstrap-navwalker) but at first glance it does look good and simple to use. So I will spend some time testing this tomorrow morning and will let you know if it’s fine to use it. The only issue might be that the SmartMenus Bootstrap addon requires just slightly different HTML code from the default Bootstrap navbar code but, hopefully, it will be possible to modify the code the navwalker class outputs in the proper way.

[admin]

Changing some options at runtime (like “subIndicators”) will not have any effect since they are only used at init so these options need to be passed on the init call. But, of course, it’s not a problem to change others (e.g. “showTimeout”, “showOnClick”, etc.) and you can do it like this:

$('#main-menu').data('smartmenus').opts.optionName = newValue;

So if you have the #my-button button, you can do it onclick with the following code:

$('#my-button').click(function() {
	$('#main-menu').data('smartmenus').opts.optionName = newValue;
	return false;
});

[admin]

Hi, nope, there is no “official” working demo or any “non-official” that I am aware of. To be honest, I am not very familiar with the “spec” and having in mind it’s still a draft:

http://www.w3.org/TR/html-imports/

and the scarce browser support:

http://caniuse.com/#feat=imports

I’d say it’s actually quite unsafe to use it for anything other than testing purposes.

Anyway, here is a good tutorial that might help (I guess you might have already seen it but still):

http://www.html5rocks.com/en/tutorials/webcomponents/imports/

I may try to test this when I have some time but, unfortunately, right now I am not able to help you out with exact instructions.

[admin]

Please post an URL to some sort of live demo. It’s very difficult to guess what exactly might be causing the issues without being able to test your code.

[admin]

It’s practically the same with the Bootstrap add-on. Just set some id to your .navbar-nav UL element (e.g. “main-menu”) and call the method like this:

$('#main-menu').smartmenus('refresh');

[admin]

There is a short tutorial in the docs too:

http://www.smartmenus.org/docs/#menu-toggle-button

[admin]

Stay tuned, just a week or two more (hopefully!!).. 🙂

[admin]

Hi,

Yes, this is the method but if the option hideOnClick is set to true (and it is by default), the sub menu will be reset immediately after it is activated since the button click bubbles to the document and there the hideOnClick hander is executed. You can avoid this, for example, by calling the method asynchronously with a short timeout like this:

$('#button').on('click', function() {
     setTimeout(function() {
          $('#main-menu').smartmenus('itemActivate', $('#list-item > a'));
     }, 1);
});

Let me know if you still have any troubles.

[admin]

Can i add this on my clients website and include the license in the root of the website ?
Just wanted to make sure!
Please let me know.

Yes, of course.

[admin]

OK, if you like, please post an URL to some kind of testable demo and I can take a look. Unfortunately, it’s very difficult to guess what exactly might be causing the issue without checking your code.

[admin]

Try initializing the script with the following options:

        $(function () {
            $("#Menu1 ul:first").attr('class', 'sm sm-blue').smartmenus({
                subMenusSubOffsetX: 1,
                subMenusSubOffsetY: -8
	    });
        });

And if you’ve customized the default “sm-blue” theme, you may need to experiment with different values for the mainMenuSubOffsetX and mainMenuSubOffsetY options too.

[admin]

Hi,

I guess while customizing the theme you have paid attention just to the desktop layout. So now basically you will need to include additional rules at the end of the theme CSS file (in the “Responsiveness” section) in a media query like this:

@media screen and (max-width: 640px) {
	/* additional rules here ... */
}

that will fix any issues your customizations have produces on small screens.

[admin]

Take a look at the following topic:

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

[admin]

OK, here are quick instructions for v0.9.7:

1) In “sm-core-css.css” replace the following line:

ul.sm ul{position:absolute;top:-999999px;width:100px;}

with the following:

ul.sm ul{display:none;position:absolute;}

2) In “jquery.smartmenus.js” replace the following:

(!this.isTouchMode() ||

with the following:

this.focusActivated && (!this.isTouchMode() ||

3) In “jquery.smartmenus.js” replace all occurrences of the following:

this.clickActivated = false;

with the following:

this.clickActivated = false;
this.focusActivated = false;

4) In “jquery.smartmenus.js” find the current “itemClick” method and replace it with the following:

			itemClick: function(e) {
				if (this.isTouchScrolling) {
					this.isTouchScrolling = false;
					e.stopPropagation();
					return false;
				}
				var $a = $(e.currentTarget);
				if (!this.handleItemEvents($a)) {
					return;
				}
				$a.removeDataSM('mousedown');
				if (this.$root.triggerHandler('click.smapi', $a[0]) === false) {
					return false;
				}
				// undo fix: prevent the address bar on iPhone from sliding down when expanding a sub menu
				if ($a.dataSM('href')) {
					$a.attr('href', $a.dataSM('href')).removeDataSM('href');
				}
				var $sub = $a.parent().dataSM('sub');
				// if the sub is not visible
				if ($sub && (!$sub.dataSM('shown-before') || !$sub.is(':visible'))) {
					// try to activate the item and show the sub
					this.itemActivate($a);
					// if "itemActivate" showed the sub, prevent the click so that the link is not loaded
					// if it couldn't show it, then the sub menus are disabled with an !important declaration (e.g. via mobile styles) so let the link get loaded
					if ($sub.is(':visible')) {
						this.focusActivated = true;
						return false;
					}
				} else if (this.opts.showOnClick && $a.parent().parent().dataSM('level') == 1 && $sub) {
					this.clickActivated = true;
					this.menuShow($sub);
					return false;
				}
				if ($a.hasClass('disabled')) {
					return false;
				}
				if (this.$root.triggerHandler('select.smapi', $a[0]) === false) {
					return false;
				}
			},

Cheers!

[admin]

Hi,

No, there are no specific options to control the breakpoint – it’s all relying purely on Bootstrap. So, I guess you haven’t changed properly all the required breakpoints in the Bootstrap CSS. Please take a look at the following topic:

http://www.smartmenus.org/forums/topic/adjusting-the-navbar-breakpoint-bootstrap-3/#post-1765

I have posted an example of all the media queries that need to be edited in the default Bootstrap CSS if you would like to change just the navbar breakpoint.

Please let me know if you still have any questions.

[admin]

Hi,

It’s not a problem if you can’t control completely the outputted structure as long as it is still valid (and yours is just fine). The only slight difference for you from the default setup instructions is that you will need a slightly different init code – e.g. something like this:

$(function() {
	$('#divMenu > ul').attr('id', 'main-menu').addClass('sm sm-blue').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8
	});
});

Here is a working demo:

https://jsfiddle.net/x3k1nrmc/

This uses the default “sm-blue” theme but I guess it should be easy for you to change that if you like.

Cheers!

[admin]

Hi, glad you like the script!

Right to your questions:

1) Unfortunately, I can’t understand exactly what space you are talking about without looking at a demo. So if possible, please post some kind of live demo where I could test your code.

2) You could, for example, put the image before the item’s text (not after it) and use a code like this:

<img src="../../../images/tick.png" />

Then if needed, you could add a bit more right padding for the items – you can find the rule in the theme’s CSS file – e.g. .sm-blue a { ...).

Or another option would be to use a right aligned background image with some appropriate item right padding.

Cheers!

[admin]

Hi,

The next release (1.0.0 beta) will be mobile first (and all the themes will be available as SASS, too) so I would suggest you to wait a bit more for it. There are still some new features to be finished and the docs updated, etc. but, hopefully, it won’t take more than few weeks to release it.

It’s not a trivial task to backport the changes to the current v0.9.x codebase as quite a few tweaks are required both in the JS and CSS code.

Cheers!

[admin]

Hi, I believe it’s still a z-index issue but it’s probably caused by some containers that have position: relative applied but no specific z-index set. You can try setting something like:

.jp-interface {
	z-index: 1;
}

and if your main menu is wrapped in any position: relative container, set it something like z-index: 2.

If this doesn’t help, please post some kind of live demo where I could test your exact code.

Cheers!

[admin]

Hi,

There is no “official” documented way of doing this so if what you’ve done works for you, you should be good to go with it. To fix the sub arrows issue, you could use additionally something like:

.subnav1 >li > a { position: relative; }
.subnav1 > li > a > .sub-arrow {
      margin-top: 8px;
      border-top: 4px solid;
      border-bottom: 4px dashed transparent;
      border-left: 4px dashed transparent;
}

Apart from that it’s a good idea to wrap your rules for the horizontal sub menu in a media query to prevent breaking the Bootstrap’s collapsible styles – i.e. something like:

@media (min-width:768px) {
	.mainlinks > li {position: static !important; display:inline;}
 	.mainlinks > li > ul {margin-left:0 !important;	right:0 !important;	width:auto !important; 	max-width:none !important;}
	.subnav1 >  li {display: inline !important; float:left !important;}
	.open> ul.subnav1 {display: inline-flex !important;}
	.subnav1 >li {position: static !important;}
	.subnav1 >li > a {position: relative;}
  	.subnav1 >li > a > .sub-arrow {
      margin-top:8px;
      border-top:4px solid;
      border-bottom:4px dashed transparent;
      border-left:4px dashed transparent;
	}
 	.subnav1 > li > ul {position:relative !important; margin-left:0 !important; top:33px !important;	left:0px !important; 	width:auto !important; 	max-width:none !important;}
 	.subnav1{max-height: 35px;}
 }

Cheers!

[admin]

You seem to be using some custom JS that doesn’t work properly:

        $(function(){

            var url = window.location.pathname, // in real app this would have to be replaced with window.location.pathname 
                urlRegExp = new RegExp(url.replace(/\/$/,'')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there

            // now grab every link from the navigation
            $('#centeredmenu a').each(function(){
                // and test its href against the url pathname regexp
                if(urlRegExp.test(this.href)){
                    $(this).addClass('active');
                }
            });

        });

To fix it, change the following line:

urlRegExp = new RegExp(url.replace(/\/$/,'')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there

like this:

urlRegExp = new RegExp(url.replace(/\/$/,'') || "index.php"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there

and then set your link like this:

<li><a href="index.php">Home</a></li>

Cheers!

[Author]

Posts