How to create custom dropdown menu in main nav?

sgendry

I know how to add a custom link in the main menu, but what code would I need to use to have a custom dropdown menu?

whu606

You might have a look at this theme to see how @vrijvlinder did it:

http://vanillaforums.org/addon/heavymetal-theme

vrijvlinder

You can also have a look at this

http://vanillaforums.org/discussion/22689/how-to-create-a-dropdown-menu#latest

You can also use this to make one purely with css

http://www.cssportal.com/css3-menu-generator/#

You can also try this plugin it adds the dropdown index to the menu and you add your links in the js file

http://vanillaforums.org/addon/index-plugin

sgendry

Thank you! I have installed http://vanillaforums.org/addon/900/add-menu-item and updated default.master.php as suggested in vanillaforums.org/discussion/22689/how-to-create-a-dropdown-menu#latest. It doesn't work. But if I copy default.master.php inside of /vanilla/themes/bootstrap/views then I can see the sub-list but it breaks the theme. What am I missing?

peregrine

http://vanillaforums.org/discussion/22689/how-to-create-a-dropdown-menu

dropdown menus really need to be fitted for theme (and may not even look good in a particular theme), otherwise it will look crappy, imho.

vrijvlinder

In order for the dropdown for menu item or like the examples I give in the tutorial you need to also add a js to the master or via a plugin. The index plugin only uses css but to make the php link drop down you need this code below.

<script type="text/javascript">
var ddmenuitem = 0;
var menustyles = { 'visibility':'visible', 'display':'block', 'z-index':'9'}

function Menu_close()
{  if(ddmenuitem) { ddmenuitem.css('visibility', 'hidden'); } }

function Menu_open()
{  Menu_close();
   ddmenuitem = $(this).find('ul').css(menustyles);
}

$(document).ready(function(){
  $('ul#Menu > li').bind('mouseover', Menu_open);
  $('ul#Menu > li').bind('mouseout', Menu_close);
});
document.onclick = Menu_close;
</script>

You would then make the links like this and they will show below the Home link or Menu link.

$this->Menu->AddLink('Home', T('Home'), '/');
$this->Menu->AddLink('Home', T('Games'), 'games');
$this->Menu->AddLink('Home', T('Gallery'),'http://www.vrijvlinder.com/forum/gallery',array('Garden.SignIn.Allow'));
$this->Menu->AddLink('Home',T('FrontPage'), 'plugin/FrontPage');

If the elements in the theme are named something else, for example if the #Menu is called something else in the theme you will need to adjust the js to find the elements.

vrijvlinder

If you look at the themes, DarkMetal and DeepSea along with others I have made they have this system built in. You can simply copy it for yourself. Just look at the default.master.php and you will see how I did it.

The Index plugin is a great choice because it works on mobile too and even tpl based themes. And you can add many normal html links in it .

sgendry

Thank you vrijvlinder. This is helpful. Forgive my ignorance, but it seems that to make your solution work with the Bootstrap theme I am going to have to play around with the css and that's going to be messy. You use

<

div class="Menu"> but Bootstrap uses class="nav navbar-nav", and how do I reconcile that without too much of a headache?

One of the bootstrap styles clearly shows a dropdown in the header, but they don't explain anywhere (as far as I can see) how to do it. Does it have to be so complicated?

vrijvlinder

It really is not complicated. I don't use bootstrap I make my own themes. But the idea is the same.

Is it a default.master.php ?

If it is just go in there and change the links your self.

to understand the drop down:

You have the main container of the the drop down

If .Menu or div class = Menu in my example, then that is class=nav

then you have the ul for that in my themes and the default style that is #Menu because that is the id of the ul that contains the drop down list (li)

You can simply change the #Menu id to reflect the one in you theme.

There are two ways of doing this. One is using the js I posted above along with editing the php links in the master.

The other is adding the links as html and using the css as with the plugin Index.

You can install index plugin or copy the css into your theme. But will need to change the names for the classes to reflect the names for the classes in your theme.

so all the .Menu are .nav and all the #Menu are whatever the ID for that ul is in your theme.

This is why I prefer to use the names as in the default style of Vanilla when I make themes.

Kasper

Right, so this is getting awfully overcomplicated. For the love of all that is holy, please use what's available out-of-the-box: http://getbootstrap.com/javascript/#dropdowns

Also, as a pedantic performance optimization the dropdown component still isn't compiled by default as of v2.2.2 (https://github.com/kasperisager/vanilla-bootstrap/issues/23). This will change in v2.3.0 where all components will be compiled by default and optimization be left up to the individual developer.

sgendry

Thank you Kasper. For the sake of this discussion and for the non-programmers out there like myself, would you mind giving a practical example? You may even want to include that in the Bootstrap documentation. It's bound to be of interest to some people.

Where would the above fit here?

{t c="Toggle navigation"} {logo}

{home_link} {categories_link} {discussions_link} {activity_link}

{if $User.SignedIn}

{module name="MeModule"}

{profile_link} {inbox_link} {bookmarks_link} {dashboard_link} {signinout_link}

{else}

• {link path="entry/register" text="Register" target="current"}
• {link path="signin" text="Sign In" target="current"}

{/if}

Kasper

Not a problem! The following will work as-is using the current master branch (upcoming v2.3.0):

[...]
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    {home_link}
    {categories_link}
    {discussions_link}
    {activity_link}
    <li class="dropdown">
      <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
  [...]
</div><!--/.nav-collapse -->
[...]

sgendry

Thank you! It doesn't work "as is" on my end but we're an important step closer to the final solution. I have read https://github.com/kasperisager/vanilla-bootstrap/issues/23 and added @import (multiple) "@{bootstrap}/dropdowns"; to my custom.less but did not understand your PS "add the corresponding Javascript file to the scripts task and then run it: https://github.com/kasperisager/vanilla-bootstrap/blob/v2.0.3/gulpfile.js#L25-L36".
I don't want to be difficult or picky, and would you mind doing a really basic 1-2-3 list of how to make this work? What is "the scripts" and where do I find this file + which "corresponding js file" are you talking about?

Kasper

The following will work as-is using the current master branch (upcoming v2.3.0):

That highlighted part is pretty important

The easiest would by far be updating your theme to the pre-release version as you'd otherwise have to get setup with Node, Gulp, and Bower in order to re-compile the theme assets for the dropdowns to work.

P.S.: Clicky

sgendry

Thank you! (just saw your PS)

sgendry

What can I say? Sir, you rock. Case closed. It works beautifully.

Kasper

Awesomesauce, and thanks! Glad it worked out

Codervault

you really shouldn't have to go through all this to get dropdowns to work since bootstrap comes with jquery enabled dropdowns already. You just need to edit your code in the themes default.master file.

whu606

@Codervault‌

I'm not sure what your comment has added here?

That's precisely what Kasper explains how to do.

Gogito

I've tried adding the code that @Kasper suggested but this is as far as I've got

I added links to all the href in the tpl file but the only one that works is the top. The rest just don't show.

I'm using 2.5.1 so I don't think I need to do the stuffs listed in the issues.
But I did gave it a try and I can only find the cosmo.less file ( I'm using the cosmo view ) and add the import line to it
But I got stuck at the js step.

So, am I missing something or is it that I have to follow the step in the issues ? And if so, how ?

vrijvlinder

Try this plugin in case you can't figure that out...

http://vanillaforums.org/addon/index-plugin