Menus different from regular menus can make your website more beautiful and attractive. In this code, we have a toggle button in the upper corner of the website that opens the menu by clicking on it. The menu theme is red and brown and each menu item is white and there is a circular icon next to it. This menu opens from the corner of the page and moves the website a little, and by closing the menu, the website returns to its original place.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link rel="stylesheet" href="http://www.devanswer.com/codes/files/normalize.min.css">
<div class="page">
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
<li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
<li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
</ul>
<main class="content">
<div class="content_inner">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Click the <strong style="color: red;">red button </strong> in the left corner. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel dolorem, ducimus laudantium, earum eos natus sint voluptatum dolores fuga quibusdam consectetur dicta. Laudantium enim inventore iusto ducimus est velit aperiam tempora quibusdam id dolore natus perferendis, debitis distinctio optio repellendus, repellat molestias delectus harum eius, reiciendis dicta ipsum architecto! Eligendi expedita in beatae, placeat unde voluptatibus voluptates consectetur explicabo laudantium, officiis ad nihil. Beatae similique voluptate sequi voluptatem delectus iure in omnis, fuga ipsam nulla ipsum architecto, iste debitis nisi labore quisquam odio accusantium corporis sint perspiciatis. Excepturi earum nobis soluta, doloremque nihil dolorum illum quaerat magnam nemo non sed!</p>
</div>
</main>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
overflow: hidden;
}
.page {
height: 100%;
background-color: #584E4A;
}
.content {
height: 200%;
transform-origin: top left;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
background-color: #f0f0f0;
}
.content_inner {
height: 50%;
overflow-y: auto;
padding: 50px 20%;
}
.menu_toggle {
z-index: 900;
position: fixed;
top: 0;
left: 0;
display: block;
cursor: pointer;
width: 100px;
height: 80px;
background-color: #F37272;
border-bottom-right-radius: 100%;
}
.menu_toggle:active i {
opacity: 0.8;
}
.menu_toggle i {
color: #f0f0f0;
}
.menu_toggle .menu_open,
.menu_toggle .menu_close {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -12px;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_toggle .menu_open {
transform-origin: -100px -100px;
}
.menu_toggle .menu_close {
transform: rotate(20deg);
transform-origin: -100px -160px;
}
.menu_items {
position: fixed;
bottom: 0;
left: 50px;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu_items li {
height: 60px;
margin-bottom: 30px;
transform: translateX(-300px);
transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_items li:nth-child(2) {
margin-left: 40px;
}
.menu_items li:nth-child(3) {
margin-left: 80px;
}
.menu_items a {
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #a4a4a4;
transition: color 0.2s;
}
.menu_items a .icon {
position: relative;
display: inline-block;
margin-right: 25px;
color: #f0f0f0;
}
.menu_items a .icon:after {
position: absolute;
top: 50%;
left: 50%;
content: "";
display: block;
width: 60px;
height: 60px;
margin-left: -33px;
margin-top: -32px;
border-radius: 100%;
border: 2px solid #f0f0f0;
transition: border-color 0.2s;
}
.menu_items a:hover {
color: #f0f0f0;
}
.menu_items a:hover .icon:after {
border-color: #F37272;
}
.menu_items a:active .icon {
color: #F37272;
}
.shazam .content {
transform: rotate(-30deg);
}
.shazam .menu_open {
transform: rotate(-20deg);
}
.shazam .menu_close {
transform: rotate(0);
}
.shazam .menu_items li {
transform: translateX(0);
transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu_items li:nth-child(2) {
transition-delay: 0.47s;
}
.shazam .menu_items li:nth-child(3) {
transition-delay: 0.48s;
}
h1 {
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
}
body {
color: #584E4A;
}Javascript
var $page = $('.page');
$('.menu_toggle').on('click', function(){
$page.toggleClass('shazam');
});
$('.content').on('click', function(){
$page.removeClass('shazam');
});
