bootstrap3实现一个左侧弹出侧边栏菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:bootstrap3实现一个左侧弹出侧边栏菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.mCustomScrollbar.min.css"> <style> body, html { font-size: 100%; padding: 0; margin: 0;} /* Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } body{ background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; } /* Header */ .header{ padding: 1em 190px 1em; letter-spacing: -1px; text-align: center; } .header h1 { color: #D5D6E2; font-weight: 600; font-size: 2em; line-height: 1; margin-bottom: 0; } .header h1 span { display: block; font-size: 60%; font-weight: 400; padding: 0.8em 0 0.5em 0; color: #c3c8cd; } .sidebar-wrapper, .sidebar-wrapper .sidebar-dropdown > a:after, .sidebar-wrapper ul li a i, .page-wrapper .page-content { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } /*----------------page-wrapper----------------*/ .page-wrapper{ height: 100vh; } /*----------------toggeled sidebar----------------*/ .page-wrapper.toggled .sidebar-wrapper{ left:0px; } @media screen and (min-width: 768px) { .page-wrapper.toggled .page-content{ padding-left: 300px; } } .page-wrapper.toggled #toggle-sidebar{ position: absolute; color: #cacaca; } /*----------------sidebar-wrapper----------------*/ .sidebar-wrapper{ width: 300px; background: #1c232f; height: 100%; max-height: 100%; position: fixed; top: 0; left: -300px; } .sidebar-wrapper ul li:hover a i, .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before, .sidebar-wrapper .sidebar-search input.search-menu:focus + span{ color: #0086fd; } .sidebar-wrapper ul{ list-style-type: none; padding: 0; margin: 0; } .sidebar-wrapper a{ text-decoration: none; } /*----------------sidebar-content----------------*/ .sidebar-content{ max-height: calc(100% - 30px); height: calc(100% - 30px); overflow-y: scroll; position: relative; } .sidebar-content.desktop{ overflow-y: hidden; } /*--------------------sidebar-brand----------------------*/ .sidebar-wrapper .sidebar-brand { padding: 15px 20px; text-align: center; border-bottom: 1px solid #10151d; } .sidebar-wrapper .sidebar-brand > a{ color: #fff; text-transform: uppercase; font-weight: bold; } /*--------------------sidebar-header----------------------*/ .sidebar-wrapper .sidebar-header{ padding: 20px; overflow: hidden; border-top: 1px solid #202a3c; border-bottom: 1px solid #10151d; } .sidebar-wrapper .sidebar-header .user-pic{ float: left; width: 60px; padding: 2px; border: 1px solid #585858; border-radius: 8px; margin-right:15px; } .sidebar-wrapper .sidebar-header .user-info{ float: left; color: #ccc; } .sidebar-wrapper .sidebar-header .user-info span{ display: block; } .sidebar-wrapper .sidebar-header .user-info .user-role{ font-size: 12px; color: #929292; } .sidebar-wrapper .sidebar-header .user-info .user-status{ display: inline-block; } /*-----------------------sidebar-search------------------------*/ .sidebar-wrapper .sidebar-search{ border-top: 1px solid #222b35; border-bottom: 1px solid #10151d; } .sidebar-wrapper .sidebar-search > div{ padding: 10px 20px; } .sidebar-wrapper .sidebar-search input.search-menu, .sidebar-wrapper .sidebar-search .input-group-addon{ background: #0c1119; box-shadow: none; color: #9c9c9c; border-color: #3c485d; transition: color .5s } /*----------------------sidebar-menu-------------------------*/ .sidebar-wrapper .sidebar-menu{ border-top: 1px solid #222b35; padding-bottom: 10px; } .sidebar-wrapper .sidebar-menu .header-menu span{ font-size: 14px; text-transform: uppercase; font-weight: bold; color: #b9b9b9; padding: 10px 20px; display: inline-block; } .sidebar-wrapper .sidebar-menu ul li a{ display: inline-block; width: 100%; color: #9c9c9c; text-decoration: none; transition:color .3s; position: relative; padding: 5px 30px 5px 20px; } .sidebar-wrapper .sidebar-menu ul li:hover > a{ color: #ccc; } .sidebar-wrapper .sidebar-menu ul li a i{ margin-right: 10px; font-size: 14px; background: #0c1119; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown div { background: #0c1119; border-bottom: 1px solid #222b35; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after { content: "\f105"; font-family: FontAwesome; font-weight: 400; font-style: normal; display: inline-block; text-align: center; text-decoration: none; background: 0 0; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 15px; top: 10px; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul { padding: 5px 0; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li { padding-left: 25px; font-size: 13px; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before { content: "\f10c"; font-family: FontAwesome; font-weight: 400; font-style: normal; display: inline-block; text-align: center; text-decoration: none; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right:10px; font-size: 10px; } .sidebar-wrapper .sidebar-menu ul li a span.label, .sidebar-wrapper .sidebar-menu ul li a span.badge{ float: right; margin-top: 7px; margin-left:5px; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge, .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label{ float: right; margin-top: 0px; } .sidebar-wrapper .sidebar-menu .badge{ background: #384558; } .sidebar-wrapper .sidebar-menu .sidebar-submenu{ display: none; } .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after{ transform:rotate(90deg); right: 17px; } /*--------------------------side-footer------------------------------*/ .sidebar-footer{ position: absolute; width: 100%; bottom: 0; display: flex; background: #1c232f; box-shadow: 0px -1px 5px #0c1119; border-top: 1px solid #222b35; } .sidebar-footer > a { flex-grow: 1; text-align: center; border-left: 1px solid #222b35; border-right: 1px solid #10151d; height: 30px; line-height: 30px; color:#9c9c9c; position: relative; } .sidebar-footer > a:first-child { border-left: none; } .sidebar-footer > a:last-child { border-right: none; } .sidebar-footer > a:hover{ color: #ccc; } .sidebar-footer > a .notification { position: absolute; top: 0; } /*--------------------------page-content-----------------------------*/ .page-wrapper .page-content{ display: inline-block; width: 100%; padding-left: 0px; } .page-wrapper .page-content > div { padding: 20px 40px; } .page-wrapper .page-content { overflow-x: hidden; } /*---------------------toggle-sidebar button-------------------------*/ #toggle-sidebar{ position: fixed; top: 13px; left: 25px; /* color: #0f151f; */ color: #D5D6E2; font-size: 18px; } /*---------------- Scroll bar style --------------- */ .mCSB_scrollTools{ width: 6px; } .mCSB_inside>.mCSB_container{ margin-right: 0px; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0