jquery高防商城网站侧栏多级导航菜单效果

虽然样式上仿的天猫，但主要是让大家了解下拉的样式结构。

页面内都有注释，如果对参数不了解，多alert一下，这个的js基本没什么特别的算法，主要是 在写这样下拉样式的，html 的结构，我觉得很不错，当然，天猫那个侧栏会复杂点，但原理是一样的，样式上可改性还算蛮高的。

参数直接调用说明：

 代码如下 复制代码

$(window).p10({
    a:$('激活二级栏目的按钮'),

    b:$('二级栏目区域'),

    c:$('二级栏目内的按钮'),

    d:$('三级栏目区域')
 });

使用这个插件 ，还是下载下来吧，因为需要 样式的支持，当然，样式很容易理解和改动的。

完整实例

 

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type='text/css'>
  body{margin:0px;padding:0px;font-size:12px;}
  ul,li,ol{margin:0px;padding:0px;list-style:none;}
  a{text-decoration: none;}
  img{border:0px;}
  .P10Clear{clear:both;}
  
  .P10Head{width:100%;height:100px;background:#a21c1d;_overflow:hidden;}
  .P10HContent{width:998px;height:100%;margin:0 auto;}
  .P10HLogo{width:300px;height:100%;overflow:hidden;float:right;}
  .P10HLogo a{float: left;position: relative;top:22px;}
  .P10HLogo a:hover{opacity:0.8;}
  
  .P10HMenu{float:left;height:100%;}
  .P10HMNav{width:120px;height:100%;float: left;margin-left:1px;text-align: center;position:relative;}
  .P10HMNav a{display:block;width:100%;height:100%;line-height:100px;color:white;font-family:微软雅黑;font-size:15px;}
  .P10HMNav a:hover,.P10HMNav a.act{background:#690000;}
  
  .P10Content{width:100%;height:500px;background: url(./1.jpg) center no-repeat;margin-top:1px;}
  
  .P10SubMenu{width:200px;height:auto;background:white;float:left;position:relative;}
  .P10SCol{width:100%;background:white;box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.2);position:absolute;z-index:2;}
  .P10SCTitle{width:100%;height:40px;line-height:40px;}
  .P10SCTitle a{display:block;width:100%;height:100%;color:#160016;text-indent:20px;cursor:default;}
  .P10SCTitle a:hover,.P10SCTitle a.act{background: #88766e;color:white;}

  /*这个区域不要的话，就只是简单的下拉了，按需求来考虑是否要应用它*/
  .P10SCContainer{position:relative;}
  .P10SCContent{width:500px;background:white;position: absolute;left:200px;top:0px;display:none;padding-bottom:20px;box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.2);}
  .P10SCCNav{width:300px;margin:10px 0 0 10px;float: left;}
  .P10SCCNav em{display:block;border-bottom:2px solid black;width:100%;height:30px;line-height: 30px;font-style:normal;font-size:15px;font-family:微软雅黑;cursor:default;}
  .P10SCCNav a{color:#646464;margin:10px 10px 0 0;float: left;display:inline;}
  .P10SCCNav a:hover{color:black;text-decoration:underline;}
 
 </style>
 </head>
 <body>

  <div class='P10Head'>
   <div class='P10HContent'>
    <ul class='P10HMenu'>
     <li class='P10HMNav'><a class='act' href='javascript:void(0);' title='' >所有商品分类</a></li>
     <li class='P10HMNav'><a target='_blank' href='http://www.tmall.com' title='' >天猫</a></li>
     <li class='P10HMNav'><a target='_blank' href='http://www.jd.com' title='' >京东</a></li>
     <li class='P10HMNav'><a target='_blank' href='http://www.yihaodian.com' title='' >一号店</a></li>
    </ul>
    <div class='P10HLogo'><a target='_blank' href='http://benzi.pw' alt='' ><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/20130922071738877.png alt='' /></a></div>
    <div class='P10Clear'></div>
    <div class='P10SubMenu'>

     <!--二级栏目-->
     <div class='P10SCol'>
      <div class='P10SCTitle'><a href='javascript:void(0);' title='' >服装/内衣/配件</a></div>
      <div class='P10SCTitle' style='background:#f1f1f1;'><a href='javascript:void(0);' title='' >鞋/箱包</a></div>
      <div class='P10SCTitle'><a href='javascript:void(0);' title='' >服装/内衣/配件</a></div>
      <div class='P10SCTitle' style='background:#f1f1f1;'><a href='javascript:void(0);' title='' >鞋/箱包</a></div>
      <div class='P10SCTitle'><a href='javascript:void(0);' title='' >服装/内衣/配件</a></div>
      <div class='P10SCTitle' style='background:#f1f1f1;'><a href='javascript:void(0);' title='' >鞋/箱包</a></div>
      <div class='P10SCTitle'><a href='javascript:void(0);' title='' >服装/内衣/配件</a></div>
      <div class='P10SCTitle' style='background:#f1f1f1;'><a href='javascript:void(0);' title='' >鞋/箱包</a></div>
      <div class='P10SCTitle'><a href='javascript:void(0);' title='' >服装/内衣/配件</a></div>
      <div class='P10SCTitle' style='background:#f1f1f1;'><a href='#' title='' >鞋/箱包</a></div>
     </div>
     <!--End 二级栏目-->

     <!--三级栏目-->
     <div class='P10SCContainer'>
      <div class='P10SCContent'>
       <div class='P10SCCNav'>
        <em>品牌女装</em>
        <a href='#' title=''>新到商品</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
       </div>
       <div class='P10SCCNav'>
        <em>品牌女装</em>
        <a href='#' title=''>新到商品</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
       </div>
      </div>
      <div class='P10SCContent'>
       <div class='P10SCCNav'>
        <em>品牌女装</em>
        <a href='#' title=''>新到商品</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
        <a href='#' title=''>连衣裙</a>
        <a href='#' title=''>T恤</a>
       </div>
      </div>
     </div>
     <!--End 三级栏目-->

    </div>
    <div class='P10Clear'></div>
   </div>
  </div>

 <div class='P10Content'></div>

 <script type="text/javascript" src="./jquery-1.7.2.js" ></script>
 <script type="text/javascript" src="./p10.js" ></script>
 <script type="text/javascript">

  $(window).p10({
   a:$('.P10HMNav').eq(0),
   b:$('.P10SubMenu'),
   c:$('.P10SCTitle'),
   d:$('.P10SCContent')
  });

 

 </script>
 </body>
</html>
时间： 2024-10-23 20:53:36

jquery高防商城网站侧栏多级导航菜单效果的相关文章

jQuery模仿京东/天猫商品左侧分类导航菜单效果_jquery

现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <

jquery+CSS实现的水平布局多级网页菜单效果_jquery

本文实例讲述了jquery+CSS实现的水平布局多级网页菜单效果.分享给大家供大家参考.具体如下: 这里演示的Jquery和CSS共同实现的网页常见的导航菜单,支持两级形式,蓝色风格,最多支持二级,三级可能要对代码进行改造了.本菜单属于中规中矩型,实用性比较强,适合的网站种类也是很多的,希望大家会喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-scroll-nav-menu-style-codes/ 具体代码如下:

jQuery+css实现的蓝色水平二级导航菜单效果代码_jquery

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

jquery实现浮动的侧栏实例_jquery

本文实例讲述了jquery实现浮动的侧栏.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <title>jQuery stickysidebar plugin</title> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='styles

jquery实现浮动的侧栏实例

  本文实例讲述了jquery实现浮动的侧栏.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!DOCTYPE html> <html> <head> <ti

jQuery实现Meizu魅族官方网站的导航菜单效果_jquery

本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下边会有一条横线在滑动.一直想找类似的效果学一下.结果,不是忘记有类似效果的网站的网址,就是压根儿找不到..又不知道怎么描述,今天总算碰到了,真给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-meizu-web-nav-menu-

jQuery垂直多级导航菜单代码分享_jquery

这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码. 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下 <head> <title>jQuery垂直多级导航菜单代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JS实现带有抽屉效果的产品类网站多级导航菜单代码_javascript技巧

本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具

jquery实现具有收缩功能的垂直导航菜单_jquery

本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>垂直导航菜单</title> <style type="text/css"> body{ margin:0; padding:0 0 12px 0