Menu
How do I make an menu?
What is a menu? How do you make a menu? This script and codes were developed by Cory Schadt on 19 October 2022, Wednesday.
Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="menu-main-menu"> <li><a href="#">Linky</a></li> <li><a href="#">Another</a> <ul> <li><a href="#">More Link</a></li> <li><a href="#">Bored Link</a></li> <li><a href="#">Last Link</a></li> </ul> </li> <li><a href="#">More</a></li> <li><a href="#">Linker</a> <ul> <li><a href="#">More Link</a></li> <li><a href="#">Bored Link</a></li> <li><a href="#">Last Link</a></li> </ul> </li> <li><a href="#">More Link</a> <ul> <li><a href="#">More Link</a></li> <li><a href="#">Bored Link</a></li> <li><a href="#">Last Link</a></li> </ul> </li> <li><a href="#">Bored Link</a> <ul> <li><a href="#">More Link</a></li> <li><a href="#">Bored Link</a></li> <li><a href="#">Last Link</a></li> </ul> </li> <li><a href="#">Last Link</a></li>
</ul>
</body>
</html>
Menu - Script Codes CSS Codes
ul#menu-main-menu { margin: 0; padding: 0; position: relative; background: red;
}
ul#menu-main-menu > li > a { display: block; padding: 5px 20px; display: block; transition: all 0.2s; text-decoration: none; color: #666;
}
ul#menu-main-menu > li > a:hover,
ul#menu-main-menu > li:hover { background: #ccc; text-decoration: none;
}
ul#menu-main-menu > li { float: left; margin: 0 2px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 16px; text-transform: uppercase;
}
ul#menu-main-menu > li.current-page-ancestor > a,
ul#menu-main-menu > li.current-menu-item > a { background: rgba(0, 0, 0, 0.15);
}
#no-banner ul#menu-main-menu > li.current-page-ancestor > a,
#has-banner.scroll ul#menu-main-menu > li.current-menu-item > a { background: rgba(0, 0, 0, 0.025);
}
ul#menu-main-menu > li ul { margin: 0; padding: 0; position: absolute; visibility:hidden; z-index: 5; opacity:0; transition: all 0.2s; background-color: red; padding: 0 0 14px 0; margin: 0; width: 210px; box-shadow: 4px 4px 7px 0px rgba(129, 176, 165, 0.27);
}
ul#menu-main-menu ul li a:hover,
ul#menu-main-menu ul li:hover { background: transparent; color: #fff; text-decoration: none;
}
ul#menu-main-menu > li ul li { display: block; float: none; line-height: 16px; margin: 0; padding: 0; text-transform: none; font-style: italic;
}
ul#menu-main-menu > li ul li:after { content: "-"; display: block; padding: 0 20px;
}
ul#menu-main-menu > li ul li:hover:after { color: blue;
}
ul#menu-main-menu > li ul a { color: #000; display: block; min-height: 0; padding: 10px 20px; color: #464646; text-decoration: none;
}
ul#menu-main-menu > li ul li.current-menu-item a { color: #fff;
}
ul#menu-main-menu > li:hover ul { visibility:visible; opacity:1;
}
ul#menu-main-menu a { color: #f7f7f7; padding: 0; display: block;
}
#menu { cursor: pointer; padding: 10px 20px 16px 0px; float: right; margin: 40px 5% 0 0; display: none;
}
#menu span, #menu span:before, #menu span:after { cursor: pointer; height: 2px; width: 25px; background: #FFF; position: absolute; display: block; content: '';
}
#menu span:before { top: -8px;
}
#menu span:after { bottom: -8px;
}
Developer | Cory Schadt |
Username | coryschadt |
Uploaded | October 19, 2022 |
Rating | 3 |
Size | 2,080 Kb |
Views | 22,264 |
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 |
Notifications | 5,304 Kb |
FLEXY | 1,510 Kb |
Chair Animation | 229,479 Kb |
Wordpress - archives for CPT | 1,613 Kb |
MacBook Pro | 3,136 Kb |
Jquery cycle2 youtube | 1,750 Kb |
FlexBox Mixin | 1,844 Kb |
Diamond | 3,881 Kb |
Pull TSX quote - jquery | 2,044 Kb |
Wordpress - Force publish future event | 1,403 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 |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Off Canvas | Mariamarica | 1,870 Kb |
Fading gradient button | Insprd | 1,713 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
A Pen by Bryan | Brydave | 2,286 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Minimal Menu | Achudars | 3,430 Kb |
Product item | Mymahesh11 | 2,256 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!