<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script>
$('#menu-container').click(function(e) {
e.preventDefault(); // default action of the event won't be triggered
// first we'll check if the menu container has the class of open which would mean the menu is currently open
if ( $('#menu-container').hasClass('open') ) {
// if open animate both drumsticks back to original state of horizontal
$('.drumstick-top').removeClass('rotate45degUp'); // rotate drumstick back down
$('.drumstick-bottom').removeClass('rotate45degDown'); // rotate drumstick back down
// hide drumstick container by rotating on X-axis
$('#drumstick-container').addClass('rotateXaxis');
// wait 700 milliseconds then rotate guitar container on X-axic to reveal collapse guitars
$('#guitar-container').delay(700).removeClass('rotateXaxis');
// the next two will position the top and bottom guitars to their original position
$('.guitar-top').removeClass('move-top');
$('.guitar-bottom').removeClass('move-bottom');
// remove the class open from 'this' which is the menu container and add the class close because it's in it's closed state
$('.w0').text('MENU');
$(this).removeClass('open').addClass('close');
} else { // these are the actions to take if the menu isn't open
// move the 2 guitars to the middle
$('.guitar-top').addClass('move-top');
$('.guitar-bottom').addClass('move-bottom');
// flip guitar container on X-axix so it's not visible
$('#guitar-container').addClass('rotateXaxis');
// flip drumstick container on X-axix so it is visible after 700 millisecond delay
$('#drumstick-container').delay(700).removeClass('rotateXaxis');
// rotate the 2 drumsticks 45 degrees so that they form an X creating a close menu icon
$('.drumstick-top').addClass('rotate45degUp');
$('.drumstick-bottom').addClass('rotate45degDown');
// remove the class close from 'this' which is the menu container and add the class open because it's in it's open state
$('.w0').text('CLOSE');
$('#menu-container').removeClass('close').addClass('open');
}
});
</script>
<style>
/* background setting */
body {
background-color: #1a202c;
}
/* outer menu container settings */
#menu-container {
width: 110px;
height: 110px;
border: none;
padding: 10px;
border-radius: 40px;
position: absolute;
cursor: pointer;
z-index: 10000;
display: inline-block;
background-color: #1a202c;
box-shadow: inset 0 0 0 1px #157f84;
transition: 0.3s ease;
top:0 !important;
left:0;right:0;bottom:0;
margin:auto;
}
/* when menu is open apply inset box shadow */
#menu-container.open {
box-shadow: inset 0 0 0 1px #157f84,inset 0 5px 30px #157f84;
}
/* set 'MENU' text when Menu options are shown */
#menu-container.open #warped>span[class^=w]:nth-of-type(n+0) {
top:105px;
font-size:13px;
color:#157f84;
}
/* guitar container settings */
#menu-container #guitar-container {
margin: auto;
position: absolute;
border-radius: 40px;
top: 0; left: 0; bottom: 0; right: 0;
height: 82px;
z-index: 50;
}
/* settings for guitar images */
#menu-container #guitar-container img {
display:block;
width: 100px;
margin: 0 auto;
}
/* margin settings for top and middle guitar images */
#menu-container #guitar-container .guitar-top, #menu-container #guitar-container .guitar-middle {
margin-bottom: -10px
}
/* set transition speed of guitars and drumsticks when animation occurs */
.guitar-top, .guitar-middle, .guitar-bottom, #guitar-container, #drumstick-container, .drumstick-top, .drumstick-bottom {
transition: 0.3s ease;
}
/* rotate element at X-axis 90 degrees */
.rotateXaxis {
-webkit-transform: rotateX(90deg); /* Safari */
transform: rotateX(90deg); /* Standard syntax */
}
/* translate moves element from current possition to parameters given for X-axis and Y-axis */
.move-top {
-ms-transform: translate(0px,24px); /* IE 9 */
-webkit-transform: translate(0px,24px); /* Safari */
transform: translate(0px,24px);
}
.move-bottom {
-ms-transform: translate(0px,-24px); /* IE 9 */
-webkit-transform: translate(0px,-24px); /* Safari */
transform: translate(0px,-24px);
}
/* settings for drumstick images */
#menu-container #drumstick-container img {
display:block;
width: 100px;
margin: 0 auto;
}
/* settings for drumstick container */
#drumstick-container {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 5px;
z-index: 50;
}
/* settings for guitar images */
#drumstick-container .drumstick-bottom {
margin-top: -5px !important;
}
/* rotate 45 degrees upward */
.rotate45degUp {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(45deg) !important; /* Safari */
transform: rotate(45deg) !important; /* Standard syntax */
}
/* rotate 45 degrees downward */
.rotate45degDown {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(-45deg); /* Safari */
transform: rotate(-45deg); /* Standard syntax */
}
/* settings for 'MENU' text container */
#warped {
position: relative;
display: block;
/* width:184px; height:140px */
}
#warped>span[class^=w]:nth-of-type(n+0){
display:block;
position:absolute;
-moz-transform-origin:50% 100%;
-webkit-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
transform-origin:50% 100%;
color: #fff;
font-family: 'Montserrat';
}
#warped span{
font-family:'Montserrat';
font-size:14px;
font-weight:regular;
font-style:normal;
line-height:0.5;
white-space:pre;
overflow:visible;
padding:0px;
transition: 0.3s ease;
}
#warped .w0 {
letter-spacing: 2px;
width: 100%;
height: 9px;
left: 0;
right: 0;
top: 107px;
text-align: center;
}
</style>
</head>
<body>
<!-- outer menu container -->
<div id="menu-container" class="close" style="top:20px;">
<!-- container for 'MENU' text -->
<div id='warped'>
<span class='w0'>MENU</span>
</div><!-- END #warped -->
<!-- container for guitar images -->
<div id="guitar-container" class="guitar">
<img src="http://gregvissing.github.io/img/other/guitar-white-r.png" class="guitar-top">
<img src="http://gregvissing.github.io/img/other/guitar-white-l.png" class="guitar-middle">
<img src="http://gregvissing.github.io/img/other/guitar-white-r.png" class="guitar-bottom">
</div><!-- END #guitar-container -->
<!-- container for drumstick images -->
<div id="drumstick-container" class="stick rotateXaxis">
<img src="http://gregvissing.github.io/img/other/drumstick-white-l.png" class="drumstick-top">
<img src="http://gregvissing.github.io/img/other/drumstick-white-r.png" class="drumstick-bottom">
</div><!-- END #drumstick-container -->
</div><!-- END #menu-container -->
</body>
</html>
This is a mobile menu button I created for the Live at the Ludlow Garage concert venue website I developed in WordPress. URL: http://liveattheludlowgarage.com
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.