仿聚美优品导航

说明：前端所用到的js都是jQuery v1.8.3

阿里图标-百度搜索阿里图标库-三角形

<title>聚美优品导航</title>
<style>
*{
   margin:0;
   padding:0;
}
/*啊里图标*/
@font-face {font-family: 'iconfont';
    src: url('iconfont/iconfont.eot'); /* IE9*/
    src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
   position:absolute;/*绝对定位*/
   top:0px;
   left:-12px;
   color:#fb88af;
   display:none;
}#menu{
   width:999px;
   height:270px;
   margin:50px auto ;
   box-shadow:0px 0px 10px #000;
   padding: 15px;
}#menu .con{
   width:740px;
   height:270px;
   background: #ccff99;
   float:left;
   overflow:hidden;
}#menu .nav{
   width:230px;
   height: 270px;
   background:#faf9f6;
   float:right;
}#menu .nav ul li{
   width:230px;
   height:45px;
   border-bottom: 1px dotted #ddd;
   list-style: none;/*去掉圆点*/
   font-size: 16px;
   font-family:"微软雅黑";
   text-align:center;
   line-height: 45px;
   position:relative;/*相对定位*/
}#menu .nav ul li.one{
   background:#fb88af;
   color:#fff;

}#menu .nav ul li.one .iconfont{
   display:block;
}#menu .con .content{
width: 740px;
height: 270px;/*
border: 1px solid red;    */

}
</style>

<body>
    <div id="menu">
    
       <div class="con">
           <div class="content">家具</div>
           <div class="content">面部护理</div>
           <div class="content">彩钻</div>
           <div class="content">身体护理</div>
           <div class="content">鞋包</div>
           <div class="content">配饰</div>
       </div>
     
       <div class="nav">
           <ul>
               <li class="one"><font class="iconfont"></font>家具/母婴</li>
               <li><font class="iconfont"></font>面部护理</li>
               <li><font class="iconfont"></font>彩钻</li>
               <li><font class="iconfont"></font>身体护理</li>
               <li><font class="iconfont"></font>鞋包</li>
               <li><font class="iconfont"></font>配饰</li>
           </ul>
       </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript">
       var _index=0;
       $(".nav ul li").mousemove((function() {
                  _index=$(this).index();
              $(this).addClass('one').siblings('li').removeClass('one');
              $(".con .content").eq(_index).show().siblings('.content').hide();
              }));
       </script>
</body>

posted @ 2015-05-28 16:32 致==年阅读(137) 评论(0) 收藏举报

刷新页面返回顶部

仿聚美优品导航

公告