Responsive Menu I
How do I make an responsive menu i?
What is a responsive menu i? How do you make a responsive menu i? This script and codes were developed by Roderick Sandoval on 16 October 2022, Sunday.
Responsive Menu I - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Menu I</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="navigation"> <nav class="block-menu"> <h2>Responsive Menu I</h2> <ul class="menu"> <li class="first"><a href="/">Menu Item 1</a></li> <li><a href="#">Menu Item 2</a></li> <li><a href="#">Menu Item 3</a></li> <li class="expanded"><a href="#">Menu Item 4</a> <ul class="menu"> <li class="first"><a href="#">Sub-Item</a></li> <li><a href="#">Sub-Item</a></li> <li class="last"><a href="#">Sub-Item</a></li> </ul> </li> <li class="expanded"><a href="#">Menu Item 5</a> <ul class="menu"> <li class="first"><a href="#">Sub-Item</a></li> <li><a href="#">Sub-Item</a></li> <li class="last"><a href="#">Sub-Item</a></li> </ul> </li> <li class="last"><a href="#">Menu Item 6</a></li> </ul> </nav>
</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>
Responsive Menu I - Script Codes CSS Codes
.navigation ul { margin: 0; padding: 0; list-style: none; list-style-image: none;
}
.navigation ul li { display: inline-block; vertical-align: middle; zoom: 1; *display: inline;
}
body { margin: 0; font-family: avenir, 'avenir next', helvetica, arial, sans-serif;
}
a { text-decoration: none;
}
.navigation { position: relative; height: 60px; background: #7FDBFF; line-height: 60px;
}
.navigation h2 { display: none;
}
.navigation ul { text-align: center;
}
.navigation ul li a { display: block; padding: 0 10px; color: #000; line-height: 40px;
}
.navigation ul li a:hover { background: #FFDC00;
}
.navigation ul li:hover ul { visibility: visible;
}
.navigation ul ul { position: absolute; visibility: hidden; background: #7FDBFF; text-align: left;
}
.navigation ul ul li { display: block;
}
@media (max-width: 768px) { .navigation h2 { position: relative; display: block; margin: 0; padding: 0 20px; font-weight: 600; cursor: pointer; } .navigation h2:after { position: absolute; top: 0; right: 20px; content: "\2630"; } .navigation a { padding: 0 20px; } .navigation ul { display: none; width: 100%; } .navigation ul li { display: block; border-bottom: solid 1px #000; background: #7FDBFF; text-align: left; } .navigation ul li.last { border-bottom: none; } .navigation ul ul { z-index: 1; } .navigation ul ul li { width: 100%; } .navigation ul ul li a { background: #001F3F; color: #fff; } .navigation ul ul li a:hover { background: #0074D9; }
}
Responsive Menu I - Script Codes JS Codes
$(function() { $('.navigation h2') .click(function() { $('.navigation ul').slideToggle(); });
});
Developer | Roderick Sandoval |
Username | rodericksandoval |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 3,045 Kb |
Views | 24,288 |
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 |
Font-size tests rm | 1,772 Kb |
Responsive Slide Toggle Menu | 3,584 Kb |
Responsive Menu II | 3,219 Kb |
Nav Tests - Nav2 | 3,803 Kb |
Simple Responsive Menu | 2,795 Kb |
Responsive Menu TEST | 3,539 Kb |
Pseudo elements bullets | 1,836 Kb |
Linea tras encabezado | 1,816 Kb |
FP_CATS_2 | 2,220 Kb |
Nav Tests - Nav3 | 4,171 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 |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Portfolio Landing Page | FDfranklin | 3,585 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!