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.
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>
@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..
<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>
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 ?
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...
<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 -->
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.
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.
Comments
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.
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
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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>❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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 ?
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 -->❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
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.
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.