Develop Reference

How to write a javascript code for a specific audio player

I wrote this code below as an audio player, i want to make it work by javascript but i don't know where to start? i want to have a play and pause option and nothing more! since i'm new to javascripts i dont know how can i make it work on this!
How can i write a javascript for this audioplayer?
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>

You mean something like this?
window.addEventListener("load",function() {
document.querySelector(".playy").addEventListener("click",function() {
document.getElementById("tune").play();
this.style.display="none";
document.querySelector(".pausee").style.display="block";
})
document.querySelector(".pausee").addEventListener("click",function() {
document.getElementById("tune").pause()
this.style.display="none";
document.querySelector(".playy").style.display="block";
})
})
#musicplayer {
position: fixed;
z-index: 999999;
bottom: 25px;
margin-left: 20px;
display: flex;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#musicplayer>*,
.play>* {
align-self: center;
-webkit-align-self: center
}
.roundthing img {
margin: 8px;
width: 15px;
margin-bottom: 200px;
}
.midline {
width: 0px;
height: 3px;
background: #fff;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
}
#musicplayer:hover .midline {
width: 20px;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.play {
display: flex;
min-width: 124px;
height: 31px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 0;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
margin-top: -200px;
}
.music-controls,
.music-controls>* {
user-select: none;
-webkit-user-select: none;
width: 11px;
font-size: 11px;
cursor: pointer;
}
.pausee {
display: none;
}
.playtext {
margin-left: 8px;
font-family: courier new;
font-size: 9px;
}
#musicplayer:hover .play {
opacity: 1;
transition-delay: .0s;
-webkit-transition-delay: .0s;
}
<div id="musicplayer" class="box fade-in one">
<div class="roundthing">
<img src="https://www.clipartmax.com/png/middle/22-223778_notenschl%C3%BCssel-clipart-animated-gif-music-notes.png"></div>
<div class="midline"></div>
<div class="play">
<div class="music-controls">
<div class="playy">►</div>
<div class="pausee">❚❚</div>
</div>
<div class="playtext">Fairytail</div>
</div>
<!--play-->
<audio id="tune" src="https://8pic.ir/uploads/fairy-tail-theme.mp3" type="audio/mpeg"></audio>
</div>

Show div when hover over another separate div

I have searched the web and found similar questions to my own, but I have not been able to achieve the results that I am looking for. I am not the most well versed with html/css/and javascript/jquery so I am wondering if it is an error on my part with how I am formatting everything, or the path to which I am trying to write these results.
I have three circles, spaced equally in the center of the page. Each circle links out to a different page. On hovering over a circle, a span is revealed (by changing the opacity property in css) that provides a title for where that link goes.
What I am having trouble doing is: When you hover over each circle, in addition to a span being revealed that provides a title, I want to have a short descriptive text appear below the circles. When you mouse out of that said circle, the descriptive text will disappear. Each circle must have its own descriptor text.
From what I have gathered, the jquery hover on event is likely the best way to do this, however I cannot seem to get the syntax correct to make it work.
<script>
jQuery(document).ready(function() {
jQuery('#text1').hide();
});
jQuery(document).ready(function() {
jQuery('.grid_1').hover(function() {
jQuery(this).find('#text1').show();
},
function() {
jQuery('#text1').hide();
});
});
</script>
Any and all help would be greatly appreciated. Please let me know if I should clarify anything.
Link to jsfiddle

