Semantic-UI Menu Hover State
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 Menu Hover State provides a hover animation on the links. Items with links or class name links are hoverable.
Semantic UI Menu Hover State Classes:
- a: Elements with a tag have the hover state.
- link: Elements with this class the hover state.
Syntax: Make the elements as a links or link class as follows:
<div class="ui compact menu"> <a class="item" href="#"> ... </a> <div class="link item"> ... </div> </div>
Example: In the following example, we have some links with the hover state and the last item does not have the hover state.
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 = "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 > < div class = "ui container" > < center > < div class = "ui header green" > < h1 >w3wiki</ h1 > </ div > < strong >Semantic UI Menu Hover State</ strong > < br /> < br /> </ center > < div class = "ui compact menu" > < div class = "header item" > w3wiki </ div > < a class = "item" target = "_blank" > Data Structures </ a > < a class = "item" target = "_blank" > Algorithms </ a > < div class = "link item" > Machine Learning </ div > < div class = "item" > Java </ div > </ div > </ div > </ body > </ html > |
Output
Reference: https://semantic-ui.com/collections/menu.html#hover
Contact Us