How to Create a Menu in HTML and CSS

Website menus are an essential part of any website design, and they need to be attractive and user-friendly to guide users to different pages of the website. Menus typically occupy a prominent position on the website and must be well-designed to create a great user experience. In this article, we will learn how to create a menu in HTML and CSS.

What is HTML and CSS?

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two essential web development languages used to build and style websites. HTML provides the structure and content, while CSS is used to style the website and make it visually appealing.

Creating a Simple HTML Menu

To create a menu in HTML, you need to add a navigation section to your website code. Here is a simple HTML navigation menu example:

<nav>
    <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>

In this code, we have used the <nav> tag to define the navigation section of the website. Inside the <nav> tag, we have created an unordered list <ul> of menu items using the <li> tag. Each menu item is linked to a specific page of the website using the <a> tag.

Styling the Menu with CSS

After creating the HTML menu, we can make it visually appealing with CSS. Here is an example CSS code to style the HTML menu:

nav {
    background-color: #333;
    height: 50px;
}

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

li {
    display: inline-block;
    padding: 0 15px;
    line-height: 50px;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color: #f2f2f2;
}

In this CSS code, we have added styles to the <nav> tag to give it a dark background color and a height of 50 pixels. We have also set the <ul> list to have no bullets or padding.

The <li> tag has been set to display inline and contain a 15-pixel padding on the left and right. We have also set the line-height to the same as the height of the <nav> tag to vertically align the menu items.

The <a> tag has been styled to have white text and no text decoration. When hovering over a link, we change the font color to light grey.

Creating a Responsive Menu

With the increasing use of mobile devices to access websites, it is essential to create a responsive menu that can adapt to different screen sizes. Here is a simple example of a responsive menu:

<nav>
    <div class="menu-icon">
        <i class="fa fa-bars"></i>
    </div>
    <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>
</nav>

We have added a menu-icon div to represent the hamburger menu icon, which is widely used on mobile devices. Inside the nav tag, we have included a menu unordered list.

Here is the CSS code to create the responsive menu:

nav {
    background-color: #333;
    height: 50px;
}

.menu-icon {
    color: #fff;
    font-size: 24px;
    line-height: 50px;
    margin: 0 10px 0 0;
    cursor: pointer;
    display: none;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu li {
    display: inline-block;
}

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

@media only screen and (max-width: 768px) {
  .menu-icon {
      display: block;
  }

  .menu {
      display: none;
      width: 100%;
  }

  .menu li {
      display: block;
      text-align: center;
      border-bottom: 1px solid #fff;

  }

  .menu li:last-child {
      border-bottom: none;
  }
}

In this CSS code, we have added a menu-icon div with some styles to position the hamburger menu icon properly. We have used Flexbox to align the menu unordered list, added left and right padding to the menu items, and centered the text.

We have also added a media query to the CSS code to hide the menu on screens smaller than 768 pixels and to display the menu-icon instead. We have also adjusted the menu layout to create a vertical menu that occupies the entire width of the screen.

Conclusion

Creating a menu in HTML and CSS can make your website more user-friendly and navigable. The key to designing a great menu is to make it simple, intuitive, and easy to use. Add some creativity with the use of colors or icons to make it stand out. We hope you find this article useful and can apply some of the things you have learned today to your website.

📕 Related articles about CSS

• The Complete Guide to CSS Padding
• Understanding CSS Position: A Comprehensive Guide
• How To Create A Menu In CSS
• CSS Fonts: A Comprehensive Guide
• CSS How to Make Background Transparent
• CSS Rounded Corners