14、Semantic-UI之菜单样式

1|014.1 基础菜单样式

  在Semantic-UI中使用class="ui menu"。

1|1示例：定义基础菜单样式

 
<div class="ui menu">
    <div class="item">
        <a href="">首页</a>
    </div>
    <div class="item">
        <a href="">今日热点</a>
    </div>
    <div class="item">
        <a href="">免责申明</a>
    </div>
</div>

1|2示例：定义右移动导航

 
<div class="ui container">
    <div class="ui menu">
        <div class="item">
            <a href="">首页</a>
        </div>
        <div class="item">
            <a href="">今日热点</a>
        </div>
        <div class="item">
            <a href="">免责申明</a>
        </div>
        <div class="right item">
            <a href="">注册</a>
        </div>
        <div class="item">
            <a href="">登陆</a>
        </div>
    </div>
</div>

1|3示例：在菜单中加入输入框

 
<div class="ui container">
    <div class="ui menu">
        <div class="item">
            <a href="">首页</a>
        </div>
        <div class="item">
            <a href="">今日热点</a>
        </div>
        <div class="item">
            <a href="">免责申明</a>
        </div>
        <div class="right menu">
            <div class="ui transparent icon input">
                <input type="text" placeholder="搜索...">
                <i class="search link icon"></i>
            </div>
        </div>
        <div class="right item">
            <a href="">注册</a>
        </div>
        <div class="item">
            <a href="">登陆</a>
        </div>
    </div>
</div>

2|014.2 垂直菜单样式

  在网页中，一般后台界面使用垂直菜单比较多，但是这种菜单的定义比较简单。

2|1示例：定义垂直菜单

 
<div class="ui container">
    <div class="ui vertical menu">
        <div class="item">
            <a href="">新建</a>
        </div>
        <div class="item">
            <a href="">编辑</a>
        </div>
        <div class="item">
            <a href="">修改</a>
        </div>
        <div class="item">
            <a href="">删除</a>
        </div>
    </div>
</div>

2|2示例：在菜单前面加上图标样式，同时为图标设置颜色

 
<div class="ui container">
    <div class="ui vertical menu">
        <div class="item">
            <a href="">
                <i class="file green icon"></i>
                新建
            </a>
        </div>
        <div class="item">
            <a href="">
                <i class="edit blue icon"></i>
                编辑
            </a>
        </div>
        <div class="item">
            <a href="">
                <i class="trash alternate red icon"></i>
                删除
            </a>
        </div>
    </div>
</div>

3|014.3 下拉菜单样式

  在Semantic-UI中定义下拉菜单的样式比较多，比如在div中定义，select中定义等。

3|1示例：定义基础下拉菜单

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".dropdown").dropdown();
        })
    </script>
</head>
<body>
    <div class="ui container">
        <div class="ui dropdown">
            <div class="text">课程</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">JavaWeb开发</div>
                <div class="item">Web前端开发</div>
                <div class="item">JavaSE开发</div>
            </div>
        </div>
    </div>
</body>
</html>

3|2示例：使用select来定义下拉菜单

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".ui.dropdown").dropdown();
        })
    </script>
</head>
<body>
    <div class="ui container">
        <select name="" id="" class="ui dropdown">
            <option value="">性别</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>
</body>
</html>

4|014.4 定义二级菜单样式

  在网页头部一本都会采用二级菜单的操作，用多级菜单按钮供用户使用。

4|1示例：定义二级菜单

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".ui.dropdown").dropdown();
        })
    </script>
</head>
<body style="padding: 20px;">
<div class="ui container">
    <div class="ui menu">
        <div class="item">
            <i class="home icon"></i>
            <a href="">首页</a>
        </div>
        <div class="item">
            <div class="ui dropdown">
                <i class="book icon"></i>
                <div class="text">课程</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a href="" class="item">JavaWeb课程</a>
                    <a href="" class="item">JAVASE课程</a>
                    <a href="" class="item">Struts2.x课程</a>
                </div>
            </div>
        </div>
        <div class="item">
            <i class="paperclip icon"></i>
            <a href="">关于</a>
        </div>
    </div>
</div>
</body>
</html>

__EOF__

本文作者：StaryJie
本文链接：https://www.cnblogs.com/jie-fang/p/10279567.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   StaryJie  阅读(2732)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae