[admin]

Hi, you can test the feature with the “Sub test” -> “more…” sub menu in desktop view with a mouse. These variables control the scrolling speed of the sub menu when you hover either the bottom or top (not visible initially) scrolling arrows.

Supplying custom values for these options should work just like with all other options so I guess you just haven’t understood correctly what they are used for.

Let me know if you still have any questions.

[admin]

For me first click opening submenu and second navigating to parent menu page feels really natural on touch devices (its a little of “if at first you don’t succeed try again approach) but if adding a big toggle +/- button is becoming more popular these days I guess that would work just as well. Perhaps leave both as an option?

Actually, I’ve done a combination of both and I think it works really well – i.e. first tap activates the sub menu, second tap activates the parent item link and in addition a big button is available for toggling the sub menu at any time. So my plan is to stick to this as a default from the next release. There is still some work left on other features but it is coming soon I hope.

Cheers and thanks for your input again!

[admin]

Hi, you will need to edit the breakpoint in all media queries that contain .navbar styles. From what I can see, all of them are the following (in v3.3.1):

@media (min-width: 991px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar {
    border-radius: 4px;
  }
}
@media (min-width: 991px) {
  .navbar-header {
    float: left;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

/* ... */

@media (min-width: 991px) {
  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar-static-top {
    border-radius: 0;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar-toggle {
    display: none;
  }
}

/* ... */

@media (max-width: 990px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
@media (min-width: 991px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .navbar-form .form-control-static {
    display: inline-block;
  }
  .navbar-form .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .navbar-form .input-group .input-group-addon,
  .navbar-form .input-group .input-group-btn,
  .navbar-form .input-group .form-control {
    width: auto;
  }
  .navbar-form .input-group > .form-control {
    width: 100%;
  }
  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .radio label,
  .navbar-form .checkbox label {
    padding-left: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }
}
@media (max-width: 990px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
  .navbar-form .form-group:last-child {
    margin-bottom: 0;
  }
}
@media (min-width: 991px) {
  .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

/* ... */

@media (min-width: 991px) {
  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
  }
}
@media (min-width: 991px) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .navbar-right ~ .navbar-right {
    margin-right: 0;
  }
}

/* ... */

@media (max-width: 990px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

/* ... */

@media (max-width: 990px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}

[admin]

Hi, you can use the following API tweak:

$('#main-menu').bind('click.smapi', function(e, item) {
	var $item = $(item),
		level = $item.parent().parent().dataSM('level'),
		$sub = $item.parent().dataSM('sub');
	if (level == 1 && $sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
		$(this).smartmenus('menuHideAll');
		return false;
	}
});

Let me know if you still have any troubles.

Cheers!

[admin]

Hey Mario, thanks very much for sharing your thoughts and suggestions! I get your points and actually I’ve already been implementing some notable changes to the default behavior that should land in the next release (i.e. adding a big toggle +/- button to parent items in collapsible mode). So I will probably also consider the same approach for the Bootstrap plugin.

[admin]

Hehe, OK, I’ll keep that in mind.. 🙂

Cheers!

[admin]

Hi Max,

You cannot upload images directly here, you will need to upload to some image hosting site and then link them here. But, unfortunately, I doubt it would help very much if you just post a screenshot. That kind of error might be caused by many issues like invalid menu tree HTML structure (incorrectly nested tags, etc.), some JavaScript conflict, etc. So it’s really difficult to guess what exactly might be causing this without being able to test a live demo. So, if possible, please try to prepare some sort of test page that demonstrates the issue (I understand it would be impossible to test the real solution).

Thanks!

[admin]

OK, change the following:

#main-menu ul, #main-menu li {
	-webkit-transform: translate3d(0px, 0px, 1px);
}

to:

#main-menu ul, #main-menu a {
	-webkit-transform: translate3d(0px, 0px, 1px);
}

Seems it fixes both issues for me.

Let me know if you are still having any troubles.

Cheers!

[admin]

Hi, there will likely be a SASS version of the themes in the near future where it would be a bit easier to set the colors, etc. I have some ideas about reworking the CSS a bit in general so I would like to settle on that first. At some point a visual tool for editing the styles might be available too but this is probably not going to happen very soon (unless someone else creates it).

We will probably add a donation button but first we would like to get to v1.0.0 and start providing official support and then we’ll consider whether to accept donations too.

Glad you like the script, BTW! 🙂

[admin]

Thanks very much for your input (saw your pull request on GitHub too)!

However, currently when showOnClick is set to true, the menu tree behaves like desktop menus – i.e. a click activates the main menu items and after that their sub menus appear immediately on hover. The idea is that this makes sense for someone who wants to use the script for some kind of app that mimics desktop apps. So at least for now, I don’t plan to implement this change. I may think of introducing some new option in the future that would allow to change the behavior.

Thanks again!

[admin]

The problem is in the following file:

http://www.britishsteam.com/css/menu1.css

1) Remove the width: 1000px; declaration from the following rule:

li{
	font-size: 1em;
	font-weight: normal;
	margin-left: 10px;
	text-align: left;
	float: left;
	width: 1000px;
	color: black;
	background-color: transparent;
}

2) Change the selectors of these rules:

