I want user to be able to select everything within Morphological Transformation (Erosion, Dilation, Opening, Closing), but not 'Morphological Transformation' itself. Thank you for every answer!
HTML Code:
<div class="container">
<div class="row">
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Select Pre-Processing Method <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Normalisation</li>
<li>Canny Edge Detection</li>
<li>Smoothing</li>
<li></li>
<li class="divider"></li>
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Morphological Transformation</a>
<ul class="dropdown-menu">
<li><a>Erosion</a></li>
<li><a>Dilation</a></li>
<li><a>Opening</a></li>
<li><a>Closing</a></li>
</ul>
</li>
...
</ul>
</li>
</ul>
</div>
</div>
You can disable anchor events and keep hover effects by using this:
.disabled-link:hover{
background: red;
}
.disabled-link:active{
pointer-events: none;
}
Test
It is usable for all modern browsers:
click!
Related
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.
I've got this working pretty much how I want EXCEPT that the drop down box values are on the left and the rest is properly centered. PLEASE HELP!
I want to keep the level 2 vales to the right of the caret and I've tried everythign I could find online. I'm drawing a total blank.
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle center-block" type="button" data-toggle="dropdown">Pick One
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1">January</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Februrary <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">Link</a></li>
</ul>
</li>
<li><a tabindex="-1">March</a></li>
<li><a tabindex="-1">April</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">May <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li>
</ul>
</li>
<li><a tabindex="-1">June</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">July<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="http://www.amazon.com/" target="_blank">link</a></li>
</ul>
</li>
</ul>
</div>
</div>
You would just need to modify your container and dropdown divs:
The container needs to center its content
The dropdown display should be changed so that it doesn't automatically take up all the width within its container.
Here's an example:
<div class="container" style="text-align: center;">
<div class="dropdown open" style="display: inline-block;">
....
</div>
</div>
I am using the Bootstrap 3 custom buttons but can't for some reason change the brand text color nor the dropdown triangles. I've tried a couple of things, but still no luck...
<div class="container">
<div class="row" style="margin-top: -30px;">
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown" style="margin-right: 70px; margin-left: 60px;" >
<a class="btn btn-inverse :active" data-toggle="dropdown" href="#">
Wristbands <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
<li class="dropdown" style="margin-right: 70px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Hawaii <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
In your example, I don't see any text in the navbar-brand div. Is that what you're talking about?
Anyhow, to answer your question, if you have text in navbar-brand, you'd use something like:
.navbar-default .navbar-brand {
color: blue !important;
}
And for the dropdown arrows, something like:
span.caret {
color: red;
}
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>
I'd like to know how can i build a btn-group with a sub-menu.
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
and i' like to put this in the btn-group:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
This is what i want: (but with twiiter-bootstrap)
Explanation: Basically this btn could go anywhere, I just put it in a button group to show there is nothing special about this button.
So first, you want to add data-toggle= dropdown to your button. Then, you need to add your standard drop down menu to the button. I guess the key here is knowing that there is nothing stopping you from adding a second dropdown menu into a submenu.
So go a head an add a submenu into whatever < li > you want, and inside that, just another dropdown-menu. So essentially we have Button -> dropdown menu -> dropdown submenu -> dropdown menu -> sub elements. Alittle confusing but pretty straight forward I think
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<!--start of dropdown button -->
<button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
</ul>
</li>
</ul>
</div>
<!--end of dropdown button -->
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
Edit:
After playing with this alittle, I realized that you do need the
<div class="btn-group">
wrapping the button, even if it is going to just stand alone. I created this updated fiddle to demo it.
http://jsfiddle.net/jamiematthews/yWrRA/1/
Took a bit of experimenting but here's how you go about doing it:
http://jsfiddle.net/ewQTE/2/
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropwn Link #1</li>
<li>Dropwn Link #2</li>
</ul>
</div>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>