I have created a dropdown in button hover,
I also try the transition css property on my code but its not working to come dropdown smoothly.
This below code is bootstrap dropdown code please suggest me to where i put the right code
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown:hover > .dropdown-content {
display: block;
top: 35px;
}
<div class="dropdown p-0">
<button type="button" class="btn btn-icon btn-light" data-toggle="dropdown" aria-expanded="false">
dropdown
</button>
<div class="dropdown-arrow"></div>
<ul class="dropdown-menu dropdown-menu-right dropdown-content">
<li> <a class="dropdown-item"><i class="fe fe-file-text mr-2"
aria-hidden="true"></i>Add Task</a></li>
<li> <a class="dropdown-item"><i class="fe fe-zap mr-2"
aria-hidden="true"></i>Add Risk</a></li>
<li> <a class="dropdown-item"><i class="fe fe-trending-up mr-2"
aria-hidden="true"></i>Add Milestone</a></li>
<li> <a class="dropdown-item" ><i class="fe fe-trash-2 mr-2"
aria-hidden="true"></i>Remove Me form This Project</a> </li>
<li> <a class="dropdown-item" ><i class="fe fe-edit mr-2"
aria-hidden="true"></i>Edit</a> </li>
<li> <a class="dropdown-item"><i class="fe fe-check-circle mr-2"
aria-hidden="true"></i>Complete</a></li>
</ul>
</div>
Since you didn't share all the code, first of all you can't add transition at display property, you didn't add transition for top property.
Try to hide .downtown-content with transform: translateY(-100%), and then in hover
transform: translateY(0); transition: all .25s linear (or add your transition here)
Related
I have an operations field in a table. Clicking on this field opens the dropdown. The dropdown that opens remains in the table and automatic scrolling appears. How do I get the dropdown dropdown table out of the way.
HTML
<td>
<div class="dropdown">
<button type="button" class="btn btn-sm dropdown-toggle hide-arrow py-0" data-bs-toggle="dropdown">
<i data-feather="more-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
<i data-feather="edit-2" class="me-50"></i>
<span>Stok Hareketleri</span>
</a>
<a data-idd="#item.StokID" class="dropdown-item btnSil" href="#">
<i data-feather="x" class="me-50"></i>
<span>Sil</span>
</a>
</div>
</div>
</td>
CSS
position: absolute;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate(-124px, 26px);
display:block;
Increasing the z-index would get the job done for you
.selector {
z-index: 1000
}
I have a Bootstrap dropdown in Angular. For dropdown menu I am using bootstrap css chevron-right icon. When user mouse hover, I want to change it to chevron-down icon.
This is my code
<style>
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
</style>
<div class="col-md-3 changeIcon">
<div class="nav-item dropdown">
<a href="#" data-toggle="dropdown">A-E
<i style="float: right;" class="bi bi-chevron-right"></i>
</a>
<div class="dropdown-menu">
Inbox
Sent
</div>
</div>
</div>
These css classes I tried but its not working
.changeIcon{
content: '\F285';
}
.changeIcon2:hover i::before{
content: "\uF356";
}
This is my UI, when user mouse hover, dropdown menus showing up but along with that I am not able to change right side icon
How can I do that ?
I have different solution for you.Here what i have try for you.
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
A-E
<i class="bi bi-chevron-right icon"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Apply following css to it
.btn.show .icon::before {
transform: rotate(90deg);
transition: transform 0.5s;
}
And if you want to rotate icon on dropdown hover then replace above css with this one.
.dropdown:hover .icon::before {
transform: rotate(90deg);
transition: transform 0.5s;
}
Hope you like it :)
I'm working on this website here:
https://shmoss.github.io/Gibbs-Lab/index.html
As you can see, I have a nav-bar with buttons for navigation. Normally, I set all the buttons as links to go to different pages, but to demonstrate the issue I'm having, they are all set to go to the homepage (index.html).
The problem is that when clicking a button other than "about", the green highlighting doesn't highlight the button as "active". When you click on a button, I want it to get the 'active' class and have the green border. Currently, selecting another button does nothing.
HTML:
<div class="collapse navbar-collapse text-left" id="navbarNav">
<ul id = "navPills" class=" nav-pills navbar-nav ml-auto">
<li>
<a href="index.html" id="aboutPill" class="btn btn-s-md btn-white m-b active">ABOUT
</a>
</li>
<li>
<a href="index.html" id="peoplePill" class="btn btn-s-md btn-white m-b">
PEOPLE
</a>
</li>
<li>
<a href="index.html" id="researchPill" class="btn btn-s-md btn-white m-b">RESEARCH
</a>
</li>
<li>
<a href="index.html" id="publicationsPill" class="btn btn-s-md btn-white m-b">PUBLICATIONS
</a>
</li>
<li>
<a href="index.html" id="mediaPill" class="btn btn-s-md btn-white m-b">
MEDIA
</a>
</li>
<li>
<a href="index.html" id="teachingPill" class="btn btn-s-md btn-white m-b">
TEACHING
</a>
</li>
</ul>
</div>
CSS:
.btn {
background-color:#f7f7f7 !important;
color:#0c2d1c;
border:none;
}
.btn.active{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
.btn:hover{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
.btn:focus{
background-color:#0c2d1c !important;
color:#f7f7f7 !important;
box-shadow:none !important;
}
JS:
// .btn is the class of the element you want to change color
var $btns = $('.btn').click(function() {
$btns.removeClass('active');
$(this).addClass('active');
})
Try this.
$(function(){
var current = location.pathname;
$('.navbar-collapse ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
I have a problem to do the hover to show the selection in the setting tab, below is my coding:
Original coding:
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="btn-group">
<a style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
</div>
What I've tried the coding:
<style>
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<div class="dropdown-content">
test 1
test 2
test 3
</div>
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
</div>
My tried coding output show me like below:
My original output show like below:
I want the expected result like below the picture when my mouse pointer move to setting tab:
Hope someone can guide me how to solve this problem. Thanks.
I have added .dropdown-content and .dropdown-content a CSS to generate your desire output. Please see and run the code snippet for details.
Edit 1: Please see the comment for the change details.
/* Add dropdown-content CSS */
.dropdown-content {
display: none;
position: absolute;
min-width: 100px;
z-index: 9;
}
/* Add .dropdown-content a */
.dropdown-content a {
display: block;
background: #f1f1f1;
text-decoration: none;
color: black;
}
/* Edit 1: Add .dropdown */
.dropdown {
display: inline-block; /* Change display from block to inline-block */
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<span id="curTime" class='hide'> </span>
<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<div class="dropdown-content">
test 1
test 2
test 3
</div>
</div>
<!-- Edit 1: Move logout button out of dropdown menu -->
<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>
<div class="dropdown">
<a class="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-align-justify"></i>
</a>
First of all, you have 2 class attrs in one html tag, put it all in a single one:
<a class="dropbtn btn btn-metis-1 btn-sm" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom"
<i class="fa fa-align-justify"></i>
</a>
check if that solve your problem
I have a drop down menu that opens a row of icons underneath it (see picture 1, names and pictures were removed to maintain privacy)
I am trying to make this menu to open to the right of choose child, and not underneath it (see picture 2, of what I am trying to get. the Images will open to the right of the drop down and not under it)
My current code is:
<div class="span4">
<div class="btn-group">
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
I tried to use the following example, that helps push the drop down to the left
how to make twitter bootstrap submenu to open on the left side?
but I could not figure out a way to use this to what I am looking to do
Thanks
How does this look:-
Demo
Demo2 Submenu dropping down.
<div class="span4">
<div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="right-caret right"></span>
</a>
<ul class="dropdown-menu rightMenu">
<li>
<div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
</div>
css
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right
{
float:right;
}
Just add the class "pull-right" into the <ul class="dropdown-menu"> this way...
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
I just add this class to the dropdown-menu:
.rightMenu {
position:absolute;
float:right;
top: 0;
left: 160px;
}
And it aligns perfectly.
To those who may find this page in the future, the now official way of doing this is with adding the .dropdown-menu-right class to your dropdown list.