What i am creating is similar to this. I found this while researching on stackexchange.
However, i want the dropdown to open on mouseover. I am able to create a bootstrap navbar with mouseover dropdowns, but unable to add mouseover action to the example given above. Any ideas?
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">Home</a> </li>
<li><a data-target="#profile" data-toggle="tab">Profile</a></li>
<li><a data-target="#messages" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
http://jsfiddle.net/pv2Lc/7/
How about this?
http://jsfiddle.net/70ytg4yf/
HTML unchanged
No JS
CSS:
.dropdown:hover {
/* so that no mouseout is triggered when moving to the menu */
padding-bottom: 5px;
}
.dropdown-menu {
/* move up since default is lower because of padding */
margin-top: -5px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Related
I started very recently to study/practicing with HTML, typescript, CSS and angular5, and I'm developing a test app to try what I've learned so far. But I am a little bit confused on how I can solve this problem:
Basically I need to set the color of the text inside of a element (the color of the dropdown button text must be different from the one the menu text has).
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
drop1<span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
I want "drop1" text in white, while the "menu" element text can be of the default color.
Now if I put in the CSS this:
ul li a {
color: white;
}
Each text is colored in white. Now I know I can set directly the style property in HTML tag to override the style from CSS, but since I have several dropdown I would like to set everything in the CSS. How can I do it?
Try to use > css selector using class like
ul.navbar-nav>li>a
It will selects all <a> elements where the parent is a .navbar-nav class
Stack Snippet
ul.navbar-nav>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Another solution is to use :not pseudo class
Stack Snippet
ul:not(.dropdown-menu)>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Referece Link
child-selector
:not() selector
You can try this simple idea:
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle white-text" role="button" >
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
With this CSS
.white-text {
color: white!important;
}
That means you can utilise this class throughout your site if you need the text to be white
edit
If you're worried about using !important inside the class you can just remove that, but just ensure that the class is the last entry in the class stack, for example:
<a href="#" class="dropdown-toggle white-text" role="button" >
rather than
<a href="#" class="white-text dropdown-toggle" role="button" >
Target the class of your element.
.dropdown-toggle {
color: black; // all your toggle menu (main menu) will have a black color;
}
.dropdown-menu a {
color: white; // all your dropdown menu (sub menu) will have a white color;
}
Don't use !important;
You myst either use a CSS file or use the style="" element inside your HTML tag.
i.e.:
First way: <button style="color: red; background-color: green;">Log in</button>
Second way:
HTML file:
<button class="mybtn">Log in</button>
CSS file:
.mybtn {
color: red;
background-color: green;
}
You work like this with all tags and all elements you that want to style.
I have a dropdown menu in my nav that has three columns, that looks like this:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<div class="container">
<div class="row">
<ul class="list-unstyled col-md-4">
<li>test1-1</li>
<li>test1-2</li>
<li>test1-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test2-1</li>
<li>test2-2</li>
<li>test2-3</li>
</ul>
<ul class="list-unstyled col-md-4">
<li>test3-1</li>
<li>test3-2</li>
<li>test3-3</li>
</ul>
</div>
</div>
</ul>
</li>
It works, but when I click on the dropdown, the offset of the dropdown is where the dropdown link is. How can I center the dropdown menu instead of positioning it where the dropdown link is? As you can seen in this screenshot, the dropdown is not centered.
This is giving me the result that I am looking for:
.nav > li.dropdown{ position: static; }
.nav > li.dropdown .dropdown-menu {display: none; width: 100%; left:0; right:0; }
.dropdown-menu>li { display: inline-block; }
I then also have this javascript for a hover effect:
$('ul.nav li.dropdown').hover(function(){
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function(){
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
I am looking to have side-ways dropdown menu that could be clicked. Upon hovering over the list items, it that list items has any nested li items, it will show up.
Here is my current code. you can paste it in http://www.bootply.com/ to see how it looks. It currently is very bad. it is displaying everything at the same time. and even one of the items is hidden behind another list item.
I tried to follow this post. but I could not get it working. I am using bootstrap 3 in my HTML. so if there is a way to do it with bootstrap3 , that would be fine too.
Here is my html with inline css at the end:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<li id="settings" class="list-group-item">toyota highlander
<ul id="test">
<li>atlanta</li>
<li>austin</li>
<li>boston</li>
<li>chicago</li>
<li>seattle</li>
</ul>
</li>
<li>honda fit </li>
<li id="settings" class="list-group-item ">ford explorer
<ul id="test">
<li>raleigh</li>
<li>sacramento</li>
<li>sandiego</li>
<li>seattle</li>
</ul>
</li>
</div>
</div><!--/span-->
</div><!--/row-->
<style>
li#settings {
position:absolute;
overflow: visible;
}
li#settings:hover > ul {
cursor:pointer;
display:block;
}
ul#test {
display: none;
white-space: nowrap;
list-style: none;
position: absolute;
top:34px;
}
</style>
In this bootstrap template, there are links on right side of page, as you hover over each link, I want to display li items with-in that link. if there are no li-items, the link itself will be clickable
EDIT:
latest trial here:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="btn-group-vertical">
<div id="sidebar" class="sidebar-nav span3">
<ul class="nav nav-tabs nav-stacked">
<ul class="dropdown-menu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li class="dropdown-submenu active "> <a tabindex="-1" href="#">toyota highlander </a>
<ul class="dropdown-menu">
<li>atlanta</li>
<li>austin</li>
<li>boston</li>
<li>chicago</li>
<li>seattle</li>
</ul>
</li>
<li class="nav-menu">honda fit </li>
<li class="dropdown-submenu "> <a tabindex="-1" href="#">ford explorer </a>
<ul class="dropdown-menu">
<li>raleigh</li>
<li>sacramento</li>
<li>sandiego</li>
<li>seattle</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>
UPDATE: CHECK this FIDDLE for my updated answer. I've used Bootstrap 3 this time.
note: I was searching how to move the arrow to the left like the sub-menu but I can't find the answer. I hope this still helps.
I've research and found out the dropdown-submenu is not supported on Bootstrap 3 anymore. Please see the accepted answer. It might help you.
Is THIS what you are trying to do?
Dropdown submenu CSS for Bootstrap 3:
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu{float:none;}.dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.sidebar{float:right;margin-right:20px;}
Why don't you use the Button Groups? The vertical variation looks similar to what you are doing.
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
I have a menu and a submenu in different divs. There is a space between them. How can I make them look like a one whole menu? I used bootstrap navbar for main menu and simple nav for submenu. I'm very newbie in css. this is what I have:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Website Logo</a>
<ul class="nav">
<li class="active">DashBoard</li>
<li>Docs</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 250px;">
<li>Dashboard</li>
<li>LogOut</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul class="nav nav-pills">
<li class="active">
Stats
</li>
<li>Api Calls</li>
<li>Settings</li>
</ul>
</div>
jsfiddle
I just want to remove the space between them.
And one more little question:
how can I get rid of a little caret between button and it's dropdown? (white triangle between Account nav item and it's dropdown)
Your first question can be answered by removing the default margin-bottom for the class navbar:
.navbar {
margin-bottom:0
}
Now, for your second question. There is a triangle created using borders on your dropdown-menu. You can disable this with this css:
.navbar .nav > li > .dropdown-menu:after {
border:none;
}
Add the following CSS to remove the margins:
.navbar{
margin:0px;
}
JS Fiddle: http://jsfiddle.net/eszf7/3/
I have a top bar dropdown-menu in my bootstrap homepage.
The dropdown-menu starts under each menuitem.
I want to center the dropdownmenu on the page. (should start on the left side and end on the right side of my content-area which is 1280px)
HTML:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: 1280px;">
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle menuitem" data-toggle="dropdown">nav1</a>
<ul class="dropdown-menu" aria-labelledby="drop1" style="width:1180px;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</div>
</div>
</div>
you can get your container to be relative, get your li.dropdown to be absolute with left:0.
CSS:
.container{
position:relative;
}
li.dropdown ul.dropdown-menu{
position:absolute;
left: 0;
top: 0 /*according to your menu height */
width: 1280px;
}
hope this helps.