Hi,

Is there a possibility of combining the "mobile navigation" module and the "nice-menu" module?

Regards

Most helpful answers

Sure.  I used the wrong terminology with 'layout' given that that's actually seperate than theme files in Backdrop.

I don't know what theme you're using, but if it's a core one you'll want to make a copy of it and put that copy in your /themes/ directory first so your changes aren't over-written when you do core updates.  For example, if you're using Bartik, copy the folder bartik from /core/themes/ and stick it in /themes/.  Then make the following changes on your 'custom' version there.

Anyway, once that's straight grab the hc offcanvas files first if you haven't already.  You just need the 2 css and single js file.  

https://github.com/somewebmedia/hc-offcanvas-nav/tree/master/dist

Stick them in a directory (or different directories if you want to separate the css and js) on your site.  Doesn't really matter where, but probably easiest to keep them in your themes folder.  Using Bartik as an example again, put the 2 css files in /themes/bartik/css/ folder and the js in /themes/bartik/js/ (Bartik doesn't have this /js/ folder by default, so just add it.)  Again, do this in your custom themes folder, not the themes folder inside /core/.

Next link the js file and ONE of the CSS files from backdrop (they're just different color schemes so you don't need both, just pick your favorite.)

There's more than one way to do that, easiest is just to add them in your themes .info file using Bartik as an example again, open Bartik.info and add:

name = Bartik
description = Legacy front-end theme.
version = BACKDROP_VERSION
type = theme
backdrop = 1.x

stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[all][] = css/hc-offcanvas-nav.carbon.css
stylesheets[print][] = css/print.css

; Include a style sheet in the rich-text editor.
ckeditor_stylesheets[] = css/editor.css

scripts[] = js/hc-offcanvas-nav.js

You'll note I've picked the hc-offcanvas-nav.carbon.css file, that could be the other css file if you prefer it.

Now all that's left is adding the actual script call somewhere to make things work.  I personally made a copy of page.tpl.php to my custom theme and added the code there, but I suppose you could add a block too that gets called on every page.  If you go the way I did, copy page.tpl.php from /core/modules/system/templates and paste it into your custom themes template folder, i.e. /themes/bartik/templates/page.tpl.php

Add the script to the bottom of that template file (right above the closing body tag)

<script>
$('#nmenu').hcOffcanvasNav({
    side:'left',
    levelOpen:'overlap',
    levelSpacing:40,
    disableAt:700,
    position:'right',
    keepClasses:false,
    navTitle:'Menu',
    keepClasses: false
});
</script>    

Most of the parameters there can be changed to your liking, you can test some out here: https://somewebmedia.github.io/hc-offcanvas-nav/ and the details are explained at https://github.com/somewebmedia/hc-offcanvas-nav

Real quick though, in the above example #nmenu is the name of the HTML element my nice menu is within. <nav id="nmenu">  That's going to depend on where your menu is and what theme you're using, etc, but if you look at your source code it shouldn't be hard to find the parent container of the menu you want to change (the id or class of whatever is preceeding the nice menu, i.e. #menu or .menu)

disableAt is the width in pixels you want to replace the menu at, most of the other stuff is just a matter of preference (and there are more options available.)

Try it out, don't forget to make sure you have the right theme selected if you're copying over a core theme, and flush the cache. If it's not working look at the source of the page real quick to make sure all the code is showing, if it is double check you're using the right reference to the html element.

Hope that helps, but let me know if you have any questions.

Rather than try and find a module for the responsive part, I personally use HC Off Canvas along with nice menus. 

It's pretty simple, just link a couple extra css/js files from your theme, then add a jquery call in your layout on the same element your nice menus currently reside in.

That way it's still nice menus until whatever break point you set, then off canvas will turn it mobile with the same nested menus.  There's no module for it so all the configuration is done with the jquery call - but it's easy enough.

If you're still looking for something and need a better walkthrough let me know.

Comments

can I deduce from this total lack of response that it is not possible to make the "nice-menu" module and the reading on a mobile?

@philippeg - I would not deduce anything from the lack of response, other than the fact that those of us who watch this forum regularly, don't have a clear answer for you. 

Personally, I'm not directly familiar with the modules you mentioned and don't know what it would take to combine the two as you suggest. 

If you don't get a reply here. Here are a few options:

1) Provide more information. Maybe tell us more about what you are trying to accomplish with "mobile navigation" module and the "nice-menu" module? Mobile navigation is pretty clear, but what does the n"nice-menu" module do for you? What is the problem you are trying to solve?

