Nav Simplest (docode)
How do I make an nav simplest (docode)?
Playing with responsive menu by .do {code}. Source: http://codepen.io/docode/pen/QbbQwm. What is a nav simplest (docode)? How do you make a nav simplest (docode)? This script and codes were developed by DEADBOOT on 16 December 2022, Friday.
Nav Simplest (docode) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav Simplest (docode)</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <h1 class="logo">Fuuuu!</h1>
<nav> <a href="#" class="menu-trigger">Menu</a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Products</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Nav Simplest (docode) - Script Codes CSS Codes
.logo{ float: left; padding: 20px 30px;
}
body { background-color: #F8ECC2; font-family: Sans Guilt MB, Helvetica Neue, Arial, sans-serif; font-size: 30px
}
nav { width: 100%; background-color: #65A8A6; text-align: right;
}
nav ul li { display: inline-block;
}
nav a { color: #F8ECC2; display: block; text-decoration: none; padding: 20px 30px; }
nav a:hover { background: #E65540;
}
.menu-trigger { display: none; color: #F8ECC2;
}
@media screen and (max-width:600px) { .menu-trigger { display: block; } nav ul li { display: block; border-top: 1px #79896D solid; } nav ul { display: none; }
}
Nav Simplest (docode) - Script Codes JS Codes
$(document).ready(function() { $('.menu-trigger').click(function() { $('nav ul').slideToggle(500); });//end slide toggle $(window).resize(function() { if ( $(window).width() > 600 ) { $('nav ul').removeAttr('style'); } });//end resize
});//end ready
Developer | DEADBOOT |
Username | deadboot |
Uploaded | December 16, 2022 |
Rating | 3 |
Size | 2,196 Kb |
Views | 12,144 |
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!
Name | Size |
Nav Top Drawer by J. Moore Vanilla JS | 2,625 Kb |
Menu JSM Mode Inline v2 | 5,945 Kb |
Basys_mdd--typeplate | 10,670 Kb |
Nav Slide from jQScript | 2,233 Kb |
Menu JS w fallback Sitechop | 3,190 Kb |
Menu jQ by Treehouse | 2,126 Kb |
Nav NoJS | 2,935 Kb |
Nav w fallback 2 | 4,268 Kb |
Fittext Demo | 2,377 Kb |
Basys_mdd--modernscale | 7,029 Kb |
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!
Name | Username | Size |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
Form Labels | Bartuc | 2,717 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Rainbow Drops | Csbarnes | 2,365 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!