Bootstrap drop down menu
Moskog
Posts: 554
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</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
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</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
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.
http://getbootstrap.com/2.3.2/components.html
thanks
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