Semantic-UI Popup Menu Content

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 Popup Menu Content is used to display large content or additional menu using a popup menu. The popup menu can contain a whole new menu. The menu is displayed using Semantic Popup.

Semantic UI Popup Menu Content Classes:

popup: This class is used to create a container and the popup will be displayed.

Syntax:

<div class="ui menu">
  <a class="browse item">
    Other tutorials
    <i class="dropdown icon"></i>
  </a>
  
  <div class="ui fluid popup">
      ...
  </div>
</div>

Example: In the following example, we have a popup at the front of the menu which displays an additional menu.

HTML

<!DOCTYPE html>
<html>

<head>
  <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>
  <center>
    <div class="ui container">
        <div class="ui header green">
          <h1>
            GeeksforGeeks
          </h1>
        </div>

        <strong>
          Semantic UI Popup Menu Content
        </strong>
        <br/><br/>

        <div class="ui menu">
          <a class="browse item">
             Other tutorials
            <i class="dropdown icon"></i>
          </a>

          <div class="ui fluid popup">
            <div class="ui three column relaxed
                        equal height divided grid">
              <div class="column">Data Structure</div>
            <div class="column">Algorithms</div>
            <div class="column">Web Development</div>
          </div>
        </div>

        <div class="header item">
          GeeksforGeeks
        </div>
        
        <a class="item"
           target="_blank"
           href=
"https://www.geeksforgeeks.org/data-structures">
          Data Structures
        </a>

        <a class="item" 
           target="_blank"
           href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms">
          Algorithms
        </a>
      </div>
    </div>
  </center>
  
  <script>
    $('.item').popup({})
  </script>
</body>

</html>

Output:

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

Semantic-UI Popup Menu Content

Explore