Semantic-UI Sub 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 Sub Menu Content can contain another menu or nested menu inside the primary menu. The sub-menu can contain other extra links grouped under a category.
Semantic UI Sub Menu Content Classes:
- dropdown: A container with this class can contain a dropdown menu inside a given menu.
Syntax: Create a container with a dropdown class and place it inside a menu to create a sub-menu as follows:
<div class="ui menu">
...
<div class="ui dropdown item">
...
</div>
</div>
Example: In the following example, we have a submenu containing the programming languages as other links.
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 Sub Menu Content</strong> <br /> <br /> </center> <div class="ui compact menu"> <div class="header item"> GeeksforGeeks </div> <a class="item" href= Data Structures </a> <a class="item" href= Algorithms </a> <a class="item" href= Machine Learning </a> <div class="ui simple dropdown item"> Programming Languages <i class="dropdown icon"></i> <div class="menu"> <a class="item"> Python </a> <a class="item"> C++ </a> <a class="item"> Java </a> </div> </div> </div> </div> </body> </html> |
Output
Reference: https://semantic-ui.com/collections/menu.html#sub-menu
Please Login to comment...