[admin]

Hello, that’s a lot of very basic questions and, unfortunately, I have the feeling it would be quite difficult for you to figure it out on your own. It would take less time for me to prepare a demo page, rather than trying to address all your questions. So please just let me know what exactly you need and I will pack a demo for you – which one of these:

1) Complete navbar .sm-mint
2) Full Width Mega Menu

?

A note about the Bootstrap addon – if you would like to use the “sm-mint” SmartMenus theme, you don’t need the addon. The addon is needed in case you would like to use Bootstrap’s theme.

[admin]

Here are the recommended solutions to the issues you are having. You won’t need to customize anything in the script core – you just need a bit additional CSS and JS. And the result is a fully accessible sub menu (screen readers/keyboard):

https://jsfiddle.net/zLnqcb6y/28/

But again, in order the sub menu to be fully accessible to screen readers and keyboard users I strongly recommend using the following HTML for your parent “Search” menu item:

<a href="#">Search</a>

[admin]

Yep, of course, it’s as simple as deleting all the desktop styles from your theme CSS file (e.g. “sm-blue.css”) – i.e. this whole part:

@media (min-width: 768px) {
  ...
}

[admin]

Sorry for getting back late! Could you please post the HTML content of one of your main menu <li>‘s? I am not sure why you would need to wrap all those kinds of elements inside the link (if you use a link instead of a <span> that is). You could put those elements as siblings of the link instead.

[admin]

Yes, the script requires <a> elements for triggering the sub menus so some modifications would be needed if you would like to use <span>‘s instead.

However, I am not sure there is any serious reason for not using <a>‘s, is there? You could even omit the href attribute if you like (not advisable) and it would still work properly with mouse/touch:

...
<li><a>About</a>
  <ul>
    ...

On the other hand, there is a serious reason for using <a>s inside parent menu items (and not omitting the href as in the above example) – without a link element your parent menu item loses its ability to gain focus and thus the sub menu becomes completely inaccessible via the keyboard (unless you specifically add a tabindex attribute to your <span>‘s but that is still not a perfect replacement for a real link).

[admin]

Hi, sorry for the delay! You’d need to use this option data-sm-options="{ markCurrentItem: true }" – this will make sure the script adds the “current” class automatically to the <a> element linking to the current URL.

And then include some additional JS at the end of you pages – something like this:

// SmartMenus jQuery + Bootstrap 4 - expand active sub menu on mobile toggle button click
$('.navbar-toggler').click(function() {
  var $nav = $('.navbar-nav');
  if (!$(this).is('[aria-expanded="true"]')) {
    // use the timeout to make sure it works after the navbar is expanded by the BS JS
    setTimeout(function() {
      $nav.smartmenus('itemActivate', $nav.find('a.current').eq(-1));
    }, 1);
  } else {
    $nav.smartmenus('menuHideAll');
  }
});

(You may need to change the selectors if you have multiple .navbar-toggler/.navbar-nav elements on your pages.)

[admin]

Hi, it can’t be achieved very easily. It’s designed to work like a desktop app menu – as soon as some sub menu is activated (via Enter, Space or Down arrow) just moving around the focus via the arrow keys activates any other sub menus automatically until Esc is pressed. So it’s toggleable behavior but for the whole menu tree.

[admin]

You could use something like this to hide/show your second menu when a sub menu of your first menu is activated:

var $mainMenu2 = $('#main-menu2');
$('#main-menu').on({
  'show.smapi': function(e, menu) {
    $mainMenu2.css('visibility', 'hidden');
  },
  'hideAll.smapi': function(e, menu) {
    $mainMenu2.css('visibility', '');
  }
});

But I’d suggest a more elegant solution – i.e. to just alter the first menu’s z-index so that its sub menus simply appear on top of the second menu:

$('#main-menu').on({
  'show.smapi': function(e, menu) {
    $(this).css('z-index', 10000);
  },
  'hideAll.smapi': function(e, menu) {
    $(this).css('z-index', '');
  }
});

[admin]

Hi, it’s not because of “popper.js”, it’s because you are using an old version of the SmartMenus Bootstrap addon which is for Bootstrap 3 but at the same time you are using Bootstrap 4. So you would need to do a few things to cope properly with the issue:

1) Download the latest SmartMenus release and upgrade all your files:

/typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.js
/typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.bootstrap.js
/typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.keyboard.js

/typo3conf/ext/demotemplate/Resources/Public/CSS/smartmenus/jquery.smartmenus.bootstrap.css

with the latest versions (and make sure you are using “jquery.smartmenus.bootstrap-4.js” and “jquery.smartmenus.bootstrap-4.css” instead of “jquery.smartmenus.bootstrap.js” and “jquery.smartmenus.bootstrap.css”).

2) You are also using some custom classes in your HTML menu structure so you would need to change them to avoid some issues (like the menu not being initialized at all, duplicate sub menu indicator arrows, etc.)

a) Add the “navbar-nav” class to your root UL element:

<ul class="nav flex-row navbar-nav smartmenus d-print-none" ...

b) I saw you have modified the Bootstrap addon to add a few custom options. Now you don't need to do that, instead just set the "data-sm-options" attribute on the root UL element like this:

<ul class="nav flex-row navbar-nav smartmenus d-print-none" data-sm-options="{ subMenusSubOffsetX: 0, subMenusSubOffsetY: -7, mainMenuSubOffsetX: -8, showTimeout: 100, subMenusMinWidth: '15em', subMenusMaxWidth: '', keepInViewport: false, keepHighlighted: false }"> ...

c) Replace all instances of "dropdown-submenu" with "dropdown" - e.g.:

<li class="dropdown-submenu">

should become:

<li class="dropdown">

