侧边栏菜单效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> .fa-2x { font-size: 2em; } .fa { position: relative; display: table-cell; width: 60px; height: 36px; text-align: center; vertical-align: middle; font-size: 20px; } .main-menu:hover,nav.main-menu.expanded { width: 250px; overflow: visible; } .main-menu { background: #212121; border-right: 1px solid #e5e5e5; position: absolute; top: 0; bottom: 0; height: 100%; left: 0; width: 60px; overflow: hidden; -webkit-transition: width .05s linear; transition: width .05s linear; -webkit-transform: translateZ(0) scale(1,1); z-index: 1000; } .main-menu>ul { margin: 7px 0; } .main-menu li { position: relative; display: block; width: 250px; } .main-menu li>a { position: relative; display: table; border-collapse: collapse; border-spacing: 0; color: #999; font-family: arial; font-size: 14px; text-decoration: none; -webkit-transform: translateZ(0) scale(1,1); -webkit-transition: all .1s linear; transition: all .1s linear; } .main-menu .nav-icon { position: relative; display: table-cell; width: 60px; height: 36px; text-align: center; vertical-align: middle; font-size: 18px; } .main-menu .nav-text { position: relative; display: table-cell; vertical-align: middle; width: 190px; } .main-menu>ul.logout { position: absolute; left: 0; bottom: 0; } .no-touch .scrollable.hover { overflow-y: hidden; } .no-touch .scrollable.hover:hover { overflow-y: auto; overflow: visible; } a:hover,a:focus { text-decoration: none; } nav { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } nav ul,nav li { outline: 0; margin: 0; padding: 0; } .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { color: #fff; background-color: #5fa2db; } .area { float: left; background: #e2e2e2; width: 100%; height: 100%; } </style> </head> <body translate="no"> <html> <head> </head> <body> <div class="area"></div> <nav class="main-menu"> <ul> <li> <a href=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0