Shop OBEX P1 Docs P2 Docs Learn Events
Bootstrap drop down menu — Parallax Forums

Bootstrap drop down menu

Hi again.
Im playing with the Bootstrap menu examples found at w3scools.com
I see how to make a simple drop down menu with one generation child items but need grandchild items too, or even more generations. I've tried several ways but it won't work. Seems like Bootstrap is made for only one single drop down as I haven't found any example of an expanded menu anywhere.
Here is the code example I found added with my own code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script&gt;
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script&gt;
</head>
<body>

<div class="container">
<h2>Tab with Dropdown Menu</h2>
<ul class="nav nav-tabs" role="tablist">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Tutorials <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
---My code begins here---
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
More items <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
</li>
---My code ends here---
</ul>
</li>
</ul>
</div>

</body>
</html>

The menu items does not contain anything but thats not the issue here.
Does anyone have any idea if its possible to make an expanded menu here?
Best regards!
KjellO

Comments

  • Heater.Heater. Posts: 21,230
    Moscog,

    That's a bit of an odd question around here. Pehaps better suited to stackoverflow or something.

    Anyway, I was curious. Turns out it looks like you need bootstrap 3 and it's multi-level dropdowns:

    http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

    I can't for the life of me find "dropdown-menu multi-level" and "dropdown-submenu" mentioned in the documentation anywhere.
  • Heater.Heater. Posts: 21,230
    edited 2016-03-07 09:37
    Hmm...it's in the bootstrap 2.3.2 documentation:
    http://getbootstrap.com/2.3.2/components.html
  • I face with the problem using bootstrap quite often...Do you know any other similar but easier frameworks?
    thanks
  • Heater.Heater. Posts: 21,230
    edited 2016-03-16 15:44
    Hey, what happened? John_sky had a question here about alternatives to bootstrap and I came to answer.

    Anyway, thing is I am no serious web developer but I have been looking into all kind of web "frameworks" and libraries for a while now.

    Basically this can drive one crazy, there are hundreds of such things and new ones have been growing like weeds in recent years.

    Mostly I decided I didn't like any of them much better than hacking on the browser DOM API directly. Which is of course horrible. I hate a "framework" that dictates what and how I construct my code.

    A big contenders just now are Angular, from Google. I hate it, to big, to complex, generally yuky. And besides they are about to replace it with Angular 2 which is very different. What a mess.

    The other big contender is react.js from Facebook. That suits me fine. Much simpler. Restricts itself to displaying components without imposing any frameworky ideas on the rest of your code.

    Meanwhile bootstrap is great for dealing with all that CSS gibberish, creating grids and such, making your layout work on big screens and mobile phones. I do not use any of the Javascript that comes with boostrap. That means using jQuery, gak.

    So, the sweet spot form me just now is bootstrap so I don't need to think about CSS. There are lots of bootstrap themes one can use. And React.js for simple and fast component creation and display.

    See my ongoing simple demo/experimental page here: https://devserv.rsmtech.fi/login Source code here: https://bitbucket.org/zicog/propanel/src











Sign In or Register to comment.