I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
Related
I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I have following piece of code in my jsp.
<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
<ul class="dropdown-menu">
<li >Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li style="">Separated link</li>
<li>One more separated link</li>
</ul>
</li>
but when it's getting rendered in the browser, automatically the code becomes as following:
<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
<ul class="dropdown-menu">
<li style="display: none;">Action</li>
<li style="display: none;">Another action</li>
<li style="display: none;">Something else here</li>
<li class="divider" style="display: none;"></li>
<li class="nav-header" style="display: none;">Nav header</li>
<li style="display: none;">Separated link</li>
<li style="display: none;">One more separated link</li>
</ul>
</li>
I am unable to understand from where all the li's are getting this style="display:none" property, is it some bootstrap javascript which is doing it. I am debugging the code on chrome.
I was not able to track, which js was doing the changes to my lists, so what I did is, I put every li in a class called 'visible' and in my tag I put a style as follows:
<style>
.visible{
display:inline !important;
}
</style>
This problem happens in Magento (version 1.9 for me) and it's caused by an incompatibility between Protype JS library and jQuery. There is a fix here.
It's perfectly normal: the style is added in order to hide the dropdown menu when related button isn't clicked.
That control is performed by JavaScript (check bootstrap.js).
I am trying to get the Bootstrap component Dropdown to work.
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Item</li>
</ul>
</div>
What am I doing wrong?
http://jsfiddle.net/xDUR9/
Add jquery to your code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Demo
Use this code and don't forget to include jQuery and bootstrap.min.js in your document.
<div class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
You can check out this link for live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
Right now menu uses hover to toggle elements. How can I change hover to mauseclick?
<div id="nav-collapse" class="collapse out">
<ul class="nav">
<li class="logo" style="font-size: 25px;">WEBSITE-NAME</li>
<li>
<span data-toggle="collapse" data-target="#portfolio-collapse"></span>LINK #1
<ul id="portfolio-collapse" class="collapse out">
<li>SUB LINK #1</li>
<li>SUB LINK #2</li>
<li>SYB LINK #3</li>
</ul>
</li>
...
bootstrap.min.js code on my website (http://wklej.to/OrUbj/text).
Your question and issue is not clear. Please edit your question and include more details such as screenshot, fiddle links etc. However, according to Bootstrap Docs, the Navbar dropdown menu works for click event and the markups is as below:
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
If you are trying to get responsive menu, then your code would be similar to below:
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>