hover colour transition slide effect - javascript

I have a link that changes colour when mouse hovers over it and i am fully conformable with the coding for this however i would like the however effect to slide down as oppose to just change colour. how is this possible with css. I have looked around stack overflow but only able to find instances where people use background images and alter the its position. Is that the only way to make this possible?
It is difficult to articualte what i am trying to achieve but it is on show on this website weblounge.be the effect that i am trying to achieve is on the two links on the homepage
#contactlink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
margin-left: 78px;
margin-top: 40px;
float: left;
color: #FFF;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
text-decoration: none;
opacity: 0;
}
#contactlink:hover {
background-color: #FFF;
color: #666;
border: 1px solid #fff;
-webkit-transition: .2s;
transition: .2s;
}
Let's talk
https://jsfiddle.net/6t3quy4w/5/


The website you linked does theirs by having the :before pseudo-element transition its scale over top of the button. It also required having a span inside the button so that its z-index could be set on top of the :before element. Here is an example:
a.color-change {
display: inline-block;
padding: 15px;
color: black;
background-color: white;
position: relative;
padding: 15px;
border: 1px solid black;
text-decoration: none;
z-index: 0;
}
a.color-change:before {
content: ' ';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #777;
transform: scale(1, 0);
transition: all .25s ease-out;
transform-origin: center top;
z-index: 0;
}
a.color-change:hover:before {
transform: scale(1);
}
a.color-change span {
z-index: 1;
position: relative;
}
<span>Hover Over Me</span>


Not sure why your using whit on white, anyway based on my understanding i have provide some thing for you
#contactlink {
background: #1568b6;
color: #fff;
display: inline-block;
line-height: normal;
padding: 17px 20px 16px 20px;
position: relative;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background .15s;
-moz-transition: background .15s;
-ms-transition: background .15s;
-o-transition: background .15s;
transition: background .15s
}
#contactlink span {
position: relative;
z-index: 1;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s
}
#contactlink:before {
background: #6c6c6c;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 0;
display: block;
padding: 0;
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out
}
#contactlink:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
<a href="#contact" class="smoothScroll" id="contactlink">
<span>Let's talk</span>
</a>

Related

how to add dot in the active nav menu

