Semantic UI 之 侧边栏 sidebar
页面代码
<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>
效果
默认页面：
单击菜单按钮：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！