Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Vanilla 2.6 is here! It includes security fixes and requires PHP 7.0. We have therefore ALSO released Vanilla 2.5.2 with security patches if you are still on PHP 5.6 to give you additional time to upgrade.
Please upgrade to 2.3 here. The 2.2 and earlier branches are no longer being updated.

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?

Comments

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

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

    @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 ?

  • @vrijvlinder said:
    Try this plugin in case you can't figure that out...

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

    Thanks but I want to create multiple dropdown menus, I've checked the plugins before but it doesnt seems to be able to do so. Correct me if I'm wrong.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2015

    I want to create multiple dropdown menus

    You can. In fact you can create submenus and all sorts of stuff if you know how to make the html part of a drop down . You can add multiple links in just one of the entries in the index plugin. It only uses CSS to create the drop down, no jquery ...
    You can build a tree of links , menus and submenus.

    Look at this resource and study the html and css and apply it to your theme or the plugins.

    http://cssmenumaker.com/css-drop-down-menu

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

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2015

    This is how the html of a dropdown looks like , the Id and Class needs to be the same as the menu in your theme if you are going to use the css of the dropdown from the theme or the plugin.. or if you want it to match the theme...the link would go where the # is..

       <ul id="menu-bar">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Products</a>
          <ul>
           <li><a href="#">Products Sub Menu 1</a></li>
           <li><a href="#">Products Sub Menu 2</a></li>
           <li><a href="#">Products Sub Menu 3</a></li>
           <li><a href="#">Products Sub Menu 4</a></li>
          </ul>
         </li>
         <li><a href="#">Services</a>
          <ul>
           <li><a href="#">Services Sub Menu 1</a></li>
           <li><a href="#">Services Sub Menu 2</a></li>
           <li><a href="#">Services Sub Menu 3</a></li>
           <li><a href="#">Services Sub Menu 4</a></li>
          </ul>
         </li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact Us</a></li>
        </ul>
    
    Gogito
  • @vrijvlinder said:
    This is how the html of a dropdown looks like , the Id and Class needs to be the same as the menu in your theme if you are going to use the css of the dropdown from the theme or the plugin.. or if you want it to match the theme...the link would go where the # is..

       
    

    I'll look into this and try out some stuffs. Thanks @vrijvlinder .
    But to the main topic can anyone help me achieve the menu like the OP, I mean @Kasper provided the instruction for version 2.3.0 and it worked, I'm on 2.5.1, shouldn't it also work ?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2015

    Ok, let me put it another way maybe you don't understand english well...

    This is what Kasper said to do in his theme which he only supports at github and you insist in coming here for this... but se it again and compare this to the example I gave you. It is the same structure for any dropdown in the entire world of html...

                    <div class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">//this is the main menu bar of the theme the links bellow are the default links
                        {home_link}
                        {categories_link}
                        {discussions_link}
                        {activity_link}
                        <li class="dropdown">//this is the dropdown item 
                          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>//this is the link that toggles the dropdown when you hover
                          <ul class="dropdown-menu">//this is the actual dropdown and the links bellow are in the dropdown
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                          </ul>
                        </li>
                       <li class="dropdown"  id="menu 2">//this is the dropdown item 
                          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>//this is the link that toggles the dropdown when you hover
                          <ul class="dropdown-menu">//this is the actual dropdown and the links bellow are in the dropdown
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                          </ul>
                        </li>
     <li class="dropdown"  id="menu 3">//this is the dropdown item 
                          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>//this is the link that toggles the dropdown when you hover
                          <ul class="dropdown-menu">//this is the actual dropdown and the links bellow are in the dropdown
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                          </ul>
                        </li>
     <li class="dropdown"  id="menu 4">//this is the dropdown item 
                          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>//this is the link that toggles the dropdown when you hover
                          <ul class="dropdown-menu">//this is the actual dropdown and the links bellow are in the dropdown
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                          </ul>
                        </li>
     <li class="dropdown"  id="menu 5">//this is the dropdown item 
                          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>//this is the link that toggles the dropdown when you hover
                          <ul class="dropdown-menu">//this is the actual dropdown and the links bellow are in the dropdown
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                            <li><a href="link">link name</a></li>
                          </ul>
                        </li>
                      </ul>
                      [...]
                    </div><!--/.nav-collapse -->
    
  • @vrijvlinder said:
    Ok, let me put it another way maybe you don't understand english well...

    This is what Kasper said to do in his theme which he only supports at github and you insist in coming here for this... but se it again and compare this to the example I gave you. It is the same structure for any dropdown in the entire world of html...

                    
    
    >
      //this is the main menu bar of the theme the links bellow are the default links > {home_link} > {categories_link} > {discussions_link} > {activity_link} >
    • //this is the dropdown item > Dropdown //this is the link that toggles the dropdown when you hover > >
    • >
    • //this is the dropdown item > Dropdown //this is the link that toggles the dropdown when you hover > >
    • >
    • //this is the dropdown item > Dropdown //this is the link that toggles the dropdown when you hover > >
    • >
    • //this is the dropdown item > Dropdown //this is the link that toggles the dropdown when you hover > >
    • >
    • //this is the dropdown item > Dropdown //this is the link that toggles the dropdown when you hover > >
    • >
    > [...] >

    Yeah, I know that @Kasper only support his theme at Github but seeing this problem has been solve for the OP, I migt as well give it a try. And actually, I tried your example and @Kasper but they all got stuck at the point of not showing the item when I hover.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited June 2015

    You need Node, Gulp, and Bower in order to re-compile the theme assets for the dropdowns to work. Using the non stable version just to make drop-downs is silly..

    Use my plugin Index and add the html to the default.master.tpl and see if that works. All you need is the html structure and the css for any dropdown to work. But you seem stubborn and not want to learn what it takes to understand all this.

    This discussion is a year old. The OP has not been back. Maybe you can e mail them or message them and ask them to tell you what they did other than what we all have said in one way or another...

  • Well, actually, ever since you sent me that, I've been looking up for stuffs but then I notice that the html structure and all that stuffs are working just the dropdown function isn't. So I looked up Bootstrap and js and such and notice that Kasper told the OP to use ver 2.3.0 which at that time was unstable because he has already implemented all the necessary components in it so that the OP doesn't have to recompile them. But now the stable ver is 2.5.1 so I thought that it would work. But it seems something is still missing since the hover doesn't work but all the link and such does. I've even tried to implement my own Dropdown menu following bootstrap instructions ( which looks a lot like the code above ) and it still has the same problem. Well, that's all the info I can provide. Thanks @vrijvlinder for habing been patient with me and helping me understand a bit more about html ( I managed to solve something menu related thanks to that). If anyone can help then I'd be very appreciated but it looks like I'm gonna have to file an issue on Github and look for a solution in the meantime.

    vrijvlinder
Sign In or Register to comment.