Create a nested Bootstrap dropdown toggle - html

This is my first question to StackOverflow, so I'm sorry if it's a little wonky.
Anyway, I have a need to use a "back" or "close" link within a Bootstrap dropdown menu. It appears that the dropdown() function only appends the "open" class to the direct parent of the element with the "dropdown-toggle" class.
Anyone have any ideas? Here is my markup:
<li class="navbar__nav-item navbar__nav-dropdown dropdown">
<a class="navbar__nav-link navbar__dropdown-toggle dropdown-toggle" data-toggle="dropdown">News & Events</a>
<ul class="navbar__nav-dropdown-menu dropdown-menu">
<li class="navbar__header-menu-title">
<h6 class="navbar__header-menu-back ">
<a class="navbar__header-menu-back-link dropdown-toggle" data-toggle="dropdown">< Back</a>
</h6>
<h6 class="navbar__menu-title">
Title
</h6>
</li>
<li class="navbar__dropdown-menu-item">
<a class="navbar__dropdown-menu-link" href="component-library.html">Link1</a>
</li>
<li class="navbar__dropdown-menu-item">
<a class="navbar__dropdown-menu-link">Link2</a>
</li>
</ul>

Related

Creating a three level inline ul in bootstrap

I am using following HTML to create a three level inline list. First Level shows by default on page load. When I click on first level menu i.e. 'Courses' it expands and shows second level menus. But when I click on second level menus i.e. 'Computer Courses' or 'Civil Courses', they do not expand to show third level menus.
Thanks in advance for any help.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false" >Computer Courses<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>IT Advance</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Web Designing</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Civil Survey</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Quantity Survey</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm not sure how twitter-bootstrap works exactly, but I can imagine having multiple <a> tags with href="#"s messes this up. Moreover, your html is not valid (you can have <ul> as a child of another <ul>) and perhaps wrapping a <ul> within an <a> is also not good practise.
Use javascript onclick functions for the expand behaviour, or dive a little deeper into twitter-bootstrap, in case they do support something like this.
P.S. Consult https://validator.w3.org/nu/#textarea to see what html is valid.

navbar - right not working in my html file

So I am a beginner in angular and I have to simply make a navbar.I have my bootstrap loaded in the .json file and it looks like this:-
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
whereas my code looks like this:-
<ul class=" nav navbar-nav navbar-right">
<ul class="dropdown-menu">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
</ul>
</div>
</div>
</nav>
`
Output is :-
my save data and fetch data are not appearing on right.what is the reason?
Just replace "navbar-right" with "ml-auto".
But still things are wrong with your code apart from "navbar-right".
It should be -
<ul class="navbar-nav ml-auto">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
I am familiar with the tutorial you are working with, so I guess you are creating a dropdown menu, this should be the complete code for it-
<ul class = "navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
These existing questions might help -
Bootstrap NavBar with left, center or right aligned items
ml-auto is not pushing navbar links to the right

Bootstrap dropdown menu submenu not working

My Bootstrap menu doesn't show the submenu dropdown. Here's the code. I'm using Bootstrap 3. The "dropdown-submenu" class I believe should be the one to show the arrow and on click show the submenu ul.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Category
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Arts
<ul class="dropdown-menu">
<li >
Artist Profiles
</li>
</ul>
</li>
<li >
Buzz Quiz
</li>
<li >
Coast
</li>
<li class="dropdown-submenu">
Crime/Security
<ul class="dropdown-menu">
<li >
Rape Resources
</li>
<li >
Security Overview
</li>
</ul>
</li>
<li >
Environment
</li>
<li class="dropdown-submenu">
Fashion
<ul class="dropdown-menu">
<li >
About FAFA
</li>
<li >
Designers
</li>
</ul>
</li>
</ul>
</div>
Bootstrap 3.3.5 (current) documentation and Bootstrap 3.3.5 CSS file do not contain a definition for dropdown-submenu class.
It means that this class is redundant and does not affect the code at all (of course, if you haven't described it in your own CSS).
Here is the JS Fiddle Demo which works how it should work.
I have found a definition of dropdown-submenu in Bootstrap 2.3.2 but it looks like it is depricated now.
Here is the working JS Fiddle Demo with submenus with Bootstrap 2.3.2.
However, I highly recommend not to use an outdated library because of a single feature.

create a dropdown button in a selectable item in a list

I am using jQuery Ui to make list items selectable on my web app.
Inside each item from this list I have a dropdown button.
When I'm adding the selectable option to the list, the dropdown options doesn't open since the item (the button's parent) is being selected, and the button is not clickable anymore, as if the selectable option "hides" the clickability of the button.
How can i fix it?
My code looks like this:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown " >
<a class="dropdown-toggle " id="dLabel" role="button" data-toggle= "dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu" >
<li > ng-href="#" >blabla1</a></li>
<li > ng-href="#" >blabla2</a></li>
<li > ng-href="#" >blabla3</a></li>
</ul>
</div>
</li>
First you code is missing a few parts. See comments below.
I took what you had and cleaned it up:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown "> <a class="dropdown-toggle " id="dLabel" role="button" data-toggle="dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu">
<!-- You were missing the <a in front of each ng-href -->
<li> <a ng-href="#">blabla1</a>
</li>
<li> <a ng-href="#">blabla2</a>
</li>
<li> <a ng-href="#">blabla3</a>
</li>
</ul>
</div>
</li>
<!-- You were missing a closing ul -->
</ul>
and you can view it working here on js fiddle
I added the following to resources and it worked ok for me:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

Aligning bootstrap dropdown with text

I created a Bootstrap dropdown using this code:
<div class="dropdown" style="margin-bottom: 20px;">Ordered by
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="primary">Random</span></a>
<ul class="dropdown-menu" role="menu">
<li>Random</li>
<li>Earliest</li>
<li>Latest</li>
</ul>
post.
</div>
But as you can see, the dropdown isn't aligned with the link:
How can I get it to align, and if possible, also display the white triangle on top pointing to the link?
JSFiddle example
Is this what you are looking for?
http://jsfiddle.net/t75g5/
<span>Ordered by<span>
<div class="dropdown mydropdown" style="margin-bottom: 20px;">
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><span class="primary">Random <b class="caret"></b></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Random
</li>
<li>Earliest
</li>
<li>Latest
</li>
</ul>post.</div>