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 > w3wiki </ 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" > w3wiki </ 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:
Reference: https://semantic-ui.com/collections/menu.html#popup-menu