How we can create an SVG shape based stylish navigation? Solution: See this SVG Navigation Menu Using CSS and JavaScript, Hamburger Type Menu.
Previously I have shared many navigation related programs, but this is an SVG navigation with CSS and JavaScript. Basically, The hamburger button, named for its unintentional resemblance to a hamburger. And it typically placed in a top corner of a graphical user interface. The navigation contains useful links and helps users to navigate easily.
Today you will learn to create Hamburger Type Menu using SVG. Basically, there is a colorful background with zig-zag shaped waves and a hamburger button in the top-right corner. When you will click on the menu button, the navigation links Home, About, Services, and Contact will reveal with waving shape and animation. While the menu is active and showing navigation links, the hamburger button becomes cross or close button.
So, Today I am sharing SVG Navigation Menu Using CSS and JavaScript. There I have used SVG to creating shapes, CSS for styling elements and animation effect. Also, there I have used a JS library named “Anime.js” for the text animation. Because it is a JS library that’s why I am calling this a JavaScript program. You can use this navigation on your website, after link customization.
If you are thinking now how this SVG hamburger menu actually is, then see the preview given below.
Preview Of Hamburger Type Menu
See this video preview to getting an idea of how this navigation menu looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Material Button With Ripple Effect
- jQuery Scroll Timeline
- Menu Icon Transforms
- Responsive Pagination UI
SVG Navigation Menu Using CSS and JavaScript Source Code
Before sharing source code, let’s talk about it. First I have created a button for the hamburger and used SVG inside the button to create it. After that, I have created a nav section and placed all links inside it, these are also based on SVG. Also in the HTML file, I have linked external files like CSS, JS, and the Anime.js CDN link.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. I have created the save lines background using SVG and CSS background command. And with CSS I gave basic values to all the elements like size, position, margin, padding, etc. There I have used transform and transition commands to create the animation effect.
JavaScript handling here the toggle menu open and close feature in this program. And also the JS library handling the text animation. There I have used JS classList.toggle command to create the toggle feature, and created the text animation using library’s pre-built command and fuctions.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>SVG Navigation | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <button aria-label="Toggle Navigation"> <svg viewBox="-50 -40 100 80" width="50" height="40"> <defs> <path id="line" fill="none" stroke="currentColor" stroke-width="15" stroke-linecap="round" d="M -40 0 h 80" /> </defs> <g> <g class="translate" transform="translate(0 -30)"> <g class="rotate" transform="rotate(-45)"> <use transform="rotate(45)" href="#line" /> </g> </g> <g class="rotate" transform="rotate(45)"> <use transform="rotate(-45)" href="#line" /> </g> <g class="translate" transform="translate(0 30)"> <g class="rotate" transform="rotate(-45)"> <use transform="rotate(45)" href="#line" /> </g> </g> </g> </svg> </button> <nav> <svg viewBox="0 0 500 400" width="500" height="400"> <defs> <path id="path" d="M -150 60 q 50 -20 100 0 t 100 0 100 0 100 0 100 0 100 0 100 0 100 0" fill="none" /> </defs> <g transform="translate(0 0)"> <a href="#home"> <text> <textPath text-anchor="middle" href="#path" startOffset="0%"> Home </textPath> </text> </a> </g> <g transform="translate(0 100)"> <a href="#about"> <text> <textPath text-anchor="middle" href="#path" startOffset="100%"> About </textPath> </text> </a> </g> <g transform="translate(0 200)"> <a href="#services"> <text> <textPath text-anchor="middle" href="#path" startOffset="0%"> Services </textPath> </text> </a> </g> <g transform="translate(0 300)"> <a href="#contact"> <text> <textPath text-anchor="middle" href="#path" startOffset="100%"> Contact </textPath> </text> </a> </g> </svg> </nav> <script src='https://unpkg.com/animejs@3.1.0/lib/anime.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url("https://fonts.googleapis.com/css?family=Chango&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30' opacity='0.2' width='80' height='60'%3E%3Cpath d='M 0 15 q 10 -7 20 0 t 20 0' fill='none' stroke='hsl(0, 0%25, 100%25)' stroke-linecap='round' stroke-width='2' /%3E%3C/svg%3E"), #ff9900; color: hsl(0, 0%, 100%); background-position-x: 50%; background-size: 50px; min-height: 100vh; display: flex; align-items: center; justify-content: center; } button { position: absolute; top: 1rem; right: 1rem; width: 4rem; height: 4rem; background: none; border: none; color: inherit; padding: 0.5rem; } button:focus { outline-color: currentColor; } button svg { width: 100%; height: auto; display: block; filter: drop-shadow(5px 5px hsl(0, 0%, 20%)); } button .translate { transition: transform 0.25s ease-in-out; transition-delay: 0.25s; } button .rotate { transition: transform 0.25s ease-in-out; transition-delay: 0s; } button.open .translate { transform: translateY(0); transition-delay: 0s; } button.open .rotate { transform: rotate(0); transition-delay: 0.25s; } nav { width: 100vmin; visibility: hidden; } nav svg { width: 100%; height: auto; display: block; } nav svg text { text-shadow: 0px 0.2rem hsl(0, 0%, 20%); font-family: "Chango", cursive; fill: currentColor; font-size: 2.255rem; letter-spacing: 0px; transition-property: letter-spacing, text-shadow; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } nav svg a { color: inherit; outline: none; } nav svg a:hover text, nav svg a:focus text { letter-spacing: 5px; text-shadow: 0px 0.5rem hsl(0, 0%, 20%); } |
function.js
The final step, create a JS file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Code By Webdevtrick ( https://webdevtrick.com ) const button = document.querySelector('button'); const nav = document.querySelector('nav'); // toggle a class of open on the button and nav element button.addEventListener('click', () => { nav.classList.toggle('open'); button.classList.toggle('open'); const isOpen = nav.classList.contains('open'); // animate the text path to move in/out anime({ targets: 'textPath', startOffset: (d, i) => { if (isOpen) { return i % 2 === 0 ? '60%' : '40%'; } return i % 2 === 0 ? '0%' : '100%'; }, duration: 2500, // slight delay for the opening animation, to follow the hamburger menu delay: isOpen ? 200 + anime.stagger(50) : anime.stagger(50), // considering the class on the nav element, toggle its visibility to prevent focus events begin: () => { if (nav.classList.contains('open')) { nav.style.visibility = 'visible'; } }, complete: () => { if (!nav.classList.contains('open')) { nav.style.visibility = 'hidden'; } }, }); }); |
That’s It. Now you have successfully created SVG Navigation Menu Using CSS and JavaScript, Hamburger Type Menu. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
