I have a tab that when I hover over it, I open a dropdown-menu. What I would like is that when I hover over the tab, the dropdown menu will show with an transition of 0.5s to give that animation look.
To be open from top to bottom. Something similar you can see in dropdown on linkedIn page.
This is what I have so far.
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
width: 211px;
border-color: #efefef;
border-width: 3px;
background-clip: padding-box;
background-color: #ffffff;
border-radius: 0 0 7px 7px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 12px;
left: 0;
list-style: outside none none;
margin: 0px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
I try add this into the dropdown:hover and dropdown-menu without success.
-o-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
Add opacity: 0; to .dropdown and opacity: 1; to .dropdown-menu
Here is a demo
Related
I have a very small container which has a custom dropdown element inside of it.
#main {
height: 90px;
width: 400px;
overflow-y: auto;
}
.wrapper-dropdown {
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
position: relative;
width: 200px;
padding: 12px 15px;
background: #fff;
border-radius: 6px;
border: 1px solid #d9e2f6;
cursor: pointer;
outline: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.wrapper-dropdown .dropdown {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid #d9e2f6;
border-top: none;
border-bottom: none;
list-style: none;
padding: 0 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
max-height: 0;
overflow: hidden;
margin: 0;
z-index: 5;
}
.wrapper-dropdown .dropdown li {
padding: 0 10px;
width: 100%;
}
.wrapper-dropdown .dropdown li a {
display: block;
text-decoration: none;
color: #6a759e;
padding: 15px 0;
transition: all .3s ease-out;
border-bottom: 1px solid #d9e2f6;
margin-right: 20px;
}
.wrapper-dropdown.active .dropdown {
-webkit-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
-moz-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
max-height: 400px;
}
<div id="main">
CLICK OPTION 1 TO SHOW LIST
<div class="wrapper-dropdown">
<span class="selectedtext">Option1</span>
<ul class="dropdown">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
I'm trying to get the absolute positioned element (which is the list of options) to appear outside of the bounds of the main container which has overflow-y set.
I understand why this happening this due to this answer.
But am simply asking if anyone has any insights/tips/suggestions on a way to get around this or if it's generally not possible without moving the dropdown items outside of the container with the overflow set.
My example is here
When I hover over the corner of the element I am getting a weird constant hover and hover out effect, how can I fix this?
HTML
<h2>
HELLO
</h2>
CSS
h2 {
position: absolute;
background: rgba(2,35,64,0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
display: block;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2,35,64,0);
padding: 20px;
margin: 0px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
h2.woocommerce-loop-category__title:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: transparent;
}
http://jsfiddle.net/xc7vjstn/1/
change the background from transparent to what ever color you want and you will see the content plus if you want to keep it online like small box then margin and padding is what you need to play with.
h2:hover {
border: solid 5px #FFF;
padding: 10px;
margin: 25px;
background: blue;
}
The margin in h2:hover is causing the behavior removing the margin fixed the problem
h2:hover {
border: solid 5px #FFF;
padding: 10px;
/*margin: 25px; */
background: transparent;
}
Here is my solution, please check the live example below:
h2 {
position: absolute;
background: rgba(2, 35, 64, 0.58);
width: calc(100% - 97px);
height: calc(100% - 88px);
line-height: calc(100% + 70px);
top: 0;
left: 0;
font-size: 18px;
text-transform: uppercase;
text-align: center;
color: #FFF;
border: solid 20px rgba(2, 35, 64, 0);
padding: 20px;
margin: 0 auto;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
cursor: pointer;
}
h2:hover {
background: transparent;
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
<h2>
HELLO
</h2>
My CSS Gallery specifications are not corresponding to my HTML5. The images are not following the hover tag and they are displaying on top of everything else. It will not stay fixed however when I change the positioning to fixed it disappear all together. CSS checker states validates all fine. I can not position it where I want on the page either. Any help would be appreciated. Thanks in advance
CSS CODE
#gallery {
bottom: -20px;
padding-right: 50px;
display: inline;
top: 200px;
z-index: 99999999;
}
#gallery ul {
list-style-type: none;
padding: 20px;
text-align: center;
position: fixed;
}
#gallery li {
display: inline;
padding-right: 20px;
}
#gallery img {
padding: 5px 5px 40px 5px;
background: white;
box-shadow: 4px 4px 8px -4px #000000;
-webkit-box-shadow: 4px 4px 8px -4px #000000;
-mox-box-shadow:4px 4px 8px -4px #000000;
}
#gallery:hover {
-webkit-transform:scale(5%);
-o-transform:scale(5%);
-moz-transform:scale(5%);
-ms-transform: scale(5%);
transform: scale(5%);
transition: 0.5s ease-in-out;
-webkit-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
-mox-transition:0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
}
So I'm implementing a drop-down menu in CSS to my website,
this function is on the navigation bar.
As I struggled with this, my friend did some code for me, but I can't find in the CSS code which produces the drop down effect.
It's fully working and operational, just need help finding the drop-down attributes so I can learn from it.
Thanks.
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #000000;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
text-decoration: none;
}
ul li:hover {
background: #6d1022;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-decoration: none;
}
ul li ul li {
background: #000000;
display: block;
color: #fff;
}
ul li ul li:hover { background: #6d1022; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
The crucial part of a HTML/CSS drop down is nested lists. The main items are in the top level list ul li, sub menus are part of ul elements within the top level ul li, by default these are hidden-
SO you have the structure:
ul
-li
--ul <-- hidden with display:none
---li <-- hidden due to parent ul being hidden
You can see this in effect in your CSS here:
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none; /* <---- here */
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
text-decoration: none;
}
When the top level ul li item is hovered on, you want the child list to be shown, you can see this here:
ul li:hover ul {
display: block; /* <--- here */
opacity: 1;
visibility: visible;
}
Which performs the following:
ul
-li:hover <-- trigger applying display:block to child ul
--ul <-- shown with display:block
---li <-- shown due to parent ul being shown
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Says that on mouse hover over the unordered list,list items will become visible...
Hi my problem is that I actually can't center my div!
it's always stuck on the left. I already tried the margin-left: auto; and margin-right: auto;, but it doen't seems to work.
Here's the HTML:
<ul class="menu">
<li>Acceuil</li>
<li>LoL
<ul>
<li><a><span class="headlist">League of Legends</a></li>
<li>Funny games</li>
<li>Favorite builds</li>
<li>...</li>
</ul>
</li>
<li>SSF2
<ul>
<li><a><span class="headlist">Super Smash Flash 2</a>
<li>Intro</li>
<li>Events</li>
<li>Challenges</li>
</ul>
</li>
<li>RotMG</li>
<li>GMod</li>
<li>Contact</li>
</ul>
<div>
<p>
HUEHUEHUEHUEHUEHUEHUE
</p>
</div>
And here's the css:
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* div */
div
{
text-align: center;
border-radius: 0 0 5px 5px;
width: 590px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(140,0,0,0.7);
margin-left: auto;
margin-right: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
color: #f3f3f3;
font-family: Helvetica, Arial, sans-serif;
display: block;
position: absolute;
top: 38px;
left: 25%;
z-index: -50;
margin-left: auto;
margin-right: auto;
}
/* Reset de la liste (aucun style, etc.) */
.menu,
.menu ul,
.menu li,
.menu a,
.menu p
{
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu
{
height: 40px;
width: 610px; /* Longueur du menu */
background: #760101; /* couleur du gradient */
background: -moz-linear-gradient(#D20202, #760101);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #760101),color-stop(1, #D20202));
background: -webkit-linear-gradient(#D20202, #760101);
background: -o-linear-gradient(#D20202, #760101);
background: -ms-linear-gradient(#D20202, #760101);
background: linear-gradient(#D20202, #760101);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 13px;
display: block;
margin-left: auto;
margin-right: auto;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu li a {
display: block;
padding: 0 7px 0 40px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #4B0101;
border-right: 1px solid #5C0101;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #FF9900; }
/* Sub-menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #D20202;
background: -moz-linear-gradient(#760101, #D20202);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #D20202),color-stop(1, #760101));
background: -webkit-linear-gradient(#760101, #D20202);
background: -o-linear-gradient(#760101, #D20202);
background: -ms-linear-gradient(#760101, #D20202);
background: linear-gradient(#760101, #D20202);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 145px;
padding: 4px 0 4px 10px;
margin: 0;
border: none;
border-bottom: 1px solid #4B0101;
}
.menu ul li:last-child a {
border: none;
}
.LoL
{
background: url(LoLicon.png) no-repeat 6px center;
}
.home
{
background: url(home.png) no-repeat 6px center;
}
.ssf2
{
background: url(SSF2.png) no-repeat 6px center;
}
.contact
{
background: url(contact.png) no-repeat 6px center;
}
.headlist
{
color:#ff9900;
}
.menu ul li:first-child a {
border-bottom: 3px solid #4B0101;
}
It's been 2 hours I'm searching so please help! :O
Margin: 0 auto; will not work with absolute positioning. Try removing position:absolute from the div and then it should work.
Here is the fiddle
If it must be absolutely positioned (thus meaning margin: auto won't work), then you can change the CSS to left: 50% and add margin-left: -295px;.
This will move the <div> 50% from the left, and then negatively bring it back by half of it's width, this leaving it in the middle.
http://jsbin.com/iJESEwe/1/edit?html,css,output