semantics ui complete responsive menu

Semantic UI Complete Responsive Menu

As a web developer, I have come across the need to create responsive menus for websites many times. One of the best ways to create a responsive menu is by using Semantic UI.

What is Semantic UI?

Semantic UI is a popular front-end development framework that provides pre-designed HTML and CSS components. It allows developers to create responsive, mobile-first user interfaces with ease.

How to create a complete responsive menu using Semantic UI?

First, we need to include the Semantic UI CSS and JS files in our HTML document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

Next, we can create the menu using Semantic UI's Menu component:

<div class="ui stackable menu">
  <a class="item" href="#">Home</a>
  <a class="item" href="#">About</a>
  <a class="item" href="#">Services</a>
  <a class="item" href="#">Contact</a>
  <div class="right menu">
    <a class="ui item" href="#">Login</a>
    <a class="ui primary button" href="#">Sign Up</a>
  </div>
</div>

In the above code, we have used the stackable class to make the menu stack vertically on small screens. The right menu class is used to align the login and sign up buttons to the right of the menu.

We can also make the menu more interactive by adding dropdowns and submenus:

<div class="ui stackable menu">
  <a class="item" href="#">Home</a>
  <div class="ui simple dropdown item">
    <span>Products</span>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item" href="#">Product 1</a>
      <a class="item" href="#">Product 2</a>
      <a class="item" href="#">Product 3</a>
    </div>
  </div>
  <div class="ui simple dropdown item">
    <span>Services</span>
    <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item" href="#">Service 1</a>
      <a class="item" href="#">Service 2</a>
      <a class="item" href="#">Service 3</a>
    </div>
  </div>
  <a class="item" href="#">Contact</a>
  <div class="right menu">
    <a class="ui item" href="#">Login</a>
    <a class="ui primary button" href="#">Sign Up</a>
  </div>
</div>

In the above code, we have used the simple dropdown class to create dropdowns for the Products and Services menu items. The menu class is used to define the items in the dropdown menus.

Conclusion

Semantic UI provides an easy and efficient way to create responsive menus for websites. By using the pre-designed HTML and CSS components, developers can create menus that are both functional and visually appealing. With the ability to add dropdowns and submenus, Semantic UI allows for a fully customizable and interactive user experience.