I am trying to build bootstrap dropdown in which submenu can be expandable on click, I have snapshot attached with this question please check, I am not able to find anything like this on google so I am posting this question. Can anyone please provide me working css or jsfiddle for this? Here's what I've tried so far... (fiddle)
[]
.dropdown-menu li {
border-bottom: 1px dashed #ccc;
}
.dropdown-menu li:last-child {
border: 0;
}
.dropdown-menu li i {
padding-left: 10px;
}
.dropdown-menu li a {
display: -webkit-inline-box;
padding-left: 0px;
}
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Export
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<i class="fa fa-chevron-down"></i>
<a href="#">
<i class="fa fa-file-excel-o"></i> Excel
</a>
</li>
<li>
<i class="fa fa-chevron-down"></i>
<a href="#">
<i class="fa fa-file-word-o"></i> Word</a>
</li>
<li>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-file-o"></i> JSON
</li>
</ul>
</div>
Related
I've this breadcrumb section that contains a dropdown menu, but the list is shown behind other block. I know this issue is common and tried to play with the number of z-index but nothing worked.
Here is the code:
<div class="breadcrumb-wrap ">
<ul class="breadcrumb">
<li class="breadcrumb-item dropdown show">
1nd menu
<a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-chevron-down color-info"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="https://www.google.com/">Sub1</a>
<a class="dropdown-item" href="https://www.google.com/">Sub2</a>
<a class="dropdown-item" href="https://www.google.com/">Sub3</a>
</div>
</li>
<li class="breadcrumb-item dropdown show">
2nd menu
<a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-chevron-down color-info"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="https://www.google.com/">Sub1</a>
<a class="dropdown-item" href="https://www.google.com/">Sub2</a>
</div>
</li>
</ul>
</div>
the second block:
<section class="s-pt-xl-60 s-pt-lg-60 s-pt-md-60 s-pt-60 s-pb-xl-280 s-pb-lg-250 s-pb-md-90 s-pb-60">
<div class="container">
//some code
</div>
</section>
and for the dropdown, it has the default css:
.dropdown-menu {
background-color: #fff;
border: none;
border-radius: 0.9rem;
box-shadow: 0 0 10px rgb(0 0 0 / 20%);
font-size: inherit;
right: auto;
line-height: 1.5;
margin-top: 10px;
padding: 40px;
left: auto;
width: 300px;
z-index: 1004;
}
what am I missing in this code?
To make z-index works you must also set the position and must NOT be static.
So, add also the position on your class and will bring it in front.
I'm having a little problem. As, I'm currently working on a left side menu, and am trying to call the two tags li and a at the same time on :active in css. I searched a lot but couldn't get anything working for me. What I want is to change the color of the whole row of li and a on :active (when the user clicks on the button).
Here is my code:
.sub-menu li,
a:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" class="collapsed">
<a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
</span></a>
<ul class="sub-menu collapse" id="a">
<li>check1</li>
<li>check2</li>
<li>check3</li>
<li>check4</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
</a>
</li>
</ul>
<span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>
</div>
Declare your :active pseudo-state rule on the containing parent list item element, then just allow your nested anchor tag to inherit the styles of the parent.
.sub-menu li:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
.sub-menu li a {
color: inherit;
}
.sub-menu li:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
.sub-menu li a {
color: inherit;
}
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" class="collapsed">
<a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
</span></a>
<ul class="sub-menu collapse" id="a">
<li>check1</li>
<li>check2</li>
<li>check3</li>
<li>check4</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
</a>
</li>
</ul>
<span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>
</div>
hope this help.
**
a:hover #b
**
this make on hover #a, #b can change.
instead of hover use active as you want.
If this didn't work then try
a:hover + #b
or
a:hover ~ #b
this always work for me on latest version of chrome.😇
Is this giving you the result you're looking for? I changed some CSS code.
HTML:
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" class="collapsed">
<a><i class="<?=$MainObj['Icon'];?>" style="color:#9f9e9e !important"></i><?=$MainObj['GroupMenuName'];?> <span class="arrow" style="color:#9f9e9e !important">
</span></a>
<ul class="sub-menu collapse" id="a">
<li>check1</li>
<li>check2</li>
<li>check3</li>
<li>check4</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg" style="color:#9f9e9e !important"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg" style="color:#9f9e9e !important"></i> Users
</a>
</li>
</ul>
<span class="collapse-expand" data-ember-action="" data-ember-action-1815="1815"></span>
</div>
CSS:
.sub-menu a {
display: block;
}
a:active {
color: #f1f1f1 !important;
background-color: #2e8fda !important;
}
I have an un-ordered list <ul> that needs to have a fixed height.
Each item in the list is associated with a Bootstrap dropdown menu
to be opened by a button (...) on each <li> item.
The dropdown menu appears correctly for the first few items.
However, as soon as I scroll down the list and click the ... button,
the dropdown menu would be shown off-screen.
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="my-list">
<ul>
<li>
<span>Item 1</span>
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
<li>
<span>Item 2</span>
<button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
<li>
<span>Item 3</span>
<button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
<li>
<span>Item 4</span>
<button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a>Edit</a></li>
</ul>
</li>
</ul>
</div>
style.css
.dropdown-menu {
top: auto;
}
.my-list {
height: 160px;
background-color: rgb(179, 229, 252);
padding-left: 1px;
padding-top: 3px;
padding-bottom: 0;
overflow: auto; /* Enable scrollbar for the list */
}
.my-list li {
list-style-type: none;
padding: 8px 4px 8px 8px;
border-width: thin;
border-bottom-style: solid;
border-bottom-color: rgb(208, 208, 208);
}
Question:
How can I make the dropdown menu appear directly below (*) the "..." button?
(*) Or appear directly above in the case of last item on the list.
Is this the effect that you're looking for?
<div class="my-list">
<ul class= "nav">
<li>
<span>Item 1</span>
<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
<i class="glyphicon glyphicon-option-horizontal"></i>
</button>
<ul class="dropdown-menu dropdown-menu">
<li><a>Edit</a></li>
</ul>
</li>
Set the overflow to overflow: visible; needs to be "nav", and class="dropdown-menu dropdown-menu"
I have a aside which is of 260px width. when i try to place my user-icon and name info, there is too much of right-margin.
<div class="rightBox pull-right" href="#">
<ul class="navbar-nav navbar-right">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Karl Cadigan</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
Below is my fiddle. I want to bring the user-icon and the user-name to left leaving the drop-down icon at right.
http://jsbin.com/kugudaho/6/edit
Add the following class in your CSS. Use display:inline-block to show the info next to each other.
ul.navbar-nav
{
position:relative;
}
ul.navbar-nav li {
list-style: none;
display:inline-block;
}
.glyphicon{position:absolute; right:15px; top:15px;}
DEMO
If I understand it right this is what you need
HTML Markup
<div class="rightBox" href="#">
<ul class="navbar-nav">
<li class="dropdown">
<li style="margin-top: 3px">
<i class="fa fa-2x fa-border fa-user"></i>
</li>
<li class="glyph">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<label class="navbar-text" style="margin-top: 5px;margin-left:0;">
<strong><h4>
<span>Frank</span>
<b class="glyphicon glyphicon-chevron-down"></b>
</h4></strong>
</label>
</a>
</ul>
</div>
CSS
i {
list-style: none;
}
.rightBox{ height: 60px; width:260px; border:1px dashed red; }
.fa-user {
position: relative;
background: #666666;
}
.fa-user:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #89cd17 transparent transparent;
}
.navbar-nav li.glyph {
float: right !important;
}
.navbar-nav {
float: inherit;
padding-left: 10px;
}
I hope I understood what you need.
I think you're better off starting with a standard Bootstrap dropdown, and customizing where needed. Uses a lot less custom CSS (if any) and is easier to maintain...
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-2x fa-border fa-user"></i> <!-- put this inside the a element to bind it to the text -->
Frank
<span class="glyphicon glyphicon-chevron-down"></span> <!-- bootstrap used the class "caret" to designate a dropdown, but you can change it with a glyphicon if you need to -->
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
</ul>
</div>
Example:http://www.bootply.com/f9WYqJqLmd
Could you help me stylize buttons to look like a standard dropdown link?
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li>Dropdown Link
</li>
<li>
<form>
<button class="btn btn-link">Dropdown Button</a>
</form>
</li>
</ul>
</div>
jsFiddle
Add this to your CSS:
.dropdown-menu form button {
border:0;
padding: 3px 20px;
color: #333;
width:100%;
text-align:left;
}
.dropdown-menu form button:hover {
color:black;
text-decoration:none;
background-color:#f5f5f5;
}
It will look like a standard link.