In my react application one of the component is creating a button dropdown menu like below.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a onClick=doSomething href="#">HTML</a></li>
<li><a onClick=doSomething href="#">CSS</a></li>
<li><a onClick=doSomething href="#">JavaScript</a></li>
</ul>
</div>
Questions:
Giving href as # on anchor tag changes the url by appending #. If href is not given then hand click icon is not seen on menu while hovering over it. I don't want to change the URL and at the same time I want the hand icon to come on the dropdown menu.
Can I prevent default href behavior by some method like preventDefault or something similar?
Should I use button from react-bootstrap or this native html button is fine?
You can use the CSS cursor: pointer;
li{
cursor: pointer;
}
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Just add a style for the <a> tag and remove your href attribute.
a {
cursor: pointer;
}
Related
I am currently working with the mmenu jquery plugin. http://mmenu.frebsite.nl/documentation/core/off-canvas.html
Is there way to keep my class names that use in my navigation items when the mmenu plugin is triggered? They are removed and i have headings for menu items that I need to style.
For reference:
<ul>
<li><a class="dropdown-item nav-heading" href="#">Coffee Services</a></li>
<li><a class="dropdown-item" href="#">Quality Equipment</a></li>
<li><a class="dropdown-item" href="#">Our Coffees</a></li>
</ul>
Becomes:
<ul class="mm-listview">
<li class="mm-listitem">Coffee Services</li>
<li class="mm-listitem">Quality Equipment</li>
<li class="mm-listitem">Our Coffees</li>
</ul>
I need to keep the 'nav-heading' class!
By some testing I discovered that the plugin removes all classes that are attached to any div, a, li or span. If you add classes to any other element inside the li tag, it does get copied over. So you can use an i element if you want the classes to be copied. For example:
<li>
<a class="dropdown-item" href="#">
<i class="nav-heading">
Coffee Services
</i>
</a>
</li>
This will get copied like this:
<li class="mm-listitem">
<a href="#" class="mm-listitem__text">
<i class="nav-heading">
Coffee Services
</i>
</a>
</li>
Then in your CSS counter the styling the i tag adds, and add your own:
.nav-heading {
font-style: initial;
// Add your styling
}
I'm not sure what situation that you are facing. But if I found this trouble, I will use Mutation Observer for detecting changes of HTML element. You can insert 'nav-heading' into class attribute when you've detected any change of the element (The class attributes change).
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
If your classes are removed by the plugin itself, nothing to do with that but you can dynamically add your desired class. Using this snippet may help you.
$(document).ready(function(){
$('.mm-listitem:eq(0)').addClass('nav-heading');
$('.mm-listitem').on('click', function(){
$('.mm-listview > *').removeClass('nav-heading');
$(this).addClass('nav-heading');
})
});
Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Open submenu >
<ul class="dropdown-menu">
<li>
Submenu link
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->
http://codepen.io/Deka87/pen/ORyRLd
It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.
Any ideas would be highly appreciated!
Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event
$(".navbar").on("click", ".dropdown-submenu > a", function(){
....
....
});
How to include edit,delete icon in bootstrap menu item on mouse over. and also while click on edit/delete icon, it should call edit/delete method respectively.
Need to achieve this in the below bootstrap dropdown,
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
On mouse over HTML/CSS/JavaScript menu item that should display 'edit/delete' icon nearby.
I have done this with CSS but there are several many ways.
You can call edit or delete functions by adding a click event on <i> tag with an appropriate classname.
ul>li>a:hover i{
display:block !important;
float:right !important;
}
ul>li>a>i{
display:none !important;
}
.glyphicon-edit{
padding-left:7%;
}
Working jsfiddle:
https://jsfiddle.net/6v4d7kg9/
This is straight from the bootstrap site's page. In this certain code i would like to know how to change the color of the text from blue to black. It is by default blue at the moment.
Site for reference and a live example: http://getbootstrap.com/components/
Code: The section the code is under is called "Using Drop downs" Tabs with drop downs.
<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
Regards
Bootstrap dropdown buttons are like other bootstrap buttons. A default bootstrap button has the btn class.
You can change their themes by adding classes such as btn-primary, btn-info, btn-danger, etc.
For more examples of this check out http://getbootstrap.com/components/#btn-dropdowns.
use id on li and apply style in this way: example
<li id ="abc"</li>
Custom Style
#abc .dropdown-toggle {
color: black;
}
so it will take only for those drop-down-toggle class which has id "abc" and remove the !important from style
you can apply custom style on class "dropdown-toggle" in your css file
.dropdown-toggle {
color: black !important;
}
How can I change the direction of a Twitter Bootstrap dropdown?
I have a dropdown like this:
But I want it to look like this:
From http://getbootstrap.com/components/#dropdowns-alignment:
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated
.pull-right on dropdown menus. To right-align a menu, use
.dropdown-menu-right. Right-aligned nav components in the navbar use a
mixin version of this class to automatically align the menu. To
override it, use .dropdown-menu-left.
In your case, adding dropdown-menu-right class to the div that has the dropdown-menu class should do the trick.
Use pull-right or pull-left classes.
Here it is (using dropdown-menu-right):
<ul class="dropdown-menu dropdown-menu-right">
<li><a href"#">Action</a></li>
<li>Another action</li>
<ul>
Bootstrap 4
use "dropdown-menu-right" and "dropdown-menu-left"
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#username
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Account Settings</a>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Logut</a>
</div>
</li>
Output:
for more information visit documentation:
https://getbootstrap.com/docs/4.0/components/dropdowns/
transform: rotateY or -webkit-transform:rotateY will do the trick, let's apply it for the dropdown menu;
navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
-webkit-transform: rotateY(180deg);
}
Or you can insert this into .dropdown-menu or .open > .dropdown-menu classes due to your exact rquirement. Now it looks like:
As can be seen all links need to be reverted so it's simple to do with same CSS rule:
.dropdown-menu > li > a {
-webkit-transform: rotateY(180deg);
}
Now it's looking like:
Needs a bit cleanup via changing dropdown-menu's position by left:10px; and it will look like exactly how you wanted:
There has been a lot updated, since this post was created, so figured I would give an updated answer.
For Bootstrap 4+ you can use the classes dropleft, dropright, or dropup; in your lists/btn-group parent div.
Now, you can also use buttons as your dropdown-items.
Check out Bootstraps documentation here
There seem to be no option in Twitter Bootstrap to handle the direction on the dropdown. All that has some effect on the position of the arrow is this class .navbar .nav > li > .dropdown-menu:before Try fiddling with it to view changes in the direction of the drop down