How to Create a Simple Responsive Navigation Menu Using CSS

by

Welcome to our CSS guide! Today, we’ll explore how Cascading Style Sheets (CSS) can level up your web design skills. We’ll start with a simple example: creating a responsive navigation menu using HTML and CSS. Let’s dive in together!

HTML Design:


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
<style>STYLE GOES HERE </style>
</head>
<body>

<!-- Navigation Menu -->
<nav class="menu">
  <ul>
    <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>
</nav>

</body>
</html>
Explanation

Our HTML code consists of a basic navigation menu created using an unordered list (<ul>) and list items (<li>). Each item has a link (<a>) for navigation.

CSS Styling

/* Navigation Menu Styles */
.menu {
  background-color: #333;
  padding: 10px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  display: inline-block;
}

.menu ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
}

/* Media Query for Responsive Design */
@media screen and (max-width: 600px) {
  .menu ul li {
    display: block;
    text-align: center;
  }
}

Simple Explanation for CSS

  1. Navigation Menu Styles:
  • .menu: This class styles the navigation menu container, giving it a dark gray background and adding some space around it.
  • .menu ul: Styles the unordered list inside the menu, removing any bullets and extra space.
  • .menu ul li: Sets each list item to appear next to each other horizontally.
  • .menu ul li a: Styles the links inside the list items, making them white with no underlines and adding some padding around them for easier clicking.
  1. Media Query for Responsive Design:
  • @media screen and (max-width: 600px): This adjusts the menu for smaller screens, like smartphones.
  • .menu ul li: Within this query, list items are stacked vertically for better mobile viewing, and the text is centered for clarity.

Understanding these basics of CSS will help you create better-looking and more user-friendly websites. Keep practicing, and soon you’ll be a CSS pro!

Leave a Comment