Skip to content

Instantly share code, notes, and snippets.

@Poordeveloper

Poordeveloper/Burger menu.markdown

Created October 21, 2015 16:25
Show Gist options
  • Save Poordeveloper/a8ed9b666cf668010ba5 to your computer and use it in GitHub Desktop.
Save Poordeveloper/a8ed9b666cf668010ba5 to your computer and use it in GitHub Desktop.
Download ZIP
Burger menu
Raw
index.html
<main class="main_menu">
<div class="burger_menu">
<div class="top_line"></div>
<div class="middle_line"></div>
<div class="bottom_line"></div>
</div>
<div class="image">
<i class="fa fa-image image-ico"></i>
</div>
<div class="location">
<i class="fa fa-map-marker map-marker-ico"></i>
</div>
<div class="mail">
<i class="fa fa-envelope envelope-ico"></i>
</div>
<div class="home">
<i class="fa fa-home home-ico"></i>
</div>
</main>
<div class="circ_wrap">
<div class="circle_background"></div>
</div>
<!-- page layout content -->
<!-- Home -->
<section class="home_content">
<i class="fa fa-close icon_close close_home"></i>
<i class="fa fa-home home-show-only"></i>
<div class="profile">
<img src="http://i.cubeupload.com/0YfYWb.jpg" height="100%" width="100%" alt="">
</div>
<div class="description">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>
</section>
<!-- Location -->
<section class="location_content">
<i class="fa fa-close icon_close close_location"></i>
<i class="fa fa-map-marker map-show-only"></i>
<div class="map">
<div class="description">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>
</div>
</section>
<!-- Image -->
<section class="image_content">
<i class="fa fa-close icon_close"></i>
<i class="fa fa-image image-show-only"></i>
<div class="row">
<section class="col_1">
<div class="box_1">
<div class="left_img-top"></div>
<div class="left_img-bottom"></div>
<div class="dsc1"></div>
<div class="dsc2"></div>
<div class="dsc3"></div>
<div class="dsc4"></div>
<div class="dsc5"></div>
<div class="dsc6"></div>
<div class="dsc7"></div>
</div>
<div class="description1"></div>
<div class="description2"></div>
<div class="description3"></div>
</section>
<section class="col_2">
<div class="box_2">
<svg id='mysvg' height="200" width="200">
<polyline points="0,150 60,75 100,130 145,75 190,100 230,45 230,265 0,250" style="fill:#605770; stroke:#55486D; stroke-width:3" />
<circle class="circc" cx="4" cy "10" r="50" style="fill:#E59A13; stroke:#D99211; stroke-width: 3" />
</svg>
</div>
<div class="description1"></div>
<div class="description2"></div>
<div class="description3"></div>
</section>
<section class="col_3">
<div class="box_3">
<svg style="width:200; height:200;" viewbox="0 0 200 200">
<style type="text/css">
.st0{fill:none;stroke:#605770;stroke-width:7;stroke-miterlimit:10;}
.st1{fill:none;stroke:#605770;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#605770;stroke-miterlimit:10;}
.st3{fill:#605770;}
.st4{fill:none;stroke:#605770;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g id="XMLID_4_">
<line id="XMLID_1_" class="st0" x1="46.5" y1="176" x2="46.5" y2="41" />
<line id="XMLID_2_" class="st0" x1="49" y1="44.5" x2="156" y2="44.5" />
<line id="XMLID_3_" class="st0" x1="152.5" y1="42" x2="152.5" y2="176" />
</g>
<line id="XMLID_7_" class="st1" x1="152.6" y1="88.5" x2="168.3" y2="56" />
<line id="XMLID_9_" class="st1" x1="46.3" y1="87.9" x2="32.6" y2="54.6" />
<line id="XMLID_11_" class="st1" x1="45.2" y1="147.5" x2="11" y2="181.7" />
<line id="XMLID_10_" class="st1" x1="153" y1="147.5" x2="187.2" y2="181.7" />
<line id="XMLID_13_" class="st2" x1="339.2" y1="144.5" x2="305" y2="178.7" />
<line id="XMLID_12_" class="st2" x1="339.2" y1="144.5" x2="305" y2="178.7" />
<g id="XMLID_8_">
<path id="XMLID_22_" class="st3" d="M65,68c0,0,0.1-0.1,0.3-0.4c0.2-0.2,0.4-0.6,0.7-0.9c0.6-0.7,1.5-1.3,2.6-1.6
c0.5-0.1,1.1-0.1,1.7-0.1c0.6,0,1.3,0,1.9,0c1.3,0.1,2.8,0.1,4.2,0.3c2.9,0.3,5.8,0.8,7.9,1.4c0.5,0.2,1,0.3,1.5,0.4
c0.4,0.1,0.8,0.3,1.1,0.4c0.6,0.2,1,0.4,1,0.4c1.9,0.9,2.8,3.1,2,5c-0.4,0.9-1.1,1.6-2,2c0,0-0.4,0.2-1,0.4
c-0.3,0.1-0.7,0.2-1.1,0.4c-0.4,0.1-0.9,0.3-1.5,0.4c-2.2,0.6-5,1.1-7.9,1.4c-1.4,0.2-2.9,0.2-4.2,0.3c-0.7,0-1.3,0-1.9,0
c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2-0.9-2.6-1.6c-0.3-0.3-0.6-0.7-0.7-0.9C65.1,75.1,65,75,65,75C63.6,72.8,63.7,70.1,65,68z" />
</g>
<g id="XMLID_14_">
<path id="XMLID_24_" class="st3" d="M110,68c0,0,0.4-0.2,1.1-0.4c0.3-0.1,0.8-0.2,1.2-0.4c0.5-0.2,1-0.3,1.6-0.5
c1.2-0.3,2.5-0.6,4-0.9c1.5-0.3,3-0.5,4.6-0.7c1.6-0.2,3.1-0.3,4.6-0.4c1.5-0.1,2.8-0.1,4-0.1c1.2,0,2.1,0.8,2.8,1.6
c0.2,0.2,0.3,0.4,0.5,0.6c0.1,0.2,0.2,0.4,0.3,0.5c0.2,0.4,0.3,0.5,0.3,0.5c1.2,2.3,1.1,4.9,0,7c0,0-0.1,0.2-0.3,0.5
c-0.1,0.1-0.2,0.3-0.3,0.5c-0.1,0.2-0.3,0.4-0.5,0.6c-0.7,0.8-1.7,1.5-2.8,1.6c-1.2,0-2.5,0-4-0.1c-1.5-0.1-3-0.2-4.6-0.4
c-1.6-0.2-3.1-0.4-4.6-0.7c-1.5-0.3-2.8-0.6-4-0.9c-0.6-0.2-1.1-0.3-1.6-0.5c-0.5-0.2-0.9-0.3-1.2-0.4c-0.7-0.2-1.1-0.4-1.1-0.4
c-1.9-0.8-2.8-3-2-5C108.4,69.1,109.1,68.4,110,68z" />
</g>
<path id="XMLID_15_" class="st4" d="M118.3,120.5c0,0-19.5-5.7-25.8-4.2c-1.7,0.4-5.5,4.2-5.5,4.2" />
</svg>
</div>
<div class="description1"></div>
<div class="description2"></div>
<div class="description3"></div>
</section>
</div>
</section>
<!-- Mail -->
<section class="mail_content">
<i class="fa fa-close icon_close"></i>
<i class="fa fa-envelope envelope-show-only"></i>
<div class="form">
<div class="wrap">
<div class="left_form">
<div class="name">
<span></span>
</div>
<div class="email">
<span></span>
</div>
<div class="address">
<span></span>
</div>
</div>
<div class="right_form">
<div class="textarea">
<div class="textarea_txt"></div>
</div>
</div>
</div>
<div class="send">
<div class="send_txt"></div>
</div>
</div>
</section>
Raw
script.js
var $multiple_menus = '.home, .location, .image, .mail';
var $all_menus = '.burger_menu, .home, .location, .mail, .image';
$('.burger_menu').click(function() {
$(this).toggleClass('toggle_burger');
setTimeout(function() {
$('.home').toggleClass('toggle_home');
}, 100);
setTimeout(function() {
$('.location').toggleClass('toggle_location');
}, 200);
setTimeout(function() {
$('.image').toggleClass('toggle_image');
}, 300);
setTimeout(function() {
$('.mail').toggleClass('toggle_mail');
}, 400);
}); // "burger" to "X"
$($all_menus).click(function() {
$(this).siblings().css({
'z-index': '5'
}); //hide siblings of the clicked menu under the current clicked menu
$(this).css({
'z-index': '10'
}); //show current clicked item on top of the others
});
//full page layout
$('main i.fa').click(function() {
$(this).parent().toggleClass('freeze');
setTimeout(function() {
$('.circle_background').addClass('scale');
}, 500);
if ($(this).parent().hasClass('freeze')) {
$($multiple_menus).addClass('hide');
}
});
//Close menu
$('i.icon_close').click(function() {
$('.burger_menu').addClass('toggle_burger');
$(this).parent().fadeOut("slow");
setTimeout(function() {
$('.circle_background').removeClass('scale');
$('i.home-ico, i.map-marker-ico, i.image-ico, i.envelope-ico').fadeIn("slow");
}, 400);
setTimeout(function() {
$($multiple_menus).css({
'z-index': '4'
}).removeClass('hide freeze');
}, 700);
$('.circle_background').css({
'z-index': '2'
});
});
//////////////////////////////////////////////////////////////////
/*
// Home full page layout content into view
*/
//////////////////////////////////////////////////////////////////
$('i.home-ico').click(function() {
setTimeout(function() {
$('i.home-ico').fadeOut("fast");
}, 500);
setTimeout(function() {
$('.home_content').fadeIn("slow");
}, 1000);
});
//////////////////////////////////////////////////////////////////
/*
// Location full page layout content into view
*/
//////////////////////////////////////////////////////////////////
$('i.map-marker-ico').click(function() {
setTimeout(function() {
$('i.map-marker-ico').fadeOut("fast");
}, 500);
setTimeout(function() {
$('.location_content').fadeIn("slow");
}, 1000);
});
//////////////////////////////////////////////////////////////////
/*
// Image full page layout content into view
*/
//////////////////////////////////////////////////////////////////
$('i.image-ico').click(function() {
setTimeout(function() {
$('i.image-ico').fadeOut("fast");
}, 500);
setTimeout(function() {
$('.image_content').fadeIn("slow");
}, 1000);
});
//////////////////////////////////////////////////////////////////
/*
// Mail full page layout content into view
*/
//////////////////////////////////////////////////////////////////
$('i.envelope-ico').click(function() {
setTimeout(function() {
$('i.envelope-ico').fadeOut("fast");
}, 500);
setTimeout(function() {
$('.mail_content').fadeIn("slow");
}, 1000);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
// stylus mixins
center(top, right, bottom, left)
position absolute
top top
right right
bottom bottom
left left
margin auto
//resets
*
:before
:after
box-sizing border-box
padding 0
margin 0
*
{
user-select none
-webkit-tap-highlight-color rgba(0, 0, 0, 0)
}
// styling
body
overflow hidden
background #E59A13
.burger_menu
.home
.location
.mail
.image
border-radius 50%
cursor pointer
width 100px
height 100px
center(0,0,0,0)
display flex
justify-content center
align-items center
transition all 0.3s ease
//desktop hover over menus
@media (min-width: 769px)
.burger_menu
.home
.location
.mail
.image
&:hover
background #fff
[class*="_line"]
background #605770
i.fa
color #605770
// // mobile :active menus
// @media (max-width: 768px)
// .burger_menu
// &:active
// [class*="_line"]
// background #605770
.burger_menu
transform translateZ(0)
background #4D4861
width 110px
height 110px
z-index 5
[class*="_line"]
transition transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease
width 28px
height 4px
border-radius 10px
background #fff
center(0,0,0,0)
.top_line
top -20px
.bottom_line
top 20px
//via javascript
.toggle_burger
transform translateZ(0)
animation bounce 1s ease-in-out
.top_line
top 0
transform rotate(45deg)
.middle_line
opacity 0
.bottom_line
top 0
transform rotate(-45deg)
@keyframes bounce {
10%,
15% {
transform scale(0.7)
}
30%,
45% {
transform scale(1.1)
}
60%,
100% {
transform scale(1)
}
}
i.fa
transition color 0.5s ease
color #fff
font-size 25px
.home
.location
.mail
.image
width 80px
height 80px
background #605770
//toggle menus via js
.toggle_home
transform translate3d(-80px,-80px,0)
.toggle_location
transform translate3d(-80px,80px,0)
.toggle_mail
transform translate3d(80px,-80px,0)
.toggle_image
transform translate3d(80px,80px,0)
//Full Screen page when clicked via js
.hv_toggle
background #fff
&:hover
background #fff
i.fa
display none
/*****************************************************************
~ full page content
******************************************************************/
.freeze
background #fff
width 112px
height 112px
i.fa
color #605770
.hide
transform translate3d(0,0,0)
main i.fa
background rgba(0,0,0,0)
border-radius 50%
width 100px
height 100px
display flex
justify-content center
align-items center
// .circle_background
.circle_background
border-radius 50%
cursor auto
width 50px
height 50px
background #fff
transform translateZ(0)
transition all 0.3s linear
center(0,0,0,0)
.scale
z-index 12
opacity 1
transform scale(50)
/*****************************************************************
~ home content
******************************************************************/
.home_content
.location_content
.image_content
.mail_content
background #fff
width 100%
height 100vh
max-width 900px
margin 0 auto
text-align center
position relative
z-index 50
display none
i
color rgba(0,0,0,0.5)
cursor pointer
font-size 30px
position absolute
font-weight lighter
top 25px
transition all 0.2s ease
&:hover
color #605770
transform scale(0.9)
i.icon_home
left 360px
i.icon_close
right 40px
font-size 28px
img
transition all 0.3s ease
.profile
background-size 220px
border-radius 50%
cursor pointer
width 230px
height 230px
center(-220px,0,0,0)
overflow hidden
transform translateZ(0)
transition all 0.3s ease
// description
.description
height 120px
center(200px,0,0,0)
[class^="d"]
height 10px
background rgb(96, 87, 112)
margin 14px auto
border-radius 3px
&:nth-child(-n+2)
height 18px
.d1
max-width 200px
margin-top 0
.d2
max-width 300px
margin-bottom 40px
.d3
max-width 350px
.d4
max-width 330px
.d5
max-width 340px
/*****************************************************************
~ location content
******************************************************************/
.map
max-width 800px
height 300px
background no-repeat url("http://i.cubeupload.com/1JlsWO.jpg") center center
background-size cover
center(-10%,0,0,0)
.img_map
width 90%
height auto
i.map-show-only
i.image-show-only
i.home-show-only
i.envelope-show-only
left 40px
font-size 25px
.location_content
.description
background #fff
border-radius 10px
max-width 340px
top 0
height 200px
width 100%
padding 25px
/*****************************************************************
~ Image content
******************************************************************/
.image_content
i.icon_close
right 45px
i.image-show-only
left 50px
.row
padding-top 150px
display flex
flex-wrap wrap
[class^="col"]
background #E59A13
width 200px
height 200px
margin auto
[class^="description"]
background #605770
width 120px
height 8px
margin 10px auto
.description1
margin-top 50px
.description2
width 100px
/* box 1
-----------------------------------*/
.box_1
position relative
.left_img-top
.left_img-bottom
height 65px
width 80px
background lighten(#605770, 10%)
margin-top 20px
margin-left 20px
[class^="dsc"]
background darken(#605770, 10%)
width 80px
height 6px
position absolute
right 10px
top 0
.dsc2
top 15px
width 70px
right 16px
.dsc3
top 30px
.dsc4
top 45px
.dsc5
top 60px
.dsc6
top 75px
.dsc7
top 90px
width 30px
right 35px
/* box 2
-----------------------------------*/
.box_2
width 200px
height 200px
background lightblue
.col_2
.description1
margin-top 20px
.col_3
.description1
margin-top 15px
/*****************************************************************
~ mail_content styling
******************************************************************/
.wrap
padding-top 130px
&:after
content ""
display table
clear both
.left_form
float left
width 50%
> div
background #605770
display flex
justify-content center
align-items center
height 50px
width 80%
margin 20px 0 0 40px
span
background darken(#605770, 50%)
display block
width 90%
height 30px
.right_form
width 50%
float right
.textarea
background #605770
width 80%
height 190px
float right
margin 20px 40px 0 0
.textarea_txt
max-width 30%
height 30px
margin-top 10px
margin-left 10px
background darken(#605770, 50%)
.send
background #605770
width 200px
height 50px
margin 25px auto
display flex
justify-content center
align-items center
.send_txt
width 60%
height 30px
background darken(#605770, 50%)
/*****************************************************************
~ Media queries
******************************************************************/
@media only screen and (max-width 600px)
.right_form
.left_form
width 100%
margin 0 auto
float none
.left_form
> div
margin 0 auto
.right_form
.textarea
height 120px
float none
margin 20px auto
.col_2
.col_3
display none
.fosa
background blue
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment