Semantic-UI Menu Hover State

Last Updated : 29 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar, and dropdowns. Semantic UI Menu Hover State provides a hover animation on the links. Items with links or class name links are hoverable.

Semantic UI Menu Hover State Classes:

a: Elements with a tag have the hover state.
link: Elements with this class the hover state.

Syntax: Make the elements as a links or link class as follows:

<div class="ui compact menu">
    <a class="item" href="#"> ... </a>
    <div class="link item"> ... </div>
</div>

Example: In the following example, we have some links with the hover state and the last item does not have the hover state.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
  </head>

  <body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1>GeeksforGeeks</h1>
        </div>
        <strong>Semantic UI Menu Hover State</strong>
        <br />
        <br />
      </center>

      <div class="ui compact menu">
        <div class="header item">
          GeeksforGeeks
        </div>
        <a
          class="item"
          href="https://www.geeksforgeeks.org/data-structures"
          target="_blank"
        >
          Data Structures
        </a>
        <a
          class="item"
          href="https://www.geeksforgeeks.org/fundamentals-of-algorithms"
          target="_blank"
        >
          Algorithms
        </a>
        <div class="link item">
          Machine Learning
        </div>
        <div class="item">
          Java
        </div>
      </div>
    </div>
  </body>
</html>

Output

Reference: https://semantic-ui.com/collections/menu.html#hover

Semantic-UI Header States

manavsarkar07

Improve

Article Tags :

Semantic-UI Menu Hover State

Similar Reads

Thank You!

What kind of Experience do you want to share?