当前位置：网站首页>Drop down menu dropdown yyds dry inventory of semantic UI

Drop down menu dropdown yyds dry inventory of semantic UI

2022-06-12 03:28:00 【Liangyunliang】

First step ： Create project

add to JQuery and Semantic UI package 、 establish dropdown.html page ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ Insert a picture

The second step ：dropdown.html page

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> piecewise </title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
        
    </body>
</html>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

The simplest drop-down menu ： Unwanted JavaScript Can be pulled down

<H2 id="h0"> The simplest drop-down menu ： Unwanted JavaScript Can be pulled down </H2>
<div class="ui simple dropdown">
     Course 
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ Insert a picture _02

Normal drop down menu

<h2 id="h1"> Normal drop down menu </h2>
<div class="ui dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.

This menu and the following menus need the help of JavaScript The code can be displayed ：

<script type="text/javascript">
    $(".ui.dropdown").dropdown({
        on:'hover' ,// Mouse hover display , The default value is click
        transition:'swing right', // Animate 
        allowAdditions:true // Allow adding new menu items 
    });
</script>

     1.
2.
3.
4.
5.
6.
7.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_html_03

Drop down menu that can be selected

<h2 id="h2"> Drop down menu that can be selected </h2>
<div class="ui selection dropdown">
    <div class="default text"> Course </div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _04

Other drop-down menus

<h2 id="h3"> Other drop-down menus </h2>
<div class="ui floating selection dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>
<div class="ui pointing selection dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>
<div class="ui left pointing selection dropdown">
     Course  <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item"> Chinese language and literature </div>
        <div class="item"> English </div>
        <div class="item"> mathematics </div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _05

Text box drop-down menu that can be selected ： The drop-down menu automatically sets the value of the hidden field

<h2 id="h4"> Text box drop-down menu that can be selected ： The drop-down menu automatically sets the value of the hidden field </h2>
<div class="ui selection dropdown">
    <input type="hidden" name="course">
    <div class="default text"> Course </div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="11"> Chinese language and literature </div>
        <div class="item" data-value="22"> English </div>
        <div class="item" data-value="33"> mathematics </div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _08
You can use the browser's console to view the values of hidden fields ：

Drop down menus that can be searched

<h2 id="h5"> Drop down menus that can be searched </h2>
<div class="ui search selection dropdown">
    <div class="default text"> Course </div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_html_10

Icon button pull-down menu with label

<h2 id="h6"> Icon button pull-down menu with label </h2>
<div class="ui dropdown labeled icon button">
    <i class="dropdown icon"></i>
    <div class="text"> Course </div>
    <div class="menu">
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

effect ：
Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ Insert a picture _11

Icon button pull-down menu with label

<h2 id="h7"> Icon button pull-down menu with label </h2>
<div class="ui dropdown labeled icon button">
    <i class="dropdown icon"></i>
    <div class="text"> Course </div>
    <div class="menu">
        <div class="ui icon search input">
            <i class="search icon"></i>
            <input type="text" placeholder=" Search for ">
        </div>
        <div class="item">Java</div>
        <div class="item">JavaScript</div>
        <div class="item">Python</div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

Semantic UI And The drop-down menu dropdown #yyds Dry inventory #_ The drop-down menu _12

Multi choice drop-down menu

 <label for="language"> Country </label>
    <div id="language" class="ui selection multiple search dropdown">
    <input type="hidden" name="lang">
    <i class="dropdown icon"></i>
    <div class="default text"> Please choose a language </div>
    <div class="menu">
        <div class="item" data-value="2">JavaScript</div>
        <div class="item" data-value="1">Java</div>
        <div class="item" data-value="2">Python</div>
        <div class="item" data-value="2">Cshap</div>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.