html+css3+jquery旅游网站左侧分类导航

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代艨位雅剖码。<div class="product_sort fl"媪青怍牙><div class="hd">旅游产品导航</div><div class="bd"> <div class="item"> <div class="title one"><a href="#"><i></i>出境游</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div> <div class="item"> <div class="title two"><a href="#"><i></i>国内游</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div> <div class="item"> <div class="title three"><a href="#"><i></i>周边游</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div> <div class="item"> <div class="title four"><a href="#"><i></i>邮轮</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div></div>

4、书写css代码。html, body, div, h1, h2, h3, h4, h5, h6, ul荑樊综鲶, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, textarea, hr, img, label, span, select, strong, b { margin: 0px; padding: 0px; }fieldset, img, abbr, acronym { border: 0; }address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }q:before, q:after { content: ''; }h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }caption, th, td { text-align: left; font-weight: normal; }a, img, button { border: none; text-decoration: none; }a, button { text-decoration: none; }a, img { border: none; outline: none; }a { color: #333; text-decoration: none; outline: none; }ul, ol { list-style: none; }table { word-break: break-all; word-wrap: break-word; }body { font-family: 宋体, Arial, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif; font-size: 12px; font-weight: normal; color: #000; width: 100%; background: #fff; }.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }.clearfix { display: inline-table; }* html .clearfix { height: 1%; }.clearfix { display: block; }.ma { margin-left: auto; margin-right: auto; }.w980 { width: 980px; }.mt10 { margin-top: 10px; }.product_sort { margin: 20px; width: 226px; height: 644px; background: #fff url(../images/img_226x95.jpg) no-repeat left bottom; border: solid 1px #3299fd; position: relative; z-index: 90; }.product_sort .hd { width: 226px; background: url(../images/img_226x40.jpg) no-repeat; height: 40px; line-height: 40px; text-indent: 15px; font-size: 15px; font-weight: bold; font-family: "微软雅黑"; color: #fff; }.product_sort .bd { padding-bottom: 10px; }.product_sort .bd .item { border-bottom: solid 1px #3299fd; height: 60px; position: relative; }.product_sort .bd .item .title { width: 226px; text-indent: 43px; height: 30px; overflow: hidden; line-height: 42px; font-size: 14px; font-weight: bold; color: #292929; }.product_sort .bd .item .title a { color: #3299fd; position: relative; }.product_sort .bd .item .title a i { position: absolute; background: url(../images/icon_nav.jpg) no-repeat; }.product_sort .bd .item .one a i { width: 19px; height: 19px; background-position: 0 0; left: -25px; top: -3px; }.product_sort .bd .item .two a i { width: 22px; height: 20px; background-position: 0 -51px; left: -28px; top: -5px; }.product_sort .bd .item .three a i { width: 31px; height: 23px; background-position: 0 -101px; left: -34px; top: -7px; }

5、书写并添加js代码。<script src="js/jquery.js"></script><script>$(".product_sort .bd .item").hover(function(){ $(this).addClass("layer");},function(){ $(this).removeClass("layer");});</script>

6、代码整体结构。

7、查看效果。