A navigation menu helps users move around a website efficiently, just like a GPS but without the annoying "Recalculating..." voice. In HTML, menus are typically created using <nav> and <ul> (unordered list) elements.
Basic Navigation Menu Structure
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Explanation
<nav>is a semantic element for navigation.<ul>holds the menu items.<li>represents each menu item.<a>links to different pages (or to nowhere, if you forgot to create them yet).
Styling the Menu with CSS
<style>
nav ul {
list-style: none;
padding: 0;
display: flex;
background-color: #333;
}
nav li {
padding: 10px 20px;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
</style>
Fun Fact
Before <nav>, people used <div> for menus, which wasn’t ideal for accessibility... or sanity.
Responsive Navigation Menu (Dropdown)
<style>
.menu {
display: none;
background-color: #333;
position: absolute;
}
.menu-btn:hover + .menu {
display: block;
}
</style>
<button class="menu-btn">☰ Menu</button>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
Warning
Adding too many dropdowns might turn your site into a labyrinth. Users will get lost and might never return!
Conclusion
A well-designed navigation menu improves user experience and keeps visitors engaged. Use semantic HTML and CSS for best results! And remember, if your menu is harder to navigate than a government website, you’re doing it wrong.
0 Comments