Skip to content
Related Articles

Related Articles

Semantic-UI Menu Hover State

View Discussion
Improve Article
Save Article
  • 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=
    />
    <script src=
    <script src=
</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"
          target="_blank"
        >
          Data Structures
        </a>
        <a
          class="item"
          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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!