Menu Toggle

Developer
Ashepherd1
Size
2,635 Kb
Views
14,168
  1. Menu Toggle Previews
  2. Menu Toggle HTML Codes
  3. Menu Toggle CSS Codes
  4. Menu Toggle JS Codes

How do I make an menu toggle?

What is a menu toggle? How do you make a menu toggle? This script and codes were developed by Ashepherd1 on 29 November 2022, Tuesday.

Menu Toggle Previews
IQ Test

Menu Toggle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu Toggle</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <a class="menu-icon"> <span></span> <span></span> <span></span> </a> <div class="menu hidden"> <p>This is a menu.<p> <p>This is a menu.<p> <p>This is a menu.<p> <p>This is a menu.<p> <p>This is a menu.<p> <p>This is a menu.<p> <p>This is a menu.<p> <button class="btn-primary">Button.</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu Toggle - Script Codes CSS Codes

body { background: #D9D9D9; font-family: arial;
}
.wrapper { max-width: 375px; margin: auto; background: white; height: 100vh; border: 1px solid silver;
}
.menu { width: 300px; padding: 10px; float: left; clear: both; border: 1px solid black;
}
.hidden { opacity: 0;
}
.menu-icon { width: 35px; height: 31px; padding: 10px; border: 1px solid #3e3e3e; float: left; position: relative; background: #FFFFFF;
}
.menu-icon span { width: 35px; height: 3px; background: black; margin-bottom: 4px; position: absolute; transition: all 200ms ease; transform-origin: center center;
}
.menu-icon span:nth-of-type(1) { top: 16px;
}
.menu-icon span:nth-of-type(2) { top: 24px;
}
.menu-icon span:nth-of-type(3) { top: 32px;
}
.menu-icon.nav-open span:nth-of-type(1) { transform: translate(0, 8px) rotate(45deg); -webkit-transform: translate(0, 8px) rotate(45deg); -ms-transform: translate(0, 8px) rotate(45deg); transition: all 200ms ease; transform-origin: center center;
}
.menu-icon.nav-open span:nth-of-type(2) { background: white; opacity: 0; transition: all 8ms ease; transform-origin: center center;
}
.menu-icon.nav-open span:nth-of-type(3) { transform: translate(0, -8px) rotate(-45deg); -webkit-transform: translate(0, -8px) rotate(-45deg); -ms-transform: translate(0, -8px) rotate(-45deg); transition: all 200ms ease; transform-origin: center center;
}
.menu p { margin: 35px 0 70px 0;
}

Menu Toggle - Script Codes JS Codes

$('.menu-icon').on('click', function () { $(this).toggleClass('nav-open');
});
$('.menu-icon').on('click', function () { $('.menu').toggleClass('hidden');
});
Menu Toggle - Script Codes
Menu Toggle - Script Codes
Home Page Home
Developer Ashepherd1
Username ashepherd1
Uploaded November 29, 2022
Rating 3
Size 2,635 Kb
Views 14,168
Do you need developer help for Menu Toggle?

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!

Ashepherd1 (ashepherd1) Script Codes
Name
A Pen by ashepherd1
GR TYM
DeferCuralate
Partially Responsive Content Layout
Image swap fade on hover.
MatchMedia JS Listener
Pattern Library
Fade Show Reveal by height
Lazy Sizes
Multiple modals from top at variable heights
Create amazing sales emails 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!