a:link{
	background-color: #ffffff;
	color: #0000cd;
	font-size: 12px;
	text-align: center;
	text-decoration: underline;
}

a:visited{
	background-color: #ffffff;
	color: #1e791e;
	font-size: 12px;
	text-align: center;
	text-decoration: underline;
}

like this (since they are too generic and affect the links in your menu too):

#main a:link{
	background-color: #ffffff;
	color: #0000cd;
	font-size: 12px;
	text-align: center;
	text-decoration: underline;
}

#main a:visited{
	background-color: #ffffff;
	color: #1e791e;
	font-size: 12px;
	text-align: center;
	text-decoration: underline;
}

3) You may want to check your page source in general too. You have 2 nested HTML elements.

Cheers!

[admin]

Np, at all! Cheers!

[admin]

Ah, sorry, yes now I noticed there is another version of jQuery linked further in the source of your page. If you would like to keep both versions or you are forced to do so (you are not able to reorder the scripts easily, etc.), then you can use the following to avoid the issue:

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

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

<!-- SmartMenus jQuery init -->
<script type="text/javascript">

	// we'll use this jQuery version just for the SmartMenus plugin to avoid conflicts
	var jqSM = $.noConflict(true);

	// note that now $ and jQuery are undefined and the SmartMenus functionality remains in jqSM

	(function($) {
		$(function() {
			$('#main-menu').smartmenus({
				subMenusSubOffsetX: 1,
				subMenusSubOffsetY: -8
			});
		});
	})(jqSM);
</script>

I’ve added some comments in the code to make it clear what happens.

Please let me know if you still have any troubles.

[admin]

Hi, please post some sort of live demo. It’s very difficult to guess what exactly might be wrong with your configuration without looking at your code.

Thanks!

[admin]

OK, it’s a path related issue. At the moment, on your search results page the following:

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

does not include jQuery correctly. Instead of linking to “jquery-loader.js” link directly to “jquery-2.1.1.js” – e.g.:

<script type="text/javascript" src="../smartmenus/libs/jquery/jquery-2.1.1.js"></script>

The loader script is used on the demo pages just to allow easy testing with different jQuery versions.

Cheers!

[admin]

To be honest, I am personally not completely convinced too which is the best approach. But I guess the most popular solution now is to use a separate element to just trigger the sub menu – e.g. a +/- icon button – and (also based on user feedback) I have actually now decided to switch to this behavior as a default in the next version. Though I will probably not do this for the Bootstrap add-on since I prefer to keep Bootstrap’s default behavior as this is just what most of its users would expect.

As for Bootstrap’s solution, it obviously has one disadvantage and it is that it does not allow activating the link of the parent item if it has an actual href set (unless the user long taps and activates the link via the browser context menu).

[admin]

Hi,

OK, I saw you already have your menu tree #menu styled for desktop view so basically you will just need to add some responsive styles to make sure it is transformed to a collapsible menu on small screens. You can find out how to do this by looking here:

http://www.smartmenus.org/docs/#small-screen-support

You will probably also need to tweak the look of your menu in collapsible mode by adding some additional rules inside the media query to override your existing desktop styles.

