CSS menu styling

Styling menus in CSS

One of the most common elements on any website is the navigation menu. It is through it that users can move between pages and find their way around the content offered. Therefore, it is important that the menu is well structured and styled appropriately.

HTML menu structure

Before you start styling your menu in CSS, it's important to understand the HTML structure it should have. The menu is usually represented by an unordered list (ul) that contains a series of menu items (li). Each menu item can contain a link (a) that takes the user to the corresponding page.

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

Basic menu styling

To start styling the menu, we can define some basic properties for the elements that compose it. For example, we can define that the list (ul) must have a fixed width and that each menu item (li) must be displayed as a block and have a margin on the right.

  
    .menu {
      width: 600px;
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }
    
    .menu li {
      display: inline-block;
      margin-right: 20px;
    }
    
    .menu li a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }
  

With these settings, the menu will already have a more organized and readable appearance. Each menu item will be displayed on a separate line and will have a margin on the right to separate it from the others. The link within each menu item will have a default appearance, with black text and no underlining.

Advanced menu styling

To make the menu even more attractive and functional, we can add some advanced CSS properties. For example, we can define that the current menu item (that is, the page the user is on) must have a background color different from the others. We can also define that the menu must be responsive, that is, that it adapts to different screen sizes.

  
    .menu li.current-menu-item a {
      background-color: #333;
      color: #fff;
    }
    
    @media(max-width: 600px) {
      .menu {
        width: 100%;
      }
      
      .menu li {
        display: block;
        margin: 0;
      }
    }
  

With these settings, the current menu item will have a different background color than the others, which helps the user to identify which page he is on. In addition, the menu will be responsive, that is, it will adapt to different screen sizes. When the screen width is less than 600 pixels, the menu will be displayed vertically, with each menu item on a separate line.

Conclusion

Styling a menu in CSS may seem like a simple task, but it is important to keep in mind that the menu is a crucial element for user navigation on a website. Therefore, it is important to think carefully and strategically about its structure and appearance. With the basic and advanced properties presented in this text, it is possible to create a functional and attractive menu for any website.

Next page of the Free Ebook:

19Footer Styling in CSS

2 minutes