Show/hide menu sublist in a navigation bar with bootstrap - javascript

I have a question on Bootstrap. I have this code:
<ul>
<li><span class="icon fa-home">Home</span></li>
<li><span class="icon fa-th">Photogallery</span></li>
<li><span class="icon fa-user">Chi sono</span></li>
<li><span class="icon fa-linkedin-square">Curriculum</span>
<ul>
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul></li>
<li><span class="icon fa-envelope">Contatti</span></li>
</ul>
I would that the central <ul> element was a sub menu of the #curriculum <li> element. In other words I would that the sub menu was shown only when the #curriculum element was expanded.
How can I do this?
In this moment the navigation menu is this:
<ul>
<li><span class="icon fa-home">Home</span></li>
<li><span class="icon fa-th">Photogallery</span></li>
<li><span class="icon fa-user">Chi sono</span></li>
<li><span class="icon fa-linkedin-square">Curriculum</span>
<ul>
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul></li>
<li><span class="icon fa-envelope">Contatti</span></li>
</ul>

You could put the list items you want in the sub menu inside a bootstrap dropdown like this:
Example http://www.bootply.com/IspYezDkvo
<li class="dropdown">
Curriculum <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Formazione</li>
<li>Stage</li>
<li>Insegnante Hip Hop</li>
<li>Danzatore</li>
<li>Coreografie</li>
</ul>
</li>

Related

Javascript Submenu Issue

Disclaimer! ... I am not real keen on front end development.
I have a nav menu that has two sub-menus. I am using the Symfony 3 framework for the application, so twig is involved. My base template has the navigation code so it should be available on all extended twig pages. Here is the html
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-th"></i> Dashboard
</li>
<li><i class="glyphicon glyphicon-stats"></i> Emails</li>
<li><i class="glyphicon glyphicon-user"></i> Users</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Admin
<span class="caret pull-right"></span>
</a>
<ul>
<li><i class="glyphicon glyphicon-user"></i> My Profile</li>
<li>Change Password</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="glyphicon glyphicon-list"></i> Public Pages
<span class="caret pull-right"></span>
</a>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</li>
<li>Logout</li>
</ul>
On the dashboard page it works just as expected.When "Admin" is clicked, the sub menu opens and the sub links are displayed. Click the other, the first sub menu closes and the other opens up.
However, when I switch to another page such as "Emails" when any of the sub menus are clicked it immediately closes. I have tried multiple ways to try and fix this but it does not seem to work. Here is the javascript for "submenu"
$(".submenu > a").click(function(e) {
e.preventDefault();
var $li = $(this).parent("li");
var $ul = $(this).next("ul");
if($li.hasClass("open")) {
$ul.slideUp(350);
$li.removeClass("open");
} else {
$(".nav > li > ul").slideUp(350);
$(".nav > li").removeClass("open");
$ul.slideDown(350);
$li.addClass("open");
}
});
Thank you for your help.

Add another level - side menu HTML/Boostrap 3/JS

How can I add another level to this menu structure from the HTML at the bottom of the page?
Current
Test
--->a
--->b
what I'm trying to do
Test
--->a
--->1
--->2
--->b
--->1
--->2
html
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<i class="glyphicon glyphicon-circle"></i> Facebook
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
<ul>
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
<ul class="list-unstyled collapse" id="submenu">
<li> 1 </li>
<li> 2</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
</ul>
I believe you just need to create another collapse element with a unique Id. using the <a> element as your toggle.

How to Display anchor elements Inline which are in a list element in dropdown-menu

Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.
Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>

Menu List Overflow HTML (also within iframe)

The main issue is that menu items are overflowing off the page to the bottom. I have attempted to solve the issue and I have failed to do so and I really have burnt myself out trying to fix it. This menu is in an iframe but regardless the problem still occurs even if it is on a regular page. A picture of the problem is below:
Here is the code
<div class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="roleMenu" class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menuUL" class="nav navbar-nav">
<li{{ (Request::is('admin') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-home"></span> Home</li>
<li{{ (Request::is('admin/blogs*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-list-alt"></span> Pages</li>
<li{{ (Request::is('admin/comments*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-bullhorn"></span> Comments</li>
<li{{ (Request::is('admin/menuBuilder*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-bullhorn"></span> Menu Builder</li>
<li class="dropdown{{ (Request::is('admin/users*|admin/roles*') ? ' active' : '') }}">
<a class="dropdown-toggle" data-toggle="dropdown" href="{{{ URL::to('admin/users') }}}">
<span class="glyphicon glyphicon-user"></span> Users <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li{{ (Request::is('admin/users*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-user"></span> Users</li>
<li{{ (Request::is('admin/roles*') ? ' class="active"' : '') }}><span class="glyphicon glyphicon-user"></span> Roles</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>View Homepage</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span> {{{ Auth::user()->username }}} <span class="caret"></span>
</a>
<ul class="dropdown-menu " style="overflow:scroll"; >
<li><span class="glyphicon glyphicon-wrench"></span> A</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> B</li>
<li><span class="glyphicon glyphicon-wrench"></span> C</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> d</li>
<li><span class="glyphicon glyphicon-wrench"></span> e</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> f</li>
<li><span class="glyphicon glyphicon-wrench"></span> g</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> h</li>
<li><span class="glyphicon glyphicon-wrench"></span> i</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> j</li>
<li><span class="glyphicon glyphicon-wrench"></span> k</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> l</li>
<li><span class="glyphicon glyphicon-wrench"></span> m</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> n</li>
<li><span class="glyphicon glyphicon-wrench"></span> o</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> p</li>
<li><span class="glyphicon glyphicon-wrench"></span> q</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> r</li>
<li><span class="glyphicon glyphicon-wrench"></span> s</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> t</li>
<li><span class="glyphicon glyphicon-wrench"></span> u</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> v</li>
<li><span class="glyphicon glyphicon-wrench"></span> w</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> x</li>
<li><span class="glyphicon glyphicon-wrench"></span> y</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-share"></span> z</li>
<li class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Multiple approaches taken:
1) Setting overflow:scroll to dropdown class:
Result: It works but not ideal at all.
2) Setting overflow:scroll to dropdown-menu class:
Result: A scroll bar appears but doesn't do anything(aka scrolling doesn't work)
3) Attempted to do solution here. If I change up the html or css to make it compatible it ruins other stuff already made and looks terrible. If anyone could help me with this I would greatly appreciate it.
More information to help:
My code is based on a laravel starter kit: https://github.com/andrewelkins/Laravel-4-Bootstrap-Starter-Site
I been at this for a few hours doing research and nothing for this seems like an easy solution, mainly because of the way my menu bar is structured. Anyone willing to provide help, css, javascript, or anything else that can help me would be greatly appreciated.
Maybe you should set height to dropdown-menu class , otherwise 'overflow:auto' won't work

Twitter Bootstrap Dropdown selected Open and Stay Active

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown">
<i class="fa fa-caret-square-o-down"></i> Person <b class="caret"></b>
<ul class="dropdown-menu">
<li>Person list</li>
<li>Update Person</li>
</ul>
</li>
</ul>
</div>
When I click and am on "Person list" page, how to keep class="dropdown" stay opened.
I've been struggling to do that. If anyone knows, please share.

Categories