Skip to content

Instantly share code, notes, and snippets.

@MacKentoch

MacKentoch/menu_button.html

Last active August 29, 2015 14:27
Show Gist options
  • Save MacKentoch/8bf927d25c48de12665b to your computer and use it in GitHub Desktop.
Save MacKentoch/8bf927d25c48de12665b to your computer and use it in GitHub Desktop.
Download ZIP
a nice menu button
Raw
menu_button.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>a nice menu button</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<style>
/*==============================
menu button
==============================*/
.menu-open {
overflow: hidden
}
#menu-link {
position: fixed;
top: 18px;
height: 50px;
width: 50px;
z-index: 200;
border-radius: 50%;
right: 5%;
background-color: #202020
}
#menu-link.is-clicked {
background-color: #F7C723;
color: #202020
}
#menu-link .cd-menu-text {
height: 100%;
text-transform: uppercase;
color: #383838;
font-weight: 600;
display: none
}
#menu-link .menu-icon {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 18px;
height: 2px;
background-color: #FFF
}
#menu-link:hover .menu-icon {
background-color: #F7C723
}
#menu-link .menu-icon::before,#menu-link .menu-icon:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background-color: inherit;
left: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
transition: transform .3s
}
#menu-link .menu-icon::before {
-webkit-transform: translateY(-6px) rotate(0deg);
-moz-transform: translateY(-6px) rotate(0deg);
-ms-transform: translateY(-6px) rotate(0deg);
-o-transform: translateY(-6px) rotate(0deg);
transform: translateY(-6px) rotate(0deg)
}
#menu-link .menu-icon::after {
-webkit-transform: translateY(6px) rotate(0deg);
-moz-transform: translateY(6px) rotate(0deg);
-ms-transform: translateY(6px) rotate(0deg);
-o-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg)
}
#menu-link.is-clicked .menu-icon {
background-color: rgba(255,255,255,0)
}
#menu-link.is-clicked .menu-icon::after,#menu-link.is-clicked .menu-icon::before {
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
transition: transform .3s
}
#menu-link.is-clicked .menu-icon::before {
background-color: #202020;
-webkit-transform: translateY(0) rotate(45deg);
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-o-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg)
}
#menu-link.is-clicked .menu-icon::after {
background-color: #202020;
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg)
}
.overlay {
position: fixed;
background: #000;
top: 0;
right: 0;
width: 0;
height: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s,visibility .35s,width .35s ease-in-out;
transition: opacity .35s,visibility .35s,width .35s ease-in-out;
overflow: hidden;
z-index: 100
}
.overlay.open {
opacity: .9;
visibility: visible;
width: 100%;
overflow: hidden
}
.overlay nav {
position: relative;
height: 60%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 32px;
font-weight: 400;
text-align: center
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%
}
.overlay nav ul li {
display: block;
height: 20%;
height: -webkit-calc(100% / 5);
height: calc(100% / 5);
min-height: 32px;
position: relative
}
.overlay nav ul li a {
display: block;
position: relative;
color: #FFF;
overflow: hidden
}
.overlay nav ul li a:hover {
text-decoration: none
}
.overlay nav ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%);
height: 3px;
width: 100%;
background: #F7C723;
-webkit-transition: .35s ease;
transition: .35s ease
}
.overlay nav ul li a:hover:after {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0)
}
</style>
<script type="text/javascript">
/**
* index view : main controller
*/
;(function(){
'use strict';
angular
.module( 'app',
[
'app.index.mainController'
]
);
angular
.module('app.index.mainController', [])
.controller('mainController', indexController);
indexController.$inject = [];
function indexController(){
var indexCtrl = this;
indexCtrl.menuIsOpened = false;
indexCtrl.toggleMenu = toggleMenu;
/**
* toggle menu from menu button click
*/
function toggleMenu(){
indexCtrl.menuIsOpened = !indexCtrl.menuIsOpened;
}
}
})();
</script>
</head>
<body ng-controller="mainController as indexCtrl" ng-class="{'menu-open' : indexCtrl.menuIsOpened}">
<a id="menu-link" href="#" class="" ng-click="indexCtrl.toggleMenu()" ng-class="{'is-clicked' : indexCtrl.menuIsOpened}">
<span class="menu-icon"></span>
</a>
<div class="overlay" id="overlay" ng-class="{'open' : indexCtrl.menuIsOpened}">
<nav class="overlay-menu">
<ul>
<li><a href="#home" class="smooth-scroll">Home</a></li>
<li><a href="#about" class="smooth-scroll">About</a></li>
<li><a href="#contact" class="smooth-scroll">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment