Semantic UI 之侧边栏 sidebar

最新推荐文章于 2021-07-08 15:33:19 发布

梁云亮

最新推荐文章于 2021-07-08 15:33:19 发布

阅读量1.5k

点赞数 1

分类专栏： # Semantic UI 文章标签： Semantic UI 边栏 sidebar 侧边栏

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107918978

版权

Semantic UI 专栏收录该内容

36 篇文章

订阅专栏

页面代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮</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>
        <div class="ui tiny thin sidebar inverted vertical menu">
            <div class="item">
                <h4 class="ui blue header">XXXX管理系统</h4>
            </div>
            <div class="ui inverted transparent icon input">
                <i class="search icon"></i>
                <input type="text" placeholder="搜索……">
            </div>
            <div class="item">
                <div class="menu">
                    <a href="#" class="item">用户管理</a>
                    <a href="#" class="item">博客管理</a>
                    <a href="#" class="item">好友管理</a>
                    <a href="#" class="item">类别管理</a>
                </div>
            </div>
            <div class="item">个人信息</div>
        </div>
        <div class="ui labeled icon button">
            <i class="sidebar icon"></i>菜单
        </div>
        <img src="imgs/lyl.jpg" alt="" class="ui image">
        <script>
            $(".ui.button").click(function () {
                $(".ui.sidebar")
                    .sidebar({
                        transition:'slide out' //默认uncover，可以取值push\overlay\slide along\slide out\scale down
                    })
                    .sidebar("toggle");
            });
        </script>
    </body>
</html>