Ninja Zoom Nav

Developer
Shak Daniel
Size
3,525 Kb
Views
22,264
  1. Ninja Zoom Nav Previews
  2. Ninja Zoom Nav HTML Codes
  3. Ninja Zoom Nav CSS Codes
  4. Ninja Zoom Nav JS Codes

How do I make an ninja zoom nav?

No JS pure CSS this button backflips like a Ninja.. What is a ninja zoom nav? How do you make a ninja zoom nav? This script and codes were developed by Shak Daniel on 24 September 2022, Saturday.

Ninja Zoom Nav Previews
IQ Test

Ninja Zoom Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ninja Zoom Nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <input type="checkbox" id="toggle"/> <label for="toggle" id="toggle-btn"></label> <div class="nav-icon"></div> <nav data-state="close"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
</header> <script src="js/index.js"></script>
</body>
</html>

Ninja Zoom Nav - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; overflow-x: hidden; background: -webkit-linear-gradient(SlateBlue, RoyalBlue); background: linear-gradient(SlateBlue, RoyalBlue);
}
*,
*:before,
*:after { box-sizing: border-box;
}
nav,
nav ul { position: fixed; width: 100%; height: 100%;
}
nav { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); -webkit-transition: all 0.25s; transition: all 0.25s;
}
nav ul li { display: table; width: 100%; height: calc(100% /4); border-bottom: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); -webkit-perspective: 0px; perspective: 0px; -webkit-transform: rotateX(-90deg) scale(0.5); transform: rotateX(-90deg) scale(0.5); -webkit-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s;
}
nav ul li a { display: table-cell; vertical-align: middle; text-align: center; text-decoration: none; font-size: 2.5em; letter-spacing: 0.2em; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.3); font-family: 'Helvetica', sans-serif; font-weight: 100;
}
nav ul li a:hover { background: rgba(255,255,255,0.1);
}
#toggle { display: none;
}
#toggle + #toggle-btn,
.nav-icon { position: absolute; top: 15px; right: 15px; border-radius: 3px; cursor: pointer;
}
#toggle + #toggle-btn { height: 40px; width: 40px; z-index: 1000; background: rgba(0,0,0,0.05);
}
.nav-icon,
.nav-icon:before,
.nav-icon:after { position: absolute; height: 4px; width: 40px; margin: 18px 0; z-index: 900; border-radius: 3px; background: #fff; -webkit-transition: all 0.25s; transition: all 0.25s;
}
.nav-icon:before { content: ""; margin-top: -18px;
}
.nav-icon:after { content: ""; margin-top: 18px;
}
#toggle:checked ~ nav { opacity: 1; -webkit-transform: scale(0.8); transform: scale(0.8);
}
#toggle:checked ~ .nav-icon { background: rgba(255,0,0,0);
}
#toggle:checked ~ .nav-icon:before { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); margin-top: 0;
}
#toggle:checked ~ .nav-icon:after { -webkit-transform: rotate(225deg); transform: rotate(225deg); margin-top: 0;
}
#toggle:checked ~ nav ul li { -webkit-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1);
}

Ninja Zoom Nav - Script Codes JS Codes

/********************************
https://twitter.com/Shak_Dizzle
http://instagram.com/shak_dizzle
http://dribbble.com/shakdaniel
********************************/
Ninja Zoom Nav - Script Codes
Ninja Zoom Nav - Script Codes
Home Page Home
Developer Shak Daniel
Username shakdaniel
Uploaded September 24, 2022
Rating 4.5
Size 3,525 Kb
Views 22,264
Do you need developer help for Ninja Zoom Nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shak Daniel (shakdaniel) Script Codes
Name
Halloween CSS Candy
Animated Logo
Cool Blur Effect
Applying a CSS and SVG mask
Samurai Slash
Parallax.Js Test
Flat-n-Blur
Pure CSS Terminal
Drag -n- Blur
A Pen by Shak Daniel
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!