hello this is my nav menu code i've added animation like a dot move along when i hover over my nav menu. but i don't know how to make that dot to be static in the active menu .
ex: (menu1) this is my menu , when it'active i want that dot beside my menu (menu1.) like this kind of i want
if anyone find the solution please give me the code
body {
font-family: "Sprint Sans Ofc";
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
White-space:nowrap;
padding-right:20px;
padding left:30px;
}
.navMenu a {
color: #000000;
text-decoration: none;
font-size: 1.3em;
text-transform: captilalize;
font-weight: 600;
display: inline-block;
padding:30px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:hover {
color: #000000;
}
.navMenu a:active {
color:#000000;
}
.navMenu .dot {
width: 5px;
height: 5px;
background: #D61E39;
border-radius: 50%;
opacity: 0;
margin:-44px;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover ~ .dot {
-webkit-transform: translateX(30px);
transform: translateX(145px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(2):hover ~ .dot {
-webkit-transform: translateX(110px);
transform: translateX(280px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(3):hover ~ .dot {
-webkit-transform: translateX(200px);
transform: translateX(415px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
.navMenu a:nth-child(4):hover ~ .dot {
-webkit-transform: translateX(285px);
transform: translateX(550px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity: 1;
}
navMenu a:nth-child(1):active ~ .dot {
position: relative;
left:40px;
bottom:10px;
opacity: 1;
}
.navMenu a:nth-child(1):active ~ .dot {
left:20px;
opacity:1;
}
<body>
<nav class="navMenu">
menu1
menu2
menu3
menu4
<div class="dot"></div>
</nav>
</body>

The challenge with your .dot element is to apply the CSS styles (especially the transform values) in a way, that both hover and active states are handled correctly.
In order to achieve this, I'm using CSS selectors like this one:
.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {
Basically, this means, do the animation if either
the element is currently being hovered
or the link is active (i.e. it was clicked before), BUT with the limitation that the parent .navMenu is currently not being hovered.
The second rule guarantees, that a hover has the highest priority when setting the destination of the .dot element (especially, this makes the dot move away from the currently active item). Otherwise, the dot wouldn't move and stick to the .active menu item.
Check out my approach below (btw, no need for -webkit properties here):
const anchors = document.querySelectorAll('nav a')
anchors.forEach(anchor => anchor.addEventListener("click", onClick));
function onClick(e) {
anchors.forEach(achor => achor.classList.remove('active'))
e.target.classList.add('active')
}
body {
font-family: "Sprint Sans Ofc";
}
.navMenu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
White-space: nowrap;
padding-right: 20px;
padding left: 30px;
}
.navMenu a {
color: #000000;
text-decoration: none;
font-size: 1.3em;
text-transform: captilalize;
font-weight: 600;
display: inline-block;
padding: 30px;
transition: all 0.2s ease-in-out;
}
.navMenu a:hover {
color: #000000;
}
.navMenu a:active {
color: #000000;
}
.navMenu .dot {
width: 5px;
height: 5px;
background: #D61E39;
border-radius: 50%;
opacity: 1;
margin: -44px;
transform: translateX(-30px);
transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover~.dot,
.navMenu:not(:hover) a:nth-child(1).active~.dot {
transform: translateX(145px);
}
.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {
transform: translateX(280px);
}
.navMenu a:nth-child(3):hover~.dot,
.navMenu:not(:hover) a:nth-child(3).active~.dot {
transform: translateX(415px);
}
.navMenu a:nth-child(4):hover~.dot,
.navMenu:not(:hover) a:nth-child(4).active~.dot {
transform: translateX(550px);
}
<body>
<nav class="navMenu">
menu1
menu2
menu3
menu4
<div class="dot"></div>
</nav>
</body>

Trigger css hover with jQuery

Is it possible to link a CSS hover action to another link with jQuery (or pure CSS for that matter)?
I have a combined hover and tooltip animation meant as an overlay over a map. What I want to achieve is having the hover firing when hovering over the city names from the list.
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div>New York</div>
<div>Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>
I've also included this as a fiddle: https://jsfiddle.net/7Lsvdqpx/3/
I have tried several suggested methods without any luck, such as this: Trigger hover with jQuery?

You can do this with pure CSS and no jQuery by using the adjacent selector (~). I've implemented it in the snippet below and had to add a few HTML classes. Here's an example of how that works:
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after
The above snippet says... if you hover the .list-ny menu item, then select an adjacent .location element that has a .dot-ny:before in it and apply the relevant styles.
Here's the full example with the hover implemented for all relevant properties:
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.kart_dot:active::before,
.list-ny:hover ~ .location .dot-ny .kart_dot:before,
.list-wa:hover ~ .location .dot-wa .kart_dot:before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.list-ny:hover ~ .location .dot-ny:before,
.list-ny:hover ~ .location .dot-ny:after,
.list-wa:hover ~ .location .dot-wa:before,
.list-wa:hover ~ .location .dot-wa:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<div class="list-ny">New York</div>
<div class="list-wa">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>

Jon's answer is good but if you have many cities you can try mine with jquery.
$('.city a').mouseover(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').addClass('hovered');
}).mouseleave(function () {
$('.location').find('a[href="'+$(this).attr('href')+'"]').removeClass('hovered');
});
a {
text-decoration: none;
}
a:hover {
color: #d82631;
}
.location {
position: absolute;
}
.kart_dot {
position: relative;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
cursor: pointer;
}
.kart_dot::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: #d82631 none repeat scroll 0% 0%;
border-radius: 50%;
margin-top: -6px;
margin-left: -6px;
}
.kart_dot:hover::before,
.kart_dot:focus::before,
.hovered .kart_dot::before,
.kart_dot:active::before {
background-color: #000;
-webkit-transition: all 0.20s ease-in-out !important;
-moz-transition: all 0.20s ease-in-out !important;
-ms-transition: all 0.20s ease-in-out !important;
-o-transition: all 0.20s ease-in-out !important;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
}
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.hovered:before,
.hovered:after,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 15px;
width: 160px;
color: #000;
content: attr(data-tooltip);
font-size: 14px;
line-height: 0.9;
}
.tooltip-hoyre:before,
.tooltip-hoyre:after {
bottom: 50%;
left: 100%;
}
.tooltip-hoyre:before {
margin-bottom: 0;
margin-left: -8px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-hoyre:hover:before,
.tooltip-hoyre:hover:after,
.tooltip-hoyre:focus:before,
.tooltip-hoyre:focus:after,
.hovered:before,
.hovered:after{
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
.tooltip-hoyre:after {
margin-left: 0;
margin-bottom: -16px;
margin-left: -18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-ny city">New York</div>
<div class="list-wa city">Washington</div>
<div class="location" style="top: 20%; left: 20%;">
<a href="#new_york" class="tooltip-hoyre dot-ny" data-tooltip="New York">
<div class="kart_dot"></div>
</a>
</div>
<div class="location" style="top: 38%; left: 20%;">
<a href="#washington" class="tooltip-hoyre dot-wa" data-tooltip="Washington">
<div class="kart_dot"></div>
</a>
</div>

Make hamburger menu fadeout work

I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});

You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.

Why is this working on Safari and Firefox but not on Chrome?

I have a responsive navigation menu, it works as follows: when you resize the window the 'hamburger' (three lines) an icon appears. Clicking this icon makes the menu appear and the icon becomes an 'X' icon by transforming. Clicking the 'X' makes the menu disappear and the icon become three lines again.
It works perfectly in Safari and Firefox, however it doesn't in Chrome.
It makes the transformation of three lines to 'X' and viceversa but the menu never appears.
Why is that?
Here's the code:
HTML:
<nav>
<label for="show-menu" class="show-menu">
<button class="show-menu button-toggle-navigation">
<span>Toggle Navigation</span>
</button>
</label>
<input type="checkbox" id="show-menu" role="button">
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
[...]
<script type="text/javascript">
$('button').on('click', function() {
$(this).toggleClass('isActive');
});
</script>
CSS:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
float: right;
width: 0;
height: 0;
text-align: right;
display: none;
margin-right: 15%;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul{
border-top-color: black;
float: right;
text-align: center;
display: block;
padding-top: 15%;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.25em solid black;
border-top: 0.25em solid black;
font-size: 13px;
cursor: pointer;
height: 1.5em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.25em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.button-toggle-navigation span {
color: transparent;
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
Thanks a lot for your help!
P.S: If you could tell me a better way to do this responsive menu, I'd appreciate it! Thanks! :)

Sure!
This is how I solved the problem:
HTML
<nav>
<label for="show-menu"xs class="show-menu">
<button id="pull" class="show-menu button-toggle-navigation"></button>
</label>
<ul>
<li>Conóceme</li>
<li>Servicios</li>
<li>Portfolio</li>
<li>Contacto</li>
</ul>
</nav>
JS
<script type="text/javascript">
var menu = $("nav ul");
$('#pull').on('click', function() {
$(this).toggleClass('isActive');
menu.slideToggle(200);
});
</script>
CSS
/*Style 'show menu' label button and hide it by default*/
.show-menu {
margin-top: 7%;
float: right;
display: block;
}
.button-toggle-navigation {
background-color: transparent;
border: 0;
border-bottom: 0.16em solid black;
border-top: 0.16em solid black;
font-size: 1em;
cursor: pointer;
height: 1.2em;
margin: .75em .375em;
outline: 0;
position: relative;
-webkit-transition: border-color 150ms ease-out, -webkit-transform 150ms ease-out;
transition: border-color 150ms ease-out, transform 150ms ease-out;
width: 2.25em;
}
.button-toggle-navigation::after, .button-toggle-navigation::before {
border-bottom: 0.16em solid black;
bottom: .375em;
content: '';
height: 0;
left: 0;
position: absolute;
right: 0;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive {
border-color: transparent;
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.isActive::after, .isActive::before {
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.isActive::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.isActive::before {
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}

if you non't hide your button with CSS, the code is working perfectly:
.show-menu {
float: right;
text-align: right;
margin-right: 15%;
}
http://jsfiddle.net/4towu13r/
better if you use the -webkit-, -moz, -o- transition prefixes to.
UPDATE:
explanation: somehow chrome unable to activate <button> inside the <label>, if you click only on <label> the checkbox is checked and do the job. Here is a jQuery workaround to do the job:
checkbox=$('input[role=button]');
checkbox.prop('checked', !checkbox.prop('checked'));
working code: http://jsfiddle.net/eapo/4towu13r/3/

Create CSS3 Circles with text inside

I am trying to add text inside a CSS3 circle. But the text is outside of the circles proportion. When I hover over the circle it changes color but I would also like for the text to dissapear as well.
Extras: Is there a way to create make the circle pulsate while mouse is over it? Will jquery or javascript be necessary?
Example : http://jsfiddle.net/jqEzZ/2/
<style>
.cn-nav > a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;
}
.cn-nav a span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cn-nav a.cn-nav-prev span{
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.cn-nav a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;
}
.cn-nav a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}
</style>
HTML
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>

In your span style set:
.cn-nav a span {
overflow: hidden;
….
}
and remove text-indent: -9000px;
To make the text disappear, set the color equal to the background color on hover:
.cn-nav a:hover span {
...
background-color:#a8872d;
color: #a8872d;
}
Demo
If you want the circle to pulsate, look at using an animation (MDN Docs) for your hover rather than a simple transition.

I can't see what kind of picture you are using as a background image but I have an idea on how to place the text inside of the circle and hide it on hover.
I think I would solve this using a pseudoelement since you can than place text inside of your link and center it as well.
On hover you could then just put opacity: 0 or empty the content (content: "";)
I did simplify the markup just to show you how I'd solve it with the pseudoelement.
http://dabblet.com/gist/6406590

It's possible to make it pulsate purely with CSS using CSS3 animations. Learn more here.
JSfiddle: http://jsfiddle.net/Q3gMS/1/
HTML:
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<p>Click ME!</p>
<span></span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>
CSS:
.cn-nav > a {
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev {
left: 0px;
}
a.cn-nav-next {
right: 0px;
}
.cn-nav a span {
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
border-radius: 23px;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
-webkit-background-size: 17px 25px;
-moz-background-size: 17px 25px;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cn-nav a p {
display: block;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
margin: 0;
padding: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
-ms-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.cn-nav a:hover p {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.cn-nav a:hover span {
-webkit-animation: pulsate 1s infinite;
-moz-animation: pulsate 1s infinite;
-ms-animation: pulsate 1s infinite;
-o-animation: pulsate 1s infinite;
animation: pulsate 1s infinite;
}
#keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-moz-keyframes pulsate {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-webkit-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-ms-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
#-o-keyframes "pulsate" {
0% {
background-color: #a8872d;
}
50% {
background-color: red;
}
100% {
background-color: #a8872d;
}
}
.cn-nav a.cn-nav-prev span {
background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div {
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.cn-nav a:hover span {
width: 100px;
height: 100px;
border-radius: 50px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
margin: -50px 0 0 -50px;
-webkit-background-size: 22px 32px;
-moz-background-size: 22px 32px;
background-size: 22px 32px;
background-color: #a8872d;
}
.cn-nav a:hover div {
width: 90px;
height: 90px;
-webkit-background-size: 120% 120%;
-moz-background-size: 120% 120%;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
border-radius: 45px;
}

HTML
<a class="circle"></a>
CSS
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 50px auto;
background: #bada55;
display: block;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.circle:after {
content: "Hover Here";
position: absolute;
width: 100%;
text-align: center;
top: 40%;
}
.circle:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
background: #82983b;
}
.circle:hover:after {
content: "";
}
DEMO
For now, this just scales on hover and changes color. What did you mean by pulsate -- kinda like this? Pulsate w/ Keyframes

Categories

Resources