i have a code HTML CODE:
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
<ul class="dropdown">
<li><i class="icon-twitter icon-large"></i>Twitter</li>
<li><i class="icon-github icon-large"></i>Github</li>
<li><i class="icon-facebook icon-large"></i>Facebook</li>
</ul>
</div>
</div>
AND CSS:
.wrapper-dropdown-2 {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
background: #fff;
border-left: 5px solid orange;
cursor: pointer;
text-align: left;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.dropdown {
display:none;
}
.wrapper-dropdown-2:hover ul.dropdown {
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
http://jsfiddle.net/pvt3e/
and i try, in hover mouse to: Sign in with open the drop down but its not work !
i cant work with js. Because I have a problem with 1.8.2, but I think we can find a solution with CSS
try this
.wrapper-dropdown-2:hover ul{
display:block;
}
updated jsFiddle File
also remove .dropdown:hover from your style
You are missing to add hover code to see drop down when hover over. add css for hover.
.wrapper-dropdown-2:hover .dropdown
{
display:block;
}
Live Demo
Just Replace Your This CSS
.dropdown:hover {
/* Size & position */
position: absolute;
display:block;
top: 100%;
left: -5px;
right: 0px;
/* Styles */
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
To My CSS and Get Result
.wrapper-dropdown-2:hover > .dropdown {
position: absolute;
display:block;
left: -45px;
background: white;
top:24px;
}
You will need to initialize your javascript as well as link to jquery. I see you are using a dropdown from Codrops why dont you just download the source?
Related
I am trying to have a corner button display new content on hover using the following setup:
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class="overlay"></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
</div>
</div> <!-- wrap -->
</div> <!-- panel body -->
</div> <!-- panel default -->
CSS:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap .overlay {
border-bottom: 40px solid #e8c63d;
border-left: 40px solid transparent;
bottom: 0;
height: 0;
opacity: .95;
position: absolute;
right: 0;
text-indent: -9999px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
width: 0;
}
.amg-corner-button_wrap:hover .overlay {
border-bottom: 800px solid #e8c63d;
border-left: 800px solid transparent;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap .overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.amg-corner-button_wrap .overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover .overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Here is fiddle : https://jsfiddle.net/ar3jkuvq/
The hover deployment works well but the .overlay-content text does not show up if .amg-corner-button_wrap uses position: absolute. However I need it to keep the hover on the wrap only.
How can I keep the hover effect on the wrap only and show the text content at the same time?
You can use CSS3 transform property to scale the overlay instead of using a border, and then use a General sibbling combinator [w3] selector ~ to select the .overlay-content element that is preceded by a .amg-corner-button_wrap:hover.
Working fiddle
add this class in your css
.amg-corner-button_wrap{
width:100%;
height:100%;
}
I believe you can make use of the pointer-events attribute here.
Remove position: absolute; from .amg-corner-button_wrap
Add pointer-events: none; to .panel-default1
Add pointer-events: all; to .amg-corner-button_wrap .overlay
Working JSFiddle
I have an ul li structure that give me one fly out that is it gives me sub-menu but i want one more sub-menu on hover first sub-menu.
following is the structure
My Css
.main-navi li{
position: relative;
}
.main-navi li div,
.main-navi a{
display: block;
line-height: 80px;
text-transform: uppercase;
font-weight: 900;
padding-left: 30px;
color: #999;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1;
background: #3a5795;
cursor: pointer;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div{
padding-left: 0;
border: none;
}
.main-navi li div{
position: relative;
z-index: 1;
background: #1A1A1A;
padding-left: 30px;
border-bottom: 1px solid #212121;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi a.active:hover,
.main-navi a.active{
padding-left: 50px;
color: #fff;
background: #ff3333;
cursor: default;
}
.main-navi .dot{
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 30px;
background: #333;
border-radius: 50%;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div .corner,
.main-navi a .corner{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
border-top: 40px solid transparent;
border-left: 20px solid #1A1A1A;
border-bottom: 40px solid transparent;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div.active .corner,
.main-navi a.active .corner{
right: -20px;
opacity: 1;
border-left: 20px solid #ff3333;
}
.main-navi a.active:hover .dot,
.main-navi a.active .dot{
background: #fff;
}
.main-navi li div:hover,
.main-navi a:hover{
padding-left: 50px;
color: #fff;
background: #151515;
}
.main-navi li div.active{
padding-left: 50px;
background: #ff3333;
color: #fff;
}
.main-navi li div:hover .dot,
.main-navi a:hover .dot{
background: #ff3333;
}
.main-navi li div.active .dot{
background: #fff;
}
.drop-down {
left: 0;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-track
{
background-color: #ff3333;
}
::-webkit-scrollbar-thumb
{
background-color: #ffffff;
}
::-webkit-scrollbar-button
{
background-color: #000000;
}
::-webkit-scrollbar-corner
{
background-color: black;
}
.main-navi li:hover .drop-down{
left: 100%;
opacity: 1;
}
.active .drop-down{
overflow: visible;
}
.main-navi .drop-down a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down a:hover{
padding-left: 40px;
}
<!-- code i created to get sub of sub menu-->
.drop-down-in {
left: 100;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 1;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi .drop-down li:hover .drop-down-in{
left: 200%;
opacity: 1;
}
.active .drop-down-in{
overflow: visible;
}
.main-navi .drop-down .drop-down-in a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down .drop-down-in a:hover{
padding-left: 40px;
}
<!--ends here-->
this is css that contains code for both sub and sub inside sub-menu. class drop-down works fine i want one more sub-menu so i created class drop-down-in which is not working.
My html code is:
<ul>
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
Here is a Fiddle to my question.
You forgot to add the class attribute with the value "main-navi" to your first "ul" element.
<ul class="main-navi">
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>
Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>
Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
</li>
And in CSS you schould update:
.main-navi li:hover .drop-down{
left: 100%;
}
If the value for "left" is 100%, than this element wont be visible.
Here you can find an updated Fiddle.
I am trying to make a hover open div with css. I created it but i have one question about hover position left and right.
First of all sorry for my english.
I created this DEMO from Codepen.
My question is: If you check my demo page you see information and location icon. When you hover over information or location icon then you see bubble div. in the upper left corner of the nice parts. but if you hover over information or location on the right side then you see bubble carry out.
I don't want to carry out bubble. I want to make a bubble stay in main div inside. What should i do for this ? Anyone can help me here ?
Here is my HTML code:
<div class="ssss">
<div class="s_u_a">
<div class="user_p_c_p">
<img src="1.jpg">
</div>
<div class="user_p_p_p">
<img src="2.jpg">
</div>
<div class="u_l_inf">
<div class="u_l_"><div class="uynott">test</div></div>
<div class="u_inf_"><div class="uynott2">test</div></div>
</div>
<div class="u_p_n_">test</div>
<div class="u_p_n_s">test</div>
</div>
</div>
in this html code main div is .sss
and this is my css code for bubble:
.u_l_:hover .uynott {
position:relative;
opacity:1;
visibility:visible;
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
-moz-transition: opacity .5s linear .5s;
-ms-transition: opacity .5s linear .5s;
}
.uynott
{
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
position: relative;
width: 295px;
height: auto;
padding: 10px;
background-color:#5890ff;
color:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #5890ff solid 1px;
visibility:hidden;
line-height: 21px;
margin-left: -25px;
opacity:0;
margin-top:25px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
z-index:5;
}
.uynott:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 20px;
}
.uynott:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 20px;
}
.u_inf_:hover .uynott2 {
position:relative;
opacity:1;
visibility:visible;
transition: opacity .5s linear .5s;
-webkit-transition: opacity .5s linear .5s;
-moz-transition: opacity .5s linear .5s;
-ms-transition: opacity .5s linear .5s;
}
.uynott2
{
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
position: relative;
width: 295px;
height: auto;
padding: 10px;
background-color:#5890ff;
color:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #5890ff solid 1px;
visibility:hidden;
line-height: 21px;
margin-left: -115px;
opacity:0;
margin-top:25px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
z-index:5;
}
.uynott2:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 115px;
}
.uynott2:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 115px;
}
TBH... you just have to make another class for your divs at the right and move the div hidden before hover.
here you have your code working: http://codepen.io/anon/pen/bDrwk
code
Just have a look at the changes I made and you will easily see what you had to do. won't copy all the code as it will be as long as yours (even longer) and a bit confusing I move also the little arrow of your bubble.
Just remove width:295px from the class .uynott2 and check the output!!
So I am making a drop down-menu for my site and all the looks are fine, but when I hover over it, it appears but when I move my mouse over-top it disappears. When I alter the line height under "ul.menu li > a" it works a little but does not solve my problem. I have tried the "z-index" and nothing.
Heres my css:
ul.menu {
display: inline;
padding: 0px;
margin: 0px;
z-index:999;
}
#black_lay {
display:none;
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 0%; /* makes the div span all the way across the viewing area */
top: 0%; /* makes the div span all the way across the viewing area */
background-color: black;
-moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
-webkit-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
#overlay {
display: none; /* ensures it’s invisible until it’s called */
position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
left: 25%; /* positions the div half way horizontally */
top: 25%; /* positions the div half way vertically */
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 50%;
height: 50%;
z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */
}
ul.menu li {
position:relative;
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul.menu li.drop {
position: relative;
}
ul.menu > li {
display: inline-block;
}
ul.menu li > a {
line-height: 80px;
padding: 0 1px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 9000000;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul > li {
list-style: none;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul.menu li:hover a { color: white; }
ul.menu li:hover .dropdownContain { top: 45px; z-index: 500;}
ul.menu li:hover .underline { border-bottom-color: #777; }
ul.menu li:hover .dropOut { opacity: 1; margin-top: 15px; }
Here's my HTML:
<nav style="display:inline">
<ul class="menu">
<li class="drop">
<a>Username</a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Account</li>
<li>Logout</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
This should be your problem:
ul.menu li:hover a { color: white; }
It changes the tab's text color to white, as if it's not there.
I changed it to a different color in fiddle and it's working just fine.
The arrows before the title are displayed using a :before. The problem only occur on Internet Explorer.
// edit : Mistake there, my styling is on p a.
Maybe is it the issue ?
So, here's the code:
.special-title {
font-size: 24px;
color: #a4a19e;
line-height: 1.2;
position: relative;
padding: 8px 0 8px 38px;
border-top: 1px solid #e2dbcf;
border-bottom: 1px solid #e2dbcf;
margin-top: 49px;
margin-bottom: 25px; }
.special-title:before {
content: url('../img/general-title-decoration.svg?1369571463');
position: absolute;
width: 28px;
left: 0;
top: 23px;
margin-top: -13px; }
and for the button:
.btn-call-to-action a {
background: #8e8287;
color: #f5f3e2;
padding: 2px 60px 2px 10px;
height: 35px;
line-height: 40px;
margin-top: 6px;
display: inline-block;
position: relative;
border-radius: 2px;
height: 40px;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action a:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
.btn-call-to-action a:hover {
background: #6f6469;
border-bottom: none; }
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
and here's the live site: http://aurelieremia.be/tfa/
In .special-title:before, since you're using absolute positioning, remove
margin-top:-13px;
and just use
top:10px;
instead. Then, declare a height as well as a width.
see http://jsfiddle.net/6TdB6/