2) You try reaching someone in Zulip (our chat platform). Sometimes you run into different people there than you do in the forum and they might have different areas of knowledge or expertise. https://backdropcms.org/support/resources

3) You could also drop in on one of our weekly live dev meetings and ask us a question before, during or after the meeting. https://backdropcms.org/news/meetings

4) Try posting a feature request in the issue queue for either of the modules you mentioned

I can't guarantee a response in any of these venues. But, you will reach different people in each place, any of which might get you additional information.

Thanks for your answser

that i wanted to do is to use nice-menu with smartphone i tought that maybe using navigation menu could help like it helped with a normal menu ...nice menu add a nice movement for sub menus but don't work responsive ..

Rather than try and find a module for the responsive part, I personally use HC Off Canvas along with nice menus. 

It's pretty simple, just link a couple extra css/js files from your theme, then add a jquery call in your layout on the same element your nice menus currently reside in.

That way it's still nice menus until whatever break point you set, then off canvas will turn it mobile with the same nested menus.  There's no module for it so all the configuration is done with the jquery call - but it's easy enough.

If you're still looking for something and need a better walkthrough let me know.

Thanks for your answser :

add a jquery call in your layout on the same element your nice menus currently reside in."  how i can do that ?

Thanks

Sure.  I used the wrong terminology with 'layout' given that that's actually seperate than theme files in Backdrop.

I don't know what theme you're using, but if it's a core one you'll want to make a copy of it and put that copy in your /themes/ directory first so your changes aren't over-written when you do core updates.  For example, if you're using Bartik, copy the folder bartik from /core/themes/ and stick it in /themes/.  Then make the following changes on your 'custom' version there.

Anyway, once that's straight grab the hc offcanvas files first if you haven't already.  You just need the 2 css and single js file.  

https://github.com/somewebmedia/hc-offcanvas-nav/tree/master/dist

Stick them in a directory (or different directories if you want to separate the css and js) on your site.  Doesn't really matter where, but probably easiest to keep them in your themes folder.  Using Bartik as an example again, put the 2 css files in /themes/bartik/css/ folder and the js in /themes/bartik/js/ (Bartik doesn't have this /js/ folder by default, so just add it.)  Again, do this in your custom themes folder, not the themes folder inside /core/.

Next link the js file and ONE of the CSS files from backdrop (they're just different color schemes so you don't need both, just pick your favorite.)

There's more than one way to do that, easiest is just to add them in your themes .info file using Bartik as an example again, open Bartik.info and add:

name = Bartik
description = Legacy front-end theme.
version = BACKDROP_VERSION
type = theme
backdrop = 1.x

stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[all][] = css/hc-offcanvas-nav.carbon.css
stylesheets[print][] = css/print.css

; Include a style sheet in the rich-text editor.
ckeditor_stylesheets[] = css/editor.css

scripts[] = js/hc-offcanvas-nav.js

You'll note I've picked the hc-offcanvas-nav.carbon.css file, that could be the other css file if you prefer it.

Now all that's left is adding the actual script call somewhere to make things work.  I personally made a copy of page.tpl.php to my custom theme and added the code there, but I suppose you could add a block too that gets called on every page.  If you go the way I did, copy page.tpl.php from /core/modules/system/templates and paste it into your custom themes template folder, i.e. /themes/bartik/templates/page.tpl.php

Add the script to the bottom of that template file (right above the closing body tag)

<script>
$('#nmenu').hcOffcanvasNav({
    side:'left',
    levelOpen:'overlap',
    levelSpacing:40,
    disableAt:700,
    position:'right',
    keepClasses:false,
    navTitle:'Menu',
    keepClasses: false
});
</script>    

Most of the parameters there can be changed to your liking, you can test some out here: https://somewebmedia.github.io/hc-offcanvas-nav/ and the details are explained at https://github.com/somewebmedia/hc-offcanvas-nav

Real quick though, in the above example #nmenu is the name of the HTML element my nice menu is within. <nav id="nmenu">  That's going to depend on where your menu is and what theme you're using, etc, but if you look at your source code it shouldn't be hard to find the parent container of the menu you want to change (the id or class of whatever is preceeding the nice menu, i.e. #menu or .menu)

disableAt is the width in pixels you want to replace the menu at, most of the other stuff is just a matter of preference (and there are more options available.)

Try it out, don't forget to make sure you have the right theme selected if you're copying over a core theme, and flush the cache. If it's not working look at the source of the page real quick to make sure all the code is showing, if it is double check you're using the right reference to the html element.

Hope that helps, but let me know if you have any questions.