Skip to content
Related Articles

Related Articles

Semantic-UI Popup Menu Content

Improve Article
Save Article
  • Last Updated : 11 Mar, 2022
Improve Article
Save Article

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=
  <script src=
  </script>
  <script src=
  </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=
          Data Structures
        </a>
  
        <a class="item" 
           target="_blank"
           href=
          Algorithms
        </a>
      </div>
    </div>
  </center>
    
  <script>
    $('.item').popup({})
  </script>
</body>
  
</html>


Output:

Semantic-UI Popup Menu Content

Semantic-UI Popup Menu Content

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!