简约蓝色系导航(三级导航)
程序员文章站
2022-07-02 15:36:45
效果图 index.html index
效果图
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 导航nav --> <ul class="menu boxed clearfix"> <li><a href="#"><i class="menu-icon menu-icon-1"></i>home</a></li> <li><a href="#"><i class="menu-icon menu-icon-2"></i>tickets</a> <!-- 二级导航 --> <ul> <li><a href="#">air tickets</a></li> <li><a href="#">train tickets</a></li> <li><a href="#">ship tickets</a></li> </ul> </li> <li><a href="#"><i class="menu-icon menu-icon-3"></i>services</a> <ul> <li><a href="#">service 1</a></li> <li><a href="#">service 2</a></li> <li><a href="#">service 3</a></li> </ul> </li> <li><a href="#"><i class="menu-icon menu-icon-4"></i>reservations</a> <ul> <!-- 二级导航 --> <li><a href="#">5 stars hotel</a> <!-- 三级导航 --> <ul> <li><a href="#">5- single room</a></li> <li><a href="#">5- double room</a></li> <li><a href="#">5- triple room</a></li> </ul> </li> <li><a href="#">4 stars hotel</a> <ul> <li><a href="#">4- single room</a></li> <li><a href="#">4- double room</a></li> <li><a href="#">4- triple room</a></li> </ul> </li> <li><a href="#">3 stars hotel</a> <ul> <li><a href="#">3- single room</a></li> <li><a href="#">3- double room</a></li> <li><a href="#">3- triple room</a></li> </ul> </li> </ul> </li> <li><a href="#"><i class="menu-icon menu-icon-5"></i>restaurant</a></li> <li><a href="#"><i class="menu-icon menu-icon-6"></i>contact us</a></li> </ul> <script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script> <script src="js/jquery-ui.min.js"></script> </body> </html>
style.css
@import "http://fonts.googleapis.com/css?family=pt+sans:400,700,400italic,700italic"; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block } body { line-height:1 } ol,ul { list-style:none } blockquote,q { quotes:none } blockquote:before,blockquote:after,q:before,q:after { content:''; content:none } table { border-collapse:collapse; border-spacing:0 } html { font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:subpixel-antialiased } body { font-family:pt sans,sans-serif; font-size:13px; font-weight:400; color:#4f5d6e; position:relative } ::selection { background:#1c588f; color:#fff; text-shadow:none } a { color:#1c588f; background:0 0; text-decoration:none } a:hover,a:focus { color:#c9376e!important; text-decoration:none } a:active { background-color:transparent } input,textarea,input[type=submit]:focus,div { outline:none; font-family:pt sans,sans-serif } button,input,select,textarea { vertical-align:top; margin:0 } h1,h2,h3,h4,h5,h6 { color:#1c588f; font-weight:700; line-height:1.2em; margin-bottom:.7em } h1 { font-size:29px } h2 { font-size:25px } h3 { font-size:23px } h4 { font-size:19px } h5 { font-size:17px } h6 { font-size:14px } i { position:relative; top:0; left:0; display:inline-block; overflow:hidden; text-decoration:none; font-style:normal; background-repeat:no-repeat; margin-right:15px } .clearfix:before,.clearfix:after { display:table; content:" " } .clearfix:after { clear:both } .boxed { background:#fff; -webkit-box-shadow:5px 5px 5px rgba(0,0,0,.2); box-shadow:5px 5px 5px rgba(0,0,0,.2); margin-bottom:30px; position:relative } .boxed-blue { background:#1c588f } .boxed-dark { background:#142439 } .boxed-light { background:#e5eff6 } .boxed.red-line { border-top:4px solid #c9376e } .boxed.green-line { border-top:4px solid #9cd70e } .boxed.blue-line { border-top:4px solid #4bb4e8 } .menu { background:#398fc7; z-index:1000 } .ie8 .menu { filter:none; background:#398fc7 } .menu a:hover,.menu a.hover { color:#fff!important } .menu li { position:relative } .menu>li { float:left; width:16.666666666666664%; border-top:3px solid #4bb4e8 } .menu>li:hover,.menu>li.hover { border-top-color:#9cd70e; z-index:1 } .menu>li>a { display:block; font-size:15px; font-weight:700; color:#fff; text-align:center; text-transform:uppercase; line-height:18px; padding:15px 5px; text-shadow:0 1px 1px rgba(45,118,158,.5); border-top:2px solid #3484bd; border-left:1px solid #4b9cce; border-right:1px solid #1e86b5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .menu>li:first-child>a { border-left-color:transparent } .menu>li:last-child>a { border-right-color:transparent } .menu>li:hover>a,.menu>li.hover>a { background:#52b1dd; border:none; border-top:2px solid #4aa3d2; -webkit-box-shadow:0 2px 4px rgba(21,80,94,.75); box-shadow:0 2px 4px rgba(21,80,94,.75) } .menu-icon { display:block; width:30px; height:30px; margin:0 auto 13px; background:url(../images/menu-icons.png) 0 0 no-repeat } @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) { .menu-icon { background-image:url(../images/menu-icons-x2.png); background-size:60px auto } }.menu-icon-2 { background-position:0 -30px } .menu-icon-3 { background-position:0 -60px } .menu-icon-4 { background-position:0 -90px } .menu-icon-5 { background-position:0 -120px } .menu-icon-6 { background-position:0 -150px } .menu-icon-7 { background-position:0 -180px } .menu-icon-8 { background-position:0 -210px } .menu-icon-9 { background-position:0 -240px } .menu>li:hover>a .menu-icon,.menu>li.hover>a .menu-icon { background-position:-30px 0 } .menu>li:hover>a .menu-icon-2,.menu>li.hover>a .menu-icon-2 { background-position:-30px -30px } .menu>li:hover>a .menu-icon-3,.menu>li.hover>a .menu-icon-3 { background-position:-30px -60px } .menu>li:hover>a .menu-icon-4,.menu>li.hover>a .menu-icon-4 { background-position:-30px -90px } .menu>li:hover>a .menu-icon-5,.menu>li.hover>a .menu-icon-5 { background-position:-30px -120px } .menu>li:hover>a .menu-icon-6,.menu>li.hover>a .menu-icon-6 { background-position:-30px -150px } .menu>li:hover>a .menu-icon-7,.menu>li.hover>a .menu-icon-7 { background-position:-30px -180px } .menu>li:hover>a .menu-icon-8,.menu>li.hover>a .menu-icon-8 { background-position:-30px -210px } .menu>li:hover>a .menu-icon-9,.menu>li.hover>a .menu-icon-9 { background-position:-30px -240px } .menu ul { position:absolute; top:-9999px; left:-9999px; z-index:9499; width:100%; min-width:100px } .menu>li:hover>ul,.menu>li.hover>ul { top:93px; left:0 } .menu ul li a { display:block; border-top:1px solid transparent; border-bottom:1px solid transparent; background:#398fc7; font-size:13px; font-weight:700; color:#fff; text-align:center; text-transform:uppercase; line-height:16px; padding:20px 5px } .menu ul li:first-child>a { border-top:none } .menu ul li:last-child>a { border-bottom:none } .menu ul li:hover>a,.menu ul li.hover>a { background:#52b1dd; border-color:#408aaf } .menu ul li:hover:before,.menu ul li.hover:before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:#c9376e } .menu ul li:hover>ul,.menu ul li.hover>ul { position:absolute; top:1px; left:100%; width:101%; padding-left:1% } .menu.style2 ul { display:none } .menu.style2 { background:0 0; -webkit-box-shadow:none; box-shadow:none } .menu.style2>li { border-top:3px solid #4bb4e8; border-bottom:3px solid #4bb4e8 } .menu.style2>li:hover,.menu.style2>li.hover { border-top-color:#9cd70e; border-bottom-color:#9cd70e; z-index:1 } .menu.style2>li>a { padding:18px 5px 16px 0; border:none; border-left:1px solid #062d52; -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.08); box-shadow:inset 1px 0 0 rgba(255,255,255,.08) } .menu.style2>li:last-child>a { border-right:1px solid #062d52; box-shadow:inset 1px 0 0 rgba(255,255,255,.08),1px 0 0 rgba(255,255,255,.08); margin-right:1px } .menu.style2>li:hover>a,.menu.style2>li.hover>a { background:0 0 } .menu.style2 .menu-icon { display:inline-block; margin:0 3px 3px 0; vertical-align:middle }
jquery-ui.min.js可以去网上下载
图片素材如下
上一篇: 取得浏览者的离开时间
下一篇: Django认证系统