d) Replace all instances of "dropdown-toggle-submenu" with "dropdown-toggle" - e.g.:

<a href="http://p192195.typo3server.info/de/aktuelles/neuigkeiten/" class="dropdown-item dropdown-toggle-submenu">Neuigkeiten</a>

should become:

<a href="http://p192195.typo3server.info/de/aktuelles/neuigkeiten/" class="dropdown-item dropdown-toggle">Neuigkeiten</a>

The above should fix all major issues. From what I can see, you may just need additionally to tweak your main menu items' padding since adding the "navbar-nav" class seems to affect it.

[admin]

You mean this?

http://vadikom.github.io/smartmenus/src/demo/bootstrap-4-navbar-fixed-top.html

The sample code is displayed on the demo page, you could also look in its source..

[admin]

Sorry for the delay! I’ve been overwhelmed with tasks these days.. 🙁

I got a chance to test it – the fixed height declaration in the following rule causes the issue:

.main-navwrapper {
	height:50px;
}

I’d just remove it.

[admin]

Sorry, I cannot test your page – I get this:

This site has been blocked by the network administrator.
Block reason: Gateway GEO-IP Filter Alert

IP address: 91.139.x.x

Connection initiated from country: Bulgaria

[admin]

Hi, could be achieved in different ways but here’s what I came up with at the moment:

1) First use collapsibleBehavior: 'accordion-link' instead.

2) Then use the following additional JS:

// SmartMenus jQuery - for href="#" items, expand sub menu (if available) on first tap
$('#main-menu').on('select.smapi', function(e, item) {
  var obj = $(this).data('smartmenus'),
      $item = $(item);
  if (obj.isCollapsible() && $item.is('[href="#"]')) {
    var $sub = $item.dataSM('sub');
    if ($sub && !$sub.is(':visible')) {
      obj.itemActivate($item, true);
    }
    return false;
  }
});

[admin]

Hi, not sure I get it. If you need two menu, then, yes, you could add unlimited number of menus.

[admin]

A couple of issues. You are loading jQuery, Bootstrap’s JS and a few other scripts with an “async” attribute added:

<script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
...
<script async src="stuff/bootstrap.min.js"></script>
...
<script async src="stuff/swapimgrestore.js"></script>
<script async src="stuff/smoothlinkscroll.js"></script>

In short, this does not guarantee the other they are actually loaded/executed by the browser and they depend on proper load order (jQuery needs to be loaded first). You may need to learn a bit more how “async”/”defer” work if you would like to use any of them.

Quick solution is to remove the “async” attribute or replace it with “defer” (which preserves the script orders as linked in the source) but you will also need to add it to all other scripts you use that rely on jQuery.

Second issue – in “stuff/smoothlinkscroll.js” the following line produces a JS error:

$('a[href*=#]:not([href=#])').click(function() {

you need to change it like this:

$('a[href*="#"]:not([href="#"])').click(function() {

Cheers!

[admin]

Ah, yes, there is also one more media query you need to update the same way in “/stuff/smartmenu/sm-mint-button.css”. That should fix it.

[admin]

Just get the new version 1.1.0. It is now compatible with jQuery “slim” releases.

[admin]

@gerdhuber and the addon is now released 🙂

[admin]

Sorry, unfortunately, I’ve not been able to visit the forums lately due to lack of any free time whatsoever!

You just need to edit the breakpoint at which the menu switches from collapsible to desktop mode. In “/stuff/smartmenu/sm-mint.css” find the following instances:

@media (min-width: 768px) {

and increase the value to something like “910px” for all of them.

[admin]

This is not possible since the menu tree is a truly hierarchical structure with nested elements and if we apply “overflow: hidden” to some parent menu (in order to clip it as you like), we won’t be able to display any sub menus it has. That’s why it’s only possible to use the browser viewport as a scrolling container.

[admin]

I have no idea what might be causing it from this short code excerpt. If possible, please post some kind of demo URL or send me a one page ZIP-ed demo via email:

https://www.smartmenus.org/contact/

[admin]

Could you please post some kind of demo URL? Obviously something on your WordPress pages causes the issue.

[admin]

Yep, as you’ve noticed, by default the addon mimics Bootstrap’s default behavior so the sub menus are not animated in collapsible mode. So, you would need the following options:

collapsibleShowFunction: function($ul, complete) {
	$ul.slideDown(200, complete);
},
collapsibleHideFunction: function($ul, complete) {
	$ul.slideUp(200, function() {
		$ul.parent().removeClass('open');
		complete();
	});
}

And also another small change in “jquery.smartmenus.bootstrap.js” – comment out/remove the following code:

,
'hide.smapi': function(e, menu) {
	$(menu).parent().removeClass('open');
}

Alternatively, if you would like to avoid editing “jquery.smartmenus.bootstrap.js”, you could add the options directly in the HTML source in a data-sm-options attribute:

https://www.smartmenus.org/docs/#data-sm-options

and add the following JS code on your page after the link to “jquery.smartmenus.bootstrap.js”:

$(function() {
	$('ul.navbar-nav:not([data-sm-skip])').unbind('hide.smapi');
});

Cheers!

[admin]

It would be possible to reuse some of the styles from a given jQuery UI theme by applying some the defined classes in it to the menu tree elements but there is currently no simple way to just reuse a jQuery UI theme since it wouldn’t cover all the needed styles for the menus.

[admin]

Yes, there will surely be an addon at some point but since Bootstrap 4 is still in alpha I’d prefer to wait a bit more for it. So for now you would need to use a generic SmartMenus navbar with some theme like this one, for example:

http://www.smartmenus.org/about/themes/#themes-5

You could also customize it further if you like.

[Author]

Posts