I want the contents of the dropdown to fade in over 0.3 seconds when hovered over using the transition property. I have it working when hovering over tabs.
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
Try this, First make opacity:0 to your dropdown item and use transition and when you are going to hover on the block then that opacity:0 block should be opacity:1
li.dropdown {
display: inline-block;
}
.dropdown-content {
opacity: 0;
transition: opacity .3s ease-in-out;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
opacity: 1;
}
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
How about using CSS property transform for this?
The trick would be to scale down to 0 your dropdown content, then back to normal on hover.
.dropdown-content {
transform: scale(0);
}
.dropdown:hover .dropdown-content {
transform: scale(1);
}
You can change transform-origin value if you want a different starting point.
jsFiddle
li.dropdown {
display: inline-block;
}
.dropdown-content {
transform: scale(0);
transform-origin: 15% 0;
transition: transform 300ms ease-out;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
transform: scale(1);
}
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
Related
I'm making a navigation bar for a site that I'm working on, and one of the links will show a dropdown on hover. Currently, my dropdown content displays nowhere near below the dropdown where I would like it to be. This is probably a simple problem, but I would appreciate any help!
HTML:
<nav>
HOME
ABOUT
BLOG
<div class="dropdown">
PROJECTS
<div class="dropdown-content">
Client Work
Personal Projects
</div>
</div>
</nav>
CSS:
nav {
margin-top: 4.3vmin;
text-align: center;
display: none;
}
.nav-item:link {
color: #9422ed;
text-decoration: none;
padding: 3.7vmin;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.nav-item:visited {
color: #9422ed;
}
.nav-item:hover {
color: #5c0d99;
text-decoration: none;
}
.nav-item:active {
color: #5c0d99;
}
.dropdown {
overflow: hidden;
display: inline;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 10px 14px;
}
.dropdown-content a:hover {
background-color: #e7e7e7;
}
.dropdown:hover .dropdown-content {
display: block;
}
Thanks in advance!
Set your .dropdown to position: relative; and then set .dropdown-content left & top or margin styles for fine positioning.
I'm making a dropdown menu for a website. I got the first segment working, but when I want to make one element to show other options on its right side, it's just not working.
It's just some basic HTML and CSS setting, I am just a beginner. I've tried decluttering the code and doing it in the simplest way possible.
li a, dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.two {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: -40px;
margin-left: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
<!-- About section -->
<li class="dropdown">
<a class="dropbtn">About</a>
<div class="dropdown-content">
Mission
<div class="two">
Team
</div>
Our Story
Partners
Team
</div>
</li>
I would like to understand what I am doing wrong, and how can I make this work.
Use + sign to select the sub menu in css and make it display:block. Check below code:
.dropdown-content a:hover + div {
display:block;
}
See the Snippet below:
li a, dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color:gray;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.two {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: -40px;
margin-left: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown-content a:hover + div {
display:block;
}
<!-- About section -->
<li class="dropdown">
<a class="dropbtn">About</a>
<div class="dropdown-content">
Mission
<div class="two">
Team
</div>
Our Story
Partners
Team
<div class="two">
CEO
</div>
</div>
</li>
The .dropbtn button has styling attached to it so that when it is hovered over it shows the .dropdown-content div by adding opacity to that element. However, hovering over the spot below the button where the .dropdown-content appears seems to trigger the hover that should only be happening when I hover over .dropbtn. Why is this happening?
There are some "solutions" like adding overflow:hidden to the .dropdown and adding it back with the hover, but it effects the transform I have attached to the .dropdown-content. Adding display:none and display:block to .dropdown content also breaks the transform effect I want.
* {
font-family:sans-serif;
}
body {
background-image:linear-gradient(to right,#42b4ce,#fd3838);
}
.dropbtn {
background:none;
color: white;
font-size: 16px;
border: none;
cursor:pointer;
padding:0 0 10px;
}
.dropdown {
position: relative;
width: 160px;
margin: 0 auto;
display: block;
}
.dropdown-content {
opacity:0;
position: absolute;
background-color: #f1f1f1;
min-width: 400px;
right:-80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -1;
transform-origin: top center;
transform:rotate3d(-40, 4, 1.5, 45deg);
transition:.2s;
border-radius:10px;
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {color: purple;}
.dropdown:hover .dropdown-content {
opacity:1;
transform:rotate3d(0, 0, 0, 40deg);
z-index:0;
}
.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
Add visibility: hidden; to the .dropdown-content class and visibility: visible to it when .dropdown is hovered. See code below.
* {
font-family:sans-serif;
}
body {
background-image:linear-gradient(to right,#42b4ce,#fd3838);
}
.dropbtn {
background:none;
color: white;
font-size: 16px;
border: none;
cursor:pointer;
padding:0 0 10px;
}
.dropdown {
position: relative;
width: 160px;
margin: 0 auto;
display: block;
}
.dropdown-content {
opacity:0;
position: absolute;
background-color: #f1f1f1;
min-width: 400px;
right:-80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: -1;
transform-origin: top center;
transform:rotate3d(-40, 4, 1.5, 45deg);
transition:.2s;
border-radius:10px;
visibility: hidden;
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {color: purple;}
.dropdown:hover .dropdown-content {
opacity:1;
transform:rotate3d(0, 0, 0, 40deg);
z-index:0;
visibility: visible;
}
.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
One idea is to simply increase the height of the body so that the element will go behind it since it has negative z-index
* {
font-family:sans-serif;
}
body {
background-image:linear-gradient(to right,#42b4ce,#fd3838);
margin:0;
height:100vh;
}
.dropbtn {
background:none;
color: white;
font-size: 16px;
border: none;
cursor:pointer;
padding:10px;
}
.dropdown {
position: relative;
width: 160px;
margin: 0 auto;
display: block;
}
.dropdown-content {
opacity:0;
position: absolute;
z-index:-1;
background-color: #f1f1f1;
min-width: 400px;
right:-80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transform-origin: top center;
transform:rotate3d(-40, 4, 1.5, 45deg);
transition:.2s;
border-radius:10px;
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {color: purple;}
.dropdown:hover .dropdown-content {
opacity:1;
transform:rotate3d(0, 0, 0, 40deg);
z-index:0;
}
.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</body>
Here is a related question to understand how this trick is working: z-index weird behavior?
And to understand why your gradient was covering the whole screen even if there is no height set on the body you can check this: How to remove the stripes that appears when using linear gradient property?
Just add pointer-events: none; for .dropdown-content and pointer-events: auto for selector .dropdown:hover .dropdown-content
Demo
Drop down menu is not showing after using overflow. I want use overflow in div but its not working on hover.
Here's my code.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
overflow:scroll;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can see layout current show
I want to this
To achieve that, you have to set overflow:scroll to the button instead of giving overflow to the drop down content.
Try this.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
overflow:scroll;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I am using this button drop down located here. I need to make it look like the below picture
when you hover the drop down its flush with the left side of the button how can I make it flush to the right side and not the left.
*.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
you just need to add right:0 to dropdown-content, because by default the position:absolute it is aligned to left (like left:0)
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
/* demo */
left: 300px
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
right: 0
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Adding dir="rtl" attribute to you dropdown div will solve your issue.
<div class="dropdown" dir="rtl">
Check here if this is the result you want to get?