HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

How to create custom dropdown menu in main nav?

This discussion is related to the Bootstrap addon.

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?

Tagged:
«1

Comments

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

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

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

    hgtonightperegrinevrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2014

    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

    whu606peregrine
  • 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?

  • peregrineperegrine MVP
    edited June 2014

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2014

    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.

    peregrine
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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 .

  • sgendrysgendry New
    edited June 2014

    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?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited June 2014

    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.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    vrijvlinder
  • 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?

    vrijvlinder
  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited June 2014

    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 -->
    [...]
    

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    hgtonightperegrinevrijvlinder
  • sgendrysgendry New
    edited June 2014

    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?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited June 2014

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

    That highlighted part is pretty important :wink:

    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

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

    peregrinehgtonight
  • sgendrysgendry New
    edited June 2014

    Thank you! (just saw your PS)

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

    vrijvlinderhgtonight
  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    Awesomesauce, and thanks! Glad it worked out :wink:

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • edited December 2014

    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.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    @Codervault‌

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

    That's precisely what Kasper explains how to do.

  • GogitoGogito New
    edited June 2015

    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 ?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
Sign In or Register to comment.