带下划线的导航栏，以及左侧导航栏
带下划线导航栏
上图
html
<div class="nav-bar-wrap"> <div class="nav-bar"> <img src="./img/登录注册.png" style="height: 48px;width: 48px;display: inline-block;" alt=""> <div class="nav-list"> <ul> <li class="active"> <a href=""> <span>课程</span> </a> </li> <li> <a href=""> <span>文档下载</span> </a> </li> <li> <a href=""> <span>语言评测</span> </a> </li> <li> <a href=""> <span>我的</span> </a> </li> <a href=""> <span class="sign-in">登录/注册</span> </a> </ul> </div> </div> </div>
css
* { margin: 0; padding: 0; } a { text-decoration: none; outline: 0 } .nav-bar-wrap { width: 100%; height: 64px; border-bottom: 1px solid #eee; background: #fff; } .nav-bar { min-width: 960px; width: 80%; margin: 0 auto; height: 100%; position: relative; } .nav-list { position: absolute; right: 0; top: 0; } .nav-bar ul { height: 100%; } .nav-bar li { display: inline-block; position: relative; margin: 0 22px; height: 100%; line-height: 64px; font-size: 24px; white-space: nowrap; list-style-type: none } .nav-bar li a { padding: 0 16px; display: inline-block; font-size: 20px; color: #333333; } .nav-bar li a::after { content: ''; position: absolute; bottom: -2px; width: 0; height: 2px; background-color: #99cc33; transition: .5s all linear; } .nav-bar li a:hover::after { width: 100%; } .nav-bar li a::after { left: 100%; /*选中项上一个下划线收回的方向，从左往右收线*/ } .nav-bar li a:hover::after { left: 0; /*选中项下划线出线的方向，从左往右出线*/ } .nav-bar li a:hover~.nav-bar li a::after { left: 0; /*选中项下一个下划线出线的方向，从左往右收线*/ } .nav-bar .active { border-bottom: 2px solid #99cc33; } .nav-bar li a:hover, .nav-bar .active a { color: #99cc33; } .sign-in { padding: 0 16px; color: #bdbdbd; font-size: 15px; margin-left: 22px; }
左侧导航栏，也带下划线
上图：
html
<div class="left-nav"> <ul> <li> <a class="hover" href="./myInfo.html">个人信息</a> </li> <li> <a href="./myclasses.html">我的课程</a> </li> <li> <a href="./mytests.html">我的测试</a> </li> <div id="lanPos"></div> </ul> </div>
css
@charset "utf-8"; /* CSS Document */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight:normal;} body { line-height: 1; } :focus { outline: 1; } article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } nav ul,ul,li { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; } a:hover { text-decoration: underline; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } .fl { float: left; display:inline-block;} .fr { float: right; display:inline-block;} .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */
@charset "utf-8"; /* CSS Document */ body{ font-size:12px; background:#F8F8F8; font-family:"宋体"; } .left-nav ul{ width:250px; background:#fff; position:relative; z-index:0; /* padding:60px 20px 70px; */ display: inline-block; vertical-align: top; } .left-nav ul li{ height:70px; line-height:70px; text-align:center; border-bottom:1px solid #F8F8F8; } .left-nav ul li a{ color:#666; display:block; } .left-nav ul li a:hover{ color:#99cc33; text-decoration:none; } .left-nav ul li a.hover{ color:#99cc33; } #lanPos{ width:250px; height:60px; line-height:60px; margin-top:5px; border-left:5px solid #99cc33; position:absolute; left:0; top:0; z-index:-1; transition:top .2s; } .vedio-card{ -moz-box-shadow: 0 0 5px #f6f6f6; box-shadow: 0 0 5px #f6f6f6; background: #fff; border-radius: 5px; } .my-tests-right{ margin-left:270px; }
js
$(function () { $('#lanPos').css('top', $('.left-nav .hover').offset().top-$('.left-nav').offset().top); $('.left-nav ul li').hover(function () { $('#lanPos').css('top', $(this).offset().top-$('.left-nav').offset().top); }, function () { $('#lanPos').css('top', $('.left-nav .hover').offset().top-$('.left-nav').offset().top); }) $('.left-nav ul li').click(function () { for (var i = 0; i < $('.left-nav ul li').size(); i++) { if (this == $('.left-nav ul li').get(i)) { $('.left-nav ul li').eq(i).children('a').addClass('hover'); } else { $('.left-nav ul li').eq(i).children('a').removeClass('hover'); } } }) })