The other things are:

1) You will not need the following CSS at all since you already have styled your menu tree:

<!-- SmartMenus core CSS (required) -->


<!-- SmartMenus core CSS (required) -->


<!-- #main-menu config - instance specific stuff not covered in the theme -->

	#main-menu {
		position:relative;
		z-index:9999;
		width:auto;
	}
	#main-menu ul {
		width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
	}

2) Of course, you will need to switch from your current script to actually using the SmartMenus plugin for your menu tree. You currently have just linked the script but even your init code:

	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});

does not target #menu but #main-menu (the menu tree id on the default demos).

Finally, please note that the CSS work might turn out to be a bit tricky since I am not familiar with your existing CSS code but hopefully it won’t be a big trouble for you.

Hope this helps.

[admin]

Hi, it’s difficult to guess what exactly might be causing the issue without being able to test a complete live example so if possible, please post an URL to a live demo. It’s not clear from the code excerpts you’ve posted what might be the exact cause of the issue.

What you might want to double check are the paths to the JS files – make sure they are all properly loaded. I saw you are using relative paths so they might not work if you load pages in sub directories on your server. Another thing you might want to check is if your menu UL/LI/A structure is valid – if all tags are properly nested – this sometimes might cause the sub menus to not appear properly.

[admin]

Hi, sorry for the delay! I was on a vacation.

If the long sub menus don’t have any further sub menus, you could apply custom max-height via some additional CSS. For example, add the “scrolling-sub” class to the UL element of any long sub menu and then use the following additional CSS:

ul.scrolling-sub {
	max-height:500px;
	overflow-y:auto;
}

Cheers!

[admin]

Hi Jon! Sorry for this delay, I was on a summer vacation!

To be honest, I haven’t tested a similar scenario but I don’t see any reason why this wouldn’t work if everything is configured properly. Please double check if you are including all the CSS correctly (“sm-core-css.css” and the theme CSS file you use) as I suspect this might be the reason.

Cheers!

[admin]

Hi Ben, and sorry for this delay! I was on a summer holiday.

Yep, your observations are correct. When used with the Bootstrap addon the SmartMenus script would emulate Bootstrap’s behavior for collapsible menus – i.e. a tap/click on a parent item can only toggle its sub menu. To restore the default SmartMenus behavior – first click to show the sub menu and second to activate the link – you will need to edit “jquery.smartmenus.bootstrap.js” and delete/comment out the following code:

,
// click the parent item to toggle the sub menus (and reset deeper levels and other branches on click)
'click.smapi': function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
                var $item = $(item),
                	$sub = $item.parent().dataSM('sub');
                if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
                	obj.itemActivate($item);
                	obj.menuHide($sub);
                	return false;
                }
	}
}

Let me know if you still have any troubles.

Cheers!

[admin]

Sorry, for the delay! I was on a summer vacation.

Having a menu tree inside another menu tree is not a tested and supported scenario and all kinds of things could go wrong with events detection, etc. So, unfortunately, I can only recommend you to avoid it.

Multiple menu trees are supported but not if they are nested.

[admin]

Hi sorry for the delay! I was on a vacation.

By default the showOnClick: true option makes the menu tree behave like OS desktop menus where a click activates the tree and then the sub menus are activated immediately on hover. So you would need some sort of mod. The simplest one I can think of is to add the following code on your page after the SmartMenus jQuery code:

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

[admin]

Sorry for this delay! I was on a vacation.

The only way to achieve this is to completely disable the window size detection feature which means that you won’t be able to scroll such long sub menus at all after that. You can do so by editing “jquery.smartmenus.bootstrap.js” and adding the keepInViewport: false option – e.g.:

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

[admin]

Hi,
You will need to tweak the showTimeout option which defaults to 250ms. To do so, in the “jquery.smartmenus.bootstrap.js” file you will see 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,
						subIndicatorsPos: 'append',
						subIndicatorsText: '...',
						collapsibleShowFunction: null,
						collapsibleHideFunction: null,
						rightToLeftSubMenus: $this.hasClass('navbar-right'),
						bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
		})

You just need to add the option with some desired value (50ms in this example) like this:

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

Cheers!

[Author]

Posts