Semantic-UI Dropdown Active State
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI dropdown allows a user to select a value from a series of options. Semantic-UI Dropdown offers us 11 types of dropdown and 3 types of content Header, divider, and icon. In this article, we will learn about Active State.
Semantic-UI Dropdown Active State is used to create an active dropdown that is having its menu open.
Semantic-UI Dropdown Active State Class:
- active: This class is used to create an active dropdown that is having its menu open.
Syntax:
<div class="..active..."> Dropdown <i class="dropdown icon"></i> <div class="menu"> ... </div> </div>
Note: An active state will only automatically open a UI simple dropdown. For activating a normal dropdown use “$(‘.ui.dropdown’).dropdown(‘show’)”.
Example 1: The below example illustrates the Semantic-UI Dropdown Active State.
HTML
<!DOCTYPE html><html> <head> <title>Semantic-UI Dropdown Active State</title> <link href= rel="stylesheet"/> <script src= </script> <script src= </script></head> <body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Active State</h3> <div class="ui simple active dropdown"> Company <i class="dropdown icon"></i> <div class="menu"> <div class="item">GFG</div> <div class="item">gfg</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center></body> </html> |
Output:
Semantic-UI Dropdown Active State
Example 2: The below example illustrates the Semantic-UI Dropdown Active State:
HTML
<!DOCTYPE html><html> <head> <title>Semantic-UI Dropdown Active State</title> <link href= rel="stylesheet"/> <script src= </script> <script src= </script></head> <body> <center> <div class="ui container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Semantic-UI Dropdown Active State</h3> <div class="ui simple active dropdown"> Options <i class="dropdown icon"></i> <div class="menu"> <div class="item">Option 1</div> <div class="item">Option 2</div> <div class="item">Option 3</div> <div class="item">Option 4</div> </div> </div> </div> <script> $('.ui.dropdown').dropdown(); </script> </center></body> </html> |
Output:
Semantic-UI Dropdown Active State
Reference: https://semantic-ui.com/modules/dropdown.html#active
Please Login to comment...