手记 / 三级导航作业

三级导航作业

2天前6浏览0评论

html代码

<ul class="nav">
   <li class="one" style="background-color: #620505;color:#fff;">图书</li>
   <li class="one"><a href="">教育</a><i class="fa fa-angle-right"></i>
       <ul>
           <li class="two">2019考研政治冲刺背诵笔记<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       本书是徐涛老师的诚心之作,集诸多优点于一体,可供2019年的考生在考研政治冲刺复习阶段使用。本书是黄皮书系列中的第四本书,是考生冲刺复习的利器。 短小轻薄,十分精练。 直击考点,高效复习。知识结构,全面覆盖。 *大纲内容,背诵即可,无后顾之忧
                   </p>
               </div>
           </li>
           <li class="two">2019恋练有词<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       2014年推出*版,此后历经四次修订,根据每年真题更新词汇和例句,属于为数不多的与考研真题词汇高度契合、与时俱进的词汇书,覆盖考研英语大纲词汇和超纲词汇。本书2019版新增2018年考研英语真题词汇和例句,沿用备受好评的词群识记法和按主词词频排序法,力助考生提高记词效率,更科学、更高效地学词。本书旨在成为考研人的英语词汇宝典和心灵读物,精选5500个词汇和词组,辅以真题例句解析;精选5篇励志文章,力助考生在考研之路上一直向前、坚持到底。
                   </p>
               </div>
           </li>
       </ul>
   </li>
   <li class="one"><a href="">科技</a><i class="fa fa-angle-right"></i>
       <ul>
           <li class="two">码出高效:Java开发手册<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       在《阿里巴巴Java开发手册》之后,孤尽、鸣莎不负众望地再次给大家带来了一本能刷新日常、提升意识的Java编程专业书籍,真正来自阿里集团的智慧与经验,是用血淋淋的故障换来的。为了出版本书,作者全年无休,夜以继日。在*后冲刺阶段,作者闭关数月,满背胶布,脑力激荡,字字斟酌,每幅画亲笔绘制,体现出来的毅力和意志,不得不让人钦佩!
                   </p>
               </div>
           </li>
           <li class="two">PHP从入门到精通<i class="fa fa-angle-right"></i>
               <div class="three">
                   <p>
                       明日科技,是一家专业从事软件开发、教育培训以及软件开发教育资源整合的高科技公司,其编写的教材既注重选取软件开发中的必需、常用内容,又注重内容的易学、方便以及相关知识的拓展,深受读者喜爱。其编写的图书主要有“软件开发视频大讲堂”“软件开发实战1200例”“软件工程师开发大系”等系列。多次荣获“全行业优秀畅销品种”“中国大学出版社优秀畅销书”等奖项,多个品种长期位居同类图书销售排行榜的前列。
                   </p>
               </div>
           </li>
       </ul>
   </li>
</ul>

css代码

*{margin:0;padding: 0;}
ul{list-style:none;}
a{text-decoration: none;color:#fff;}
.nav{width: 200px;height: 500px;background-color: #403636;margin-left:100px;margin-top:20px;text-align: center;}
.one{height:45px;line-height: 45px;position: relative;border-bottom:1px solid #362C2C;}
.one a{padding-left:14px;}
.one i{float:right;margin-top:15px;margin-right:10px;color:#fff;}
.one:hover{background-color: #620505;}
.one ul{position:absolute;left:200px;top:0;display: none;}
.one:hover>ul{display:block;}
.one>ul{border-left:1px solid #362C2C;border-right:1px solid #362C2C;border-top:1px solid #403636;border-bottom:1px solid #403636;}
.two{width:250px;height:45px;line-height: 45px;color:#fff;background-color: #403636;text-align:left;padding:0 10px;border-bottom: 1px solid #362C2C;}
.one .two:last-child{border:none;}
.two:hover{background-color: #620505;}
.two:hover .three{display:block;}
.three{display: none;position:absolute;left:271px;top:0;background-color:#403636;width: 300px; }
.three p{text-indent:2em;line-height:20px;padding:10px 20px;}

js代码

<script type="text/javascript">
   $(function(){
       $('.one').mouseover(function(){
           $(this).find('ul').slideDown(300);
       })
       $('.one').mouseleave(function(){
           $(this).find('ul').hide(300);
       })
       $('.two').mouseover(function(){
           $(this).find('.three').slideDown(300);
       })
       $('.two').mouseleave(function(){
           $(this).find('.three').hide();
       })
   })
</script>

QQ图片20181114103819.png

相关标签:HTMLjQuery
    0推荐

      作者的热门手记

      PHP中文网

      未登录