首页>>导航菜单>>jquery.menu-aim-右侧展开菜单(2014-12-24)

jquery.menu-aim-右侧展开菜单

jquery.menu-aim-右侧展开菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="menu">  
  2.   <ul id="G_chan-panel" class="pop-panel pp_channels Fix" style=" visibility: visible; z-index: 1001; ">  
  3.     <li class="root-item  "> <a href="#" class="root-name"><span>爱薅羊毛</span></a>  
  4.       <ul class="pop-panel Fix sub-list">  
  5.         <li class="main-cate"><a href="#">餐饮频道</a></li>  
  6.         <li><a href="http://www.aihym.com">爱薅羊毛</a></li>  
  7.         <li><a href="#">粤2菜</a></li>  
  8.         <li><a href="#">粤菜3</a></li>  
  9.         <li><a href="#">粤菜4</a></li>  
  10.       </ul>  
  11.     </li>  
  12.     <li class="root-item"> <a href="#" class="root-name"><span>购物</span></a>  
  13.       <ul class="pop-panel Fix sub-list">  
  14.         <li class="main-cate"><a href="#">购物频道</a></li>  
  15.         <li><a href="#">超市/便利店</a></li>  
  16.         <li><a href="#">超市2菜</a></li>  
  17.         <li><a href="#">超市3</a></li>  
  18.         <li><a href="#">超市4</a></li>  
  19.         <li><a href="#">其他</a></li>  
  20.       </ul>  
  21.     </li>  
  22.   </ul>  
  23. </div>  

 

CSS Code
  1. .pp_channels .root-item, .pp_channels .root-name, .pp_channels .root-name span, .pp_channels .sub-list li a {  
  2. /* background-image: url("bg.png"); 
  3.     background-repeat: no-repeat;*/  
  4. }  
  5. .G_chan-panel {  
  6.     position: absolute;  
  7.     z-index: 1000;  
  8.     top: 120px;  
  9.     left: 199px;  
  10.     visibility: hidden;  
  11. }  
  12. .pp_channels {  
  13.     width: 138px;  
  14.     padding: 0;  
  15.     border-width: 0 0 2px 1px;  
  16.     border-radius: 5px;  
  17.     -webkit-border-radius: 5px;  
  18.     -moz-border-radius: 5px;  
  19.     -moz-box-shadow: -1px 1px 1px #ccc;  
  20.     -webkit-box-shadow: 0 1px 5px #ccc;  
  21.     box-shadow: 0 1px 5px #ccc;  
  22. }  
  23. .pp_channels .root-item {  
  24.     zoom: 1;  
  25.     position: relative;  
  26.     width: 139px;  
  27.     height: 34px;  
  28.     background-position: -13px -373px;  
  29.     overflow: visible;  
  30.     vertical-align: middle;  
  31. }  
  32. .pp_channels .root-name {  
  33.     display: block;  
  34.     z-index: 1001;  
  35.     position: relative;  
  36.     border-top: 1px solid #B9F5D2;  
  37.     padding-left: 10px;  
  38.     background-position: -10px -358px;  
  39.     cursor: pointer;  
  40. }  
  41. .pp_channels .root-name span {  
  42.     display: block;  
  43.     border-right: 1px solid #B9F5D2;  
  44.     padding-left: 9px;  
  45.     height: 34px;  
  46.     font-size: 1.2em;  
  47.     line-height: 34px;  
  48.     color: #000;  
  49.     background-position: -167px -358px;  
  50. }  
  51. .pp_channels .active .root-name {  
  52.     background: #fff;  
  53. }  
  54. .pp_channels .active .root-name span {  
  55.     color: #C00;  
  56.     border-color: #fff;  
  57. }  
  58. .pp_channels .no-sub .root-name span {  
  59.     border-color: #fff;  
  60.     background-position: 20px -358px;  
  61. }  
  62. .pp_channels .sub-list {  
  63.     left: 138px;  
  64.     top: -34px;  
  65.     padding: 5px 2px 5px 16px;  
  66.     width: 200px;  
  67.     overflow: hidden;  
  68.     _top: -35px;  
  69.     -moz-box-shadow: -1px 1px 1px #ccc;  
  70.     -webkit-box-shadow: 0 1px 5px #ccc;  
  71.     box-shadow: 0 1px 5px #ccc;  
  72. }  
  73. .pp_channels .active .sub-list {  
  74.     visibility: visible;  
  75. }  
  76. .pp_channels .sub-list li {  
  77.     float: left;  
  78.     width: 83px;  
  79.     margin: 0 10px 5px 0;  
  80. }  
  81. .pp_channels .sub-list .main-cate {  
  82.     width: 200px;  
  83.     margin-right: -10px;  
  84.     font-weight: bold;  
  85. }  
  86. .pp_channels .sub-list a {  
  87.     padding-left: 3px;  
  88.     line-height: 21px;  
  89.     background-position: -169px -418px;  
  90.  *background-position: -169px -420px;  
  91. }  
  92. .pp_channels .sub-list a: hover {  
  93.     background-position: -169px -438px;  
  94.  *background-position: -169px -440px;  
  95. }  
  96. .pop-panel {  
  97.     z-index: 1000;  
  98.     position: absolute;  
  99.     visibility: hidden;  
  100.     border: 1px solid #B9F5D2;  
  101.     padding: 5px 9px;  
  102.     background: #fff;  
  103.     color: #61646E;  
  104.  #margin-left:-0px;  
  105.     _margin-left: -0px;  
  106. }  
  107. .pop-panel a {  
  108.     color: #61646E;  
  109. }  
  110. .pop-panel a: hover {  
  111.     text-decoration: none;  
  112.     color: #C00;  
  113. }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_451.html