Your jquery references #text1 and it should be .text1 since that element is a class. Also $(this).find('.text').show(); won't work because .text is not a child of the thing you're hovering over ($(this)). Just use $('.text1')
$(document).ready(function() {
$('.text1').hide();
});
$(document).ready(function() {
$('.grid_1').hover(function() {
$('.text1').show();
},
function() {
$('.text1').hide();
});
});
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
<div class="grid_1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
</a>
</div>
</div>
<div class="grid_2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1">Text box1</p>
<p class="text2">Text box2</p>
<p class="text3">text box3</p>
</div>
Though I would re-write it to be a little more flexible and with less code like this, utilizing a data attribute in the .grid circles to define the text block class to show, then adding/removing a class that shows the text instead of using jquery's $.hide() and $.show()
$(document).ready(function() {
$('.grid').hover(function() {
$($(this).attr('data-text')).addClass('show');
},
function() {
$($(this).attr('data-text')).removeClass('show');
});
});
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
.text {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
<div class="grid_1 grid" data-text=".text1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
</a>
</div>
</div>
<div class="grid_2 grid" data-text=".text2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
</a>
</div>
</div>
<div class="grid_3 grid" data-text=".text3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1 text">Text box1</p>
<p class="text2 text">Text box2</p>
<p class="text3 text">text box3</p>
</div>

I'll provide a css solution since there exist a jquery answer
Add the following to your css
.fmcircle_out:hover .description{
opacity:1;
}
.description{
opacity:0;
transition:opacity 1s;
}
.fmcircle_out a{
text-decoration:none;
}
.fmcircle_out:focus {
opacity: 1;
}
See snippet (Note you can add these rules to existing rules declared if you'd like)
.gridcontainer {
width: 720px;
margin: 30px auto;
}
.grid_1 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_2 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.grid_3 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
.fmcircle_out {
width: 200px;
height: 200px;
text-align: center;
display: block;
margin-left: 10px;
opacity: 0.75;
border-radius: 100px;
border: solid 2.5px #8D8B8B;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in {
width: 170px;
height: 170px;
margin: 15px;
display: inline-block;
overflow: hidden;
border-radius: 85px;
-moz-border-radius: 85px;
-webkit-border-radius: 85px;
-o-border-radius: 85px;
}
.fmcircle_in img {
border: none;
margin: 30px 25px 25px 25px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_in span {
padding: 0;
border: 0;
vertical-align: baseline;
width: 160px;
background: #fff;
color: #666666;
padding: 5px;
margin: 70px 0 0 0;
height: 20px;
text-align: center;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
position: absolute;
opacity: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .fmcircle_in span {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.fmcircle_out:hover .description {
opacity: 1;
}
.description {
opacity: 0;
transition: opacity 1s;
}
.fmcircle_out a {
text-decoration: none;
}
.fmcircle_out:focus {
opacity: 1;
}
.fmcircle_blue {
background-color: #35C317;
}
.fmcircle_red {
background-color: #BA282B;
}
.fmcircle_green {
background-color: #2E70DC;
}
<div class="gridcontainer clearfix">
<div class="grid_1">
<div class="fmcircle_out">
<a href="link1.html">
<div class="fmcircle_in fmcircle_blue">
<span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
</div>
<div class="description">This link describes option 1</div>
</a>
</div>
</div>
<div class="grid_2">
<div class="fmcircle_out">
<a href="link2.html">
<div class="fmcircle_in fmcircle_green">
<span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
</div>
<div class="description">This link describes option 2</div>
</a>
</div>
</div>
<div class="grid_3">
<div class="fmcircle_out">
<a href="link3.html">
<div class="fmcircle_in fmcircle_red">
<span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
</div>
<div class="description">This link describes option 3</div>
</a>
</div>
</div>
</div>
<div class="text_container">
<p class="text1">Text box1</p>
<p class="text2">Text box2</p>
<p class="text3">text box3</p>
</div>

Jquery code Which hide another div on hover and make it visible when mouse move out.
<script>
$(document).ready(function(){
$('.grid_1').hover(
function () {
$('#text1').hide();
},
function () {
$('#text1').show();
}
);
});

How to centre FontAwesome icons vertically in a list item?

I am making a list with some text and fontawesome icons. I am able to centre the text vertically, but not the icon. Here you can see what I mean:
Here is my code:
.fa-info {
color: #90A4AE;
position: fixed;
/*position is fixed so I can align it to the edge of the page*/
width: 55px;
left:0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 11;
height: 60px;
}
#sidebar ul {
width: 200px;
float: right;
left: 70px;
top: 23vh;
position: absolute;
text-align: left;
padding:0;
margin:0;
}
#sidebar li {
white-space: nowrap;
color: #90A4AE;
list-style-type: none;
font-size: 30px;
font-family: 'NeutraFaceMedium';
text-align: left;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
height: 60px;
line-height: 60px;
}
<ul>
<li><i class="fa fa-info fa-small"></i>About Us</li>
</ul>
I would like to be able to centre the fontawesome icon vertically so it is on the same level as the text.
Thanks

Please try this:
ul
{
list-style-type: none;
}
#sidebar ul {
width: 200px;
float: right;
left: 70px;
top: 23vh;
position: absolute;
text-align: left;
padding:0;
margin:0;
}
#sidebar li {
white-space: nowrap;
color: #90A4AE;
list-style-type: none;
font-size: 30px;
font-family: 'NeutraFaceMedium';
text-align: left;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
height: 60px;
line-height: 60px;
}
.fa-info {
color: #90A4AE;
padding: 9px;
font-size: 20px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 11;
}
JSFiddle: http://jsfiddle.net/JfGVE/1224/

In your class .fa-info position and width is what causing the issue. Remove or comment them out and it works great.
.fa-info {
color: #90A4AE;
left:0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 11;
height: 60px;
}

Change the vertical align:
<i class="fa fa-info fa-small" style="vertical-align: middle">

How to make one item selected at a time?

At the default state I want 'ALL' to be selected. Click on another item will change all other classes so that 'this' has the class and the others don't. My problem is why can't 'ALL' be re-selected?
jsFiddle: http://jsfiddle.net/u5g9vLkx/
HTML:
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
CSS:
body{
background: #000000;
}
.nav2{
float: none;
list-style-type:none;
overflow: hidden;
clear: both;
text-align: left;
display: inline-flex;
}
.nav2 li{
clear: both;
overflow: hidden;
margin-left: 10px;
}
.orange{
opacity: .5;
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange:hover{
opacity: 1;
color:#000000;
background: #FF9000;
}
.orange2{
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #FF9000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange2:hover{
color:#000000;
background: #FF9000;
}
Javascript:
$('a.orange').click(function(){
$('a.orange2').addClass('orange');
$('a.orange').removeClass('orange2');
$(this).removeClass('orange');
$(this).addClass('orange2');
});

In your Javascript code you are applying the onClick listener only to a.orange (a elements with the class orange)
$('a.orange').click(function(){ ... });
Since the "ALL" menu entry does not have orange, but orange2 as its class, it is not affected by that.
You can fix this by including a.orange2 in the selector:
$('a.orange, a.orange2').click(function(){ ... });

Maybe something like that :
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
$('a.orange2').click(function(){
$('a.orange2').removeClass('orange2').addClass('orange');
$(this).addClass('orange2').removeClass('orange');
});
http://jsfiddle.net/khzehpfx/

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/