Advanced Drop-down Menu Animation.
Makisu is an experimental jquery plugin for CSS 3D dropdown navigation menu supported for modern browsers
Inspired by: https://shorturl.at/bcAIT
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<section>
<dl class="list woodstripe">
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
<div class="toggleX">
<input type="checkbox" id="toggle" class="toggle" checked>
<label for="toggle"></label>
</div>
</section>
Create a style.css file with this CSS code.
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap');
html, body {
-webkit-font-smoothing: antialiased;
background-color: #e2e1e0;
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
font-family: 'Rowdies', cursive;
}
.list {
transform-style: preserve-3d;
position: absolute;
margin-left: -140px;
margin-top: -280px;
top: 55%;
}
.list dd {
text-indent: 10px;
line-height: 55px;
background: #E0FBAC;
margin: 0;
height: 55px;
width: 270px;
color: #fff;
border-top: 1px dashed rgba(255, 255, 255, 0.3);
line-height: 35px;
font-size: 11px;
height: 35px;
margin: 0;
}
.woodstripe dd {
background-color: #772f1a;
background-image: linear-gradient(8deg, #772f1a 0%, #f2a65a 74%);
}
.woodstripe {
transform: perspective(1200px) rotateY(40deg) !important;
transform-origin: 110% 25%;
left: 35%;
}
.toggleX {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(160%, -50%, 0);
}
.toggleX label {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50px;
cursor: pointer;
background-color: #57de72;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px rgba(3, 132, 28, 0.54117);
border: 1px solid green;
}
.toggleX label:before {
content: "ON";
position: absolute;
left: -56px;
top: 30px;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.toggleX input {
display: none;
}
.toggleX input:checked + label {
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0 9px 15px 0px #ef4247;
border: 2px solid #a70000;
background-color: #fd1015;
}
.toggleX input:checked + label:before {
content: "OFF";
position: absolute;
left: -56px;
top: 30px;
font-size: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
Now add jquary CDN, makisu.js file and Create script.js file with this Jaascript Code
var $woodstripe = $('.woodstripe');
$woodstripe.makisu({
selector: 'dd',
overlap: 0.85,
speed: 1.7,
});
$('.list').makisu('open');
$('.toggle').on('click', function(event){
$('.list').makisu('toggle');
});
$('.demo a').click(function(event) {
event.preventDefault();
});
then,
connect the style.css and script.js file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments