zoukankan      html  css  js  c++  java

  • 4.1下拉菜单使用制作教程帖

    从SHL 3.8 开始 就有用户陆续反映不知如何制作动态的下拉导航菜单，于是乎，SHL官方响应群众要求，在最新的SHL4.1版本中加入了 main_menu 的扩展标签 main_menu_extend。

    通过此标签你可以实现一些华丽的下拉菜单特效，就特效来说 狗头我向大家推荐 JQ 这个全世界都很流行的JS 框架，通过JQ 这款JS 框架可以实现一些极其华丽的特效，绝对不输FLASH 特效。。

    好了，废话不多说，最近经常有很多坛友反映不知如何使用 main_menu_extend 这一标签。响应老大的号召，狗头我今天开一个教程帖，来给大家展示一个JQ 的下拉菜单制作的全过程。。 (说的不好 大家别喷哈~)

    首先你需要制作一款静态HTML下拉菜单 如果不会的话那也没关系，网上别人制作好的也是一堆一堆的，找一款你满意的静态HTML 的下拉菜单嘛，狗头给大家推荐一个网站（嘿嘿，其实这还是灵魂告诉我的~）http://www.zcool.com.cn  站酷网， 里面真的有很多华丽的特效素材提供下载。

    随便找一款吧...   http://www.zcool.com.cn/gfx/ZNzE5MDA=.html  就它了，感觉不错。。 （是不是很面熟啊~ 嘿嘿，对了，之前我发的3.8 版本的下拉菜单就是用这款做的演示）

    好了，特效选好就需要把文件下载下来，下载完成后，打开后你会发现里面有两个文件夹 和一个名为jQure-menu.html 的 HTML 文档，这些文件就是组成这个下拉菜单的必须文件啦。

    首先把JS 文件夹和 image 文件夹复制到你的模版根目录下， 然后用DW打开 jQure-menu.html  ，下面重头戏就是对这个文档的分析啦。。

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>dufeng007.cn</title>
    6. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    7. <script type=text/javascript>
    8. $(function(){
    9.         $('#webmenu li').hover(function(){
    10.                 $(this).children('ul').stop(true,true).show('slow');
    11.         },function(){
    12.                 $(this).children('ul').stop(true,true).hide('slow');
    13.         });
    14.         
    15.         $('#webmenu li').hover(function(){
    16.                 $(this).children('div').stop(true,true).show('slow');
    17.         },function(){
    18.                 $(this).children('div').stop(true,true).hide('slow');
    19.         });
    20. });
    21. </script>
    22. <style type="text/css">
    23. * {
    24.         margin:0;
    25.         padding:0;
    26. }
    27. body {
    28.         font-family:Arial, Verdana, Helvetica, sans-serif;
    29.         font-family:"雅黑宋体", "微软雅黑", "新宋体", "宋体";
    30.         font-size:1em;
    31.         font-size:17px;
    32.         color:#FFF;
    33.         background:#050505;
    34.         text-align:left;
    35. }
    36. a {
    37.         color:#FFF;
    38.         text-decoration:none;
    39. }
    40. ul {
    41.         list-style:none;
    42. }
    43. #webmenu {
    44.         height:37px;
    45.         background:#333;
    46.         font-size:1.3em;
    47.         text-align:center;
    48. }
    49. #webmenu a {
    50.         font-size:0.65em;
    51. }
    52. #webmenu li ul {
    53.         display:none;
    54. }
    55. #webmenu li ul li {
    56.         float:none;
    57. }
    58. *html #webmenu li ul li {
    59.         display:inline;
    60. }
    61. #webmenu li ul a {
    62.         float:none;
    63.         height:32px;
    64.         line-height:32px;
    65.         padding:0 10px;
    66.         text-transform:capitalize;
    67. }
    68. #webmenu .height-auto {
    69.         line-height:15px;
    70.         padding:5px 10px;
    71. }
    72. .second-menu, .third-menu, .fourth-menu {
    73.         position:absolute;
    74. }
    75. .first-menu li {
    76.         float:left;
    77.         position:relative;
    78. }
    79. .first-menu a {
    80.         float:left;
    81.         display:block;
    82.         padding:0 20px;
    83.         height:35px;
    84.         line-height:35px;
    85.         background:#333;
    86.         border-top:1px solid #4a4a4a;
    87.         border-left:1px solid #4a4a4a;
    88.         border-bottom:1px solid #242424;
    89.         border-right:1px solid #242424;
    90.         font-size:.7em;
    91. }
    92. .first-menu a:hover {
    93.         background:#4698ca;
    94.         border-top:1px solid #5db1e0;
    95.         border-left:1px solid #5db1e0;
    96. }
    97. .second-menu {
    98.         top:37px;
    99.         right:0;
    100. }
    101. *html .second-menu {
    102.         right:-1px;
    103. }
    104. .second-menu a {
    105.         font-size:11px;
    106. }
    107. .second-menu a.arrow {
    108.         background:#3a3a3a url(image/arrow.gif) no-repeat right top;
    109. }
    110. .second-menu a.arrow:hover {
    111.         background:#4698ca url(image/arrow.gif) no-repeat right -32px;
    112. }
    113. .second-menu a.arrow-02 {
    114.         background:#3a3a3a url(image/arrow.gif) no-repeat right -64px;
    115. }
    116. .second-menu a.arrow-02:hover {
    117.         background:#4698ca url(image/arrow.gif) no-repeat right -110px;
    118. }
    119. .third-menu, .fourth-menu {
    120.         177px;
    121.         top:0;
    122.         left:177px;
    123. }
    124. .third-menu a {
    125.         background:#4c4c4c;
    126.         font-weight:normal;
    127.         border-top:1px solid #595959;
    128.         border-left:1px solid #595959;
    129.         border-bottom:1px solid #333;
    130.         border-right:1px solid #333;
    131. }
    132. #subMgm {
    133.         177px;
    134. }
    135. #subMgm .third-menu {
    136.         left:177px;
    137. }
    138. #subMgm .fourth-menu {
    139.         left:177px;
    140. }
    141. #subMusic, #subNews {
    142.         177px;
    143. }
    144. </style>
    145. </head>
    146. <body>
    147. <ul id="webmenu" class="first-menu">
    148.   <li><a href="#" style="color:#ff0; background:none; border:none;" target="_self">网站大全</a></li>
    149.   <li><a href="#" target="_self">建立网站</a>
    150.     <ul style="display: none;" id="subMusic" class="second-menu">
    151.       <li><a href="#" class="arrow" target="_self">域名空间</a>
    152.         <ul class="third-menu">
    153.           <li><a href="http://www.fatcow.com/">fatcow</a></li>
    154.           <li><a href="http://www.justhost.com/">justhost</a></li>
    155.           <li><a href="http://www.ipower.com/">ipower</a></li>
    156.           <li><a href="http://www.inmotionhosting.com/">inmotion</a></li>
    157.           <li><a href="http://www.ixwebhosting.com/index.php/v2/pages.dspmain">ixweb</a></li>
    158.           <li><a href="http://www.supergreenhosting.com/">supergreen</a></li>
    159.           <li><a href="http://www.hostgator.com/">hostgator</a></li>
    160.           <li><a href="http://www.powweb.com/">powweb</a></li>
    161.           <li><a href="http://www.startlogic.com/">startlogic</a></li>
    162.           <li><a href="http://www.greengeeks.com/">greengeeks</a></li>
    163.         </ul>
    164.       </li>
    165.       <li><a href="#" class="arrow" target="_self">CSS 模版</a>
    166.         <ul class="third-menu">
    167.           <li><a href="http://www.mezzoblue.com/zengarden/alldesigns/">zengerden</a></li>
    168.           <li><a href="http://www.freecsstemplates.org/">freecsstemplates.org</a></li>
    169.           <li><a href="http://www.oswd.org/">oswd.org</a></li>
    170.           <li><a href="http://www.opendesigns.org/">opendesigns.org</a></li>
    171.           <li><a href="http://www.cssplay.co.uk/">cssplay</a></li>
    172.           <li><a href="http://www.studiopress.com/">studiopress</a></li>
    173.           <li><a href="http://www.styleshout.com/">styleshout</a></li>
    174.         </ul>
    175.       </li>
    176.       <li><a href="#" class="arrow" target="_self">CSS 学习</a>
    177.         <ul class="third-menu">
    178.           <li><a href="http://www.x-css.cn/">ken's blog</a></li>
    179.           <li><a href="http://www.ndoherty.com/portfolio/">ndoherty</a></li>
    180.           <li><a href="http://www.inlco.cn/">andy's blog</a></li>
    181.           <li><a href="http://www.cssplay.co.uk/">cssplay</a></li>
    182.         </ul>
    183.       </li>
    184.       <li><a href="#" class="arrow" target="_self">博客制作</a>
    185.         <ul class="third-menu">
    186.         </ul>
    187.       </li>
    188.       <li><a href="#" class="arrow" target="_self">素材下载</a>
    189.         <ul class="third-menu">
    190.           <li><a href="http://flashden.net/">flashden.net</a></li>
    191.           <li><a href="http://www.zcool.com.cn/">站酷</a></li>
    192.         </ul>
    193.       </li>
    194.       <li><a href="#" class="arrow" target="_self">管理维护</a>
    195.         <ul class="third-menu">
    196.           <li><a href="http://www.chinaz.com/">中国站长</a></li>
    197.           <li><a href="http://www.68design.net/Web-Guide/">网页设计师联盟</a></li>
    198.           <li><a href="http://www.blueidea.com/">蓝色理想</a></li>
    199.           <li><a href="http://homepage.yesky.com/">天极网页</a></li>
    200.           <li><a href="http://learning.artech.cn/">前沿教室</a></li>
    201.         </ul>
    202.       </li>
    203.     </ul>
    204.   </li>
    205.   <li><a href="#" target="_self">工作生活</a>
    206.     <ul id="subNews" class="second-menu">
    207.       <li><a href="#" class="arrow" target="_self">搜索</a>
    208.         <ul class="third-menu">
    209.           <li><a href="http://www.baidu.com/">百度</a></li>
    210.           <li><a href="http://www.google.cn/">Google</a></li>
    211.           <li><a href="http://dir.sogou.com/">搜狐</a></li>
    212.         </ul>
    213.       </li>
    214.       <li><a href="#" class="arrow" target="_self">新闻</a>
    215.         <ul class="third-menu">
    216.           <li><a href="http://www.sina.com.cn/">新浪</a></li>
    217.           <li><a href="http://www.qq.com/">腾讯</a></li>
    218.           <li><a href="http://www.sohu.com/">搜狐</a></li>
    219.           <li><a href="http://www.163.com/">网易</a></li>
    220.           <li><a href="http://www.ifeng.com/">凤凰网</a></li>
    221.         </ul>
    222.       </li>
    223.       <li><a href="#" class="arrow" target="_self">招聘</a>
    224.         <ul class="third-menu">
    225.           <li><a href="http://www.chinahr.com/index.htm">中华英才网</a></li>
    226.           <li><a href="http://www.51job.com/">前程无忧</a></li>
    227.           <li><a href="http://www.zhaopin.com/">智联招聘</a></li>
    228.           <li><a href="http://www.cjol.com/">中国人才热线</a></li>
    229.           <li><a href="http://www.01job.cn/">上海第一招聘</a></li>
    230.           <li><a href="http://www.528.com.cn/">528招聘网</a></li>
    231.           <li><a href="http://www.1010jz.com/">1010兼职网</a></li>
    232.         </ul>
    233.       </li>
    234.       <li><a href="#" class="arrow" target="_self">网赚</a>
    235.         <ul class="third-menu">
    236.           <li><a href="http://www.vikecn.com/">威客中国</a></li>
    237.         </ul>
    238.       </li>
    239.       <li><a href="#" class="arrow" target="_self">购物</a>
    240.         <ul class="third-menu">
    241.           <li><a href="#" class="arrow" target="_self">网站</a>
    242.             <ul class="fourth-menu">
    243.               <li><a href="http://www.taobao.com/">淘宝网</a></li>
    244.               <li><a href="http://www.dangdang.com/">当当网</a></li>
    245.               <li><a href="http://www.eachnet.com/">易趣网</a></li>
    246.               <li><a href="http://youa.baidu.com/">百度有啊</a></li>
    247.               <li><a href="http://www.amazon.cn/">卓越网</a></li>
    248.               <li><a href="http://www.paipai.com/">拍拍网</a></li>
    249.               <li><a href="http://china.alibaba.com/">阿里巴巴</a></li>
    250.               <li><a href="http://www.360buy.com/">京东商城</a></li>
    251.               <li><a href="http://www.gumzzi.com/">锦上添花女装</a></li>
    252.             </ul>
    253.           </li>
    254.           <li><a href="#" class="arrow" target="_self">快递公司</a>
    255.             <ul class="fourth-menu">
    256.               <li><a href="http://www.sto.cn/">申通快递</a></li>
    257.               <li><a href="http://www.yto.net.cn/">圆通快递</a></li>
    258.               <li><a href="http://www.ems.com.cn/">EMS特快专递</a></li>
    259.               <li><a href="http://www.sf-express.com/">顺丰快递</a></li>
    260.               <li><a href="http://www.ttkdex.com/">天天快递</a></li>
    261.               <li><a href="http://www.zto.cn/">中通快递</a></li>
    262.               <li><a href="http://www.yundaex.com/www/index.html">韵达快运</a></li>
    263.             </ul>
    264.           </li>
    265.           <li><a href="#" class="arrow" target="_self">电子支付</a>
    266.             <ul class="fourth-menu">
    267.               <li><a href="https://www.alipay.com/">支付宝</a></li>
    268.               <li><a href="https://www.99bill.com/">快钱</a></li>
    269.               <li><a href="https://www.tenpay.com/">财付通</a></li>
    270.               <li><a href="https://www.paypal.com/c2">paypal</a></li>
    271.               <li><a href="https://www.baifubao.com/">百付宝</a></li>
    272.             </ul>
    273.           </li>
    274.         </ul>
    275.       </li>
    276.       <li><a href="#" class="arrow" target="_self">科技</a>
    277.         <ul class="third-menu">
    278.           <li><a href="http://www.patent-cn.com/">专利之家</a></li>
    279.         </ul>
    280.       </li>
    281.     </ul>
    282.   </li>
    283.   <li><a href="#" class="arrow" target="_self">休闲娱乐</a>
    284.     <ul style="display: none;" id="subMgm" class="second-menu">
    285.       <li><a href="#" class="arrow" target="_self">游戏</a>
    286.         <ul class="third-menu">
    287.           <li><a href="#" class="arrow" target="_self">网络游戏</a>
    288.             <ul class="fourth-menu">
    289.               <li><a href="http://wow.163.com/">魔兽世界</a></li>
    290.               <li><a href="http://au.9you.com/web_v5/index_top.html">劲舞团</a></li>
    291.               <li><a href="http://popkart.tiancity.com/homepage/">跑跑卡丁车</a></li>
    292.               <li><a href="http://zt.ztgame.com/">征途</a></li>
    293.               <li><a href="http://wd.gyyx.cn/">问道</a></li>
    294.               <li><a href="http://ploy.bnb.sdo.com/20070904/web/flash.htm">泡泡堂</a></li>
    295.               <li><a href="http://rxjh.17game.com/">热血江湖</a></li>
    296.               <li><a href="http://www.fsjoy.com/">街头篮球</a></li>
    297.               <li><a href="http://xyq.163.com/">梦幻西游</a></li>
    298.               <li><a href="http://speed.qq.com/index.shtml">QQ飞车</a></li>
    299.               <li><a href="http://mxd.sdo.com/homepage.htm">冒险岛</a></li>
    300.               <li><a href="http://sh.xoyo.com/">水浒Q传</a></li>
    301.               <li><a href="http://cf.qq.com/">穿越火线</a></li>
    302.               <li><a href="http://tl.changyou.com/">天龙八部</a></li>
    303.               <li><a href="http://zhuxian.wanmei.com/">诛仙</a></li>
    304.               <li><a href="http://wulin2.wanmei.com/">武林外传</a></li>
    305.               <li><a href="http://world2.wanmei.com/">完美世界</a></li>
    306.               <li><a href="http://sf.17game.com/index.php">特种部队</a></li>
    307.               <li><a href="http://mir2.sdo.com/web/index.html">热血传奇</a></li>
    308.             </ul>
    309.           </li>
    310.           <li><a href="http://www.17173.com/">17173</a></li>
    311.         </ul>
    312.       </li>
    313.       <li><a href="#" class="arrow" target="_self">电影</a>
    314.         <ul class="third-menu">
    315.           <li><a href="http://www.xunlei.com/">迅雷看看</a></li>
    316.           <li><a href="http://www.gougou.com/">狗狗搜索</a></li>
    317.           <li><a href="http://www.verycd.com/">电驴下载</a></li>
    318.           <li><a href="http://www.80s.cn/">80s手机电影</a></li>
    319.         </ul>
    320.       </li>
    321.       <li><a href="#" class="arrow" target="_self">视频</a>
    322.         <ul class="third-menu">
    323.           <li><a href="http://www.youku.com/">优酷</a></li>
    324.           <li><a href="http://www.tudou.com/">土豆</a></li>
    325.           <li><a href="http://www.ku6.com/">酷6</a></li>
    326.           <li><a href="http://6.cn/">六间房</a></li>
    327.           <li><a href="http://www.56.com/">56</a></li>
    328.         </ul>
    329.       </li>
    330.       <li><a href="#" class="arrow" target="_self">音乐</a>
    331.         <ul class="third-menu">
    332.           <li><a href="http://mp3.baidu.com/">百度-MP3</a></li>
    333.           <li><a href="http://www.qq163.com/">QQ163</a></li>
    334.           <li><a href="http://www.1ting.com/">一听音乐</a></li>
    335.         </ul>
    336.       </li>
    337.     </ul>
    338.   </li>
    339.   <li><a href="http://dufeng007.cn/sample.html" class="arrow" target="_blank">我的网站</a></li>
    340. </ul>
    341. </body>
    342. </html>

    复制代码打开文档之后我们会看到这个HTML 文档中 有很多代码。。 哎呀呀 真是看的眼花缭乱。。  那就删减一些吧。。

    首先我们把CSS 提取出来，在模版文件夹中新建一个menu.css 把这段CSS 放入其中，然后模板的index.php 和common.php 中引入menu.css 。。 把JS 也提取出来 复制到JS 文件中，同样引入。。

    这样之后一看，哇哈哈真爽~少了一大截。。 不过貌似还是很多样子啊！ 不方便分析，那就再删吧， 菜单不需要那么多，最多三级就可以了嘛，分析的话 那也只需要一段... 删呀删的， 留下最重要的一部分就OK了。。。

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>dufeng007.cn</title>
    6. <script type="text/javascript" src="<?php echo get_skin_root()?>js/jquery-1.3.2.min.js"></script>
    7. </head>
    8. <body>
    9. <ul id="webmenu" class="first-menu">
    10.   <li><a href="#" style="color:#ff0; background:none; border:none;" target="_self">首页</a></li>
    11.   
    12.    <li><a href="#" target="_self">建立网站</a>
    13.     <ul id="subMusic" class="second-menu">
    14.       <li><a href="#" target="_self">域名空间</a>
    15.         <ul>
    16.           <li><a href="http://www.fatcow.com/">fatcow</a></li>
    17.         </ul>
    18.       </li>
    19.     </ul>
    20.   </li>
    22. </ul>
    23. </body>
    24. </html>

    复制代码哈哈，这样一看的话，需要分析的代码就更少了。。真爽呀~~ 哦嗬嗬~

    从以上代码段可以看出来，这个下拉菜单的结构就是

    1.    <li><a href="#" target="_self">建立网站</a>
    2.    <ul style="display: none;" id="subMusic" class="second-menu">
    3.       <li><a href="#" class="arrow" target="_self">域名空间</a>
    4.         <ul class="third-menu">
    5.           <li><a href="http://www.fatcow.com/">fatcow</a></li>
    6.         </ul>
    7.       </li>
    8.     </ul>
    9.   </li>

    复制代码他的主结构也就是
    <ul>
         <li>
         </li>
    </ul>
    的结构，而有子类的话也依葫芦画瓢
    <ul>
         <li> // 第一层li
                <ul>
                    <li>// 第二层li
                   </li>
               </ul>
         </li>
    </ul>
    这样一看就简单明了啦...
    接着我们打开官方对于main_menu_extend标签的标签说明，官方给出一个自带样式 正好也是
    <ul>
         <li>
         </li>
    </ul
    的结构， 那就方便啦~ 直接套就成。。

    官方给的标签是

    1. main_menu_extend('<ul>||</ul>', '<li>||</li>','<li>||</li>')

    复制代码参照这个标签说明，我们再对比下结构大致就能了解到这几个参数的意思.. 

    第一个<ul>||</ul> 不用说啦，肯定就代表了 结构里面的ul  的意思。
    另外两个li   那也就是代表了 结构里面的两个li ... 
    根据官方的标 签说明，我们能知道 第二个参数代表了 第一层的li  。。第三个参数代表了 第二层的 li。。

    参照这个标签，对比下结构，于是我们就可以得到一个标签

    1. <?php main_menu_extend('<ul id="subMusic" class="second-menu">||</ul>','<li>||</li>','<li>||</li>'); ?>

    复制代码UL 中的 style="display: none;"  可以写到CSS 中，在这里就不需要加入了。。 
    好啦，用此标签调用出来的应该是没错的。。但是这样还不够。。

    从结构上来看，我们找的下拉菜单结构中ul 分为好几个种类.. 二级的class 是second-menu 三级的却是 third-menu  ，这可不行呀..  标签只提供了一个ul 参数，那怎么办呢..  很简单.. 改CSS ！

    我们只需要一个second-menu  的class 其他什么三级  四级 菜单，全部换掉，比如CSS 中的 .third-menu 标识，我们就可以替换成 .second-menu li ul， 经此替换处理等等操作之后，我们能够得到menu.css 中的文件 就是

    1. * {
    2.         margin:0;
    3.         padding:0;
    4. }
    5. body {
    6.         font-family:Arial, Verdana, Helvetica, sans-serif;
    7.         font-family:"雅黑宋体", "微软雅黑", "新宋体", "宋体";
    8.         font-size:1em;
    9.         font-size:17px;
    10.         color:#FFF;
    11.         background:#050505;
    12.         text-align:left;
    13. }
    14. a {
    15.         color:#FFF;
    16.         text-decoration:none;
    17. }
    18. ul {
    19.         list-style:none;
    20. }
    21. #webmenu {
    22.         height:37px;
    23.         background:#333;
    24.         font-size:1.3em;
    25.         text-align:center;
    26. }
    27. #webmenu a {
    28.         font-size:0.65em;
    29. }
    30. #webmenu li ul {
    31.         display:none;
    32. }
    33. #webmenu li ul li {
    34.         float:none;
    35. }
    36. *html #webmenu li ul li {
    37.         display:inline;
    38. }
    39. #webmenu li ul a {
    40.         float:none;
    41.         height:32px;
    42.         line-height:32px;
    43.         padding:0 10px;
    44.         text-transform:capitalize;
    45. }
    46. #webmenu .height-auto {
    47.         line-height:15px;
    48.         padding:5px 10px;
    49. }
    50. .second-menu{
    51.         position:absolute;
    52. }
    53. .first-menu li {
    54.         float:left;
    55.         position:relative;
    56. }
    57. .first-menu a {
    58.         float:left;
    59.         display:block;
    60.         padding:0 20px;
    61.         height:35px;
    62.         line-height:35px;
    63.         background:#333;
    64.         border-top:1px solid #4a4a4a;
    65.         border-left:1px solid #4a4a4a;
    66.         border-bottom:1px solid #242424;
    67.         border-right:1px solid #242424;
    68.         font-size:.7em;
    69. }
    70. .first-menu a:hover {
    71.         background:#4698ca;
    72.         border-top:1px solid #5db1e0;
    73.         border-left:1px solid #5db1e0;
    74. }
    75. .second-menu {
    76.         display: none;
    77.         top:37px;
    78.         right:0;
    79. }
    80. *html .second-menu {
    81.         right:-1px;
    82. }
    83. .second-menu a {
    84.         font-size:11px;
    85. }
    86. .second-menu a.arrow {
    87.         background:#3a3a3a url(image/arrow.gif) no-repeat right top;
    88. }
    89. .second-menu a.arrow:hover {
    90.         background:#4698ca url(image/arrow.gif) no-repeat right -32px;
    91. }
    92. .second-menu a.arrow-02 {
    93.         background:#3a3a3a url(image/arrow.gif) no-repeat right -64px;
    94. }
    95. .second-menu a.arrow-02:hover {
    96.         background:#4698ca url(image/arrow.gif) no-repeat right -110px;
    97. }
    98. .second-menu li ul, .fourth-menu {
    99.         177px;
    100.         top:0;
    101.         left:177px;
    102. }
    103. .second-menu li ul a {
    104.         background:#4c4c4c;
    105.         font-weight:normal;
    106.         border-top:1px solid #595959;
    107.         border-left:1px solid #595959;
    108.         border-bottom:1px solid #333;
    109.         border-right:1px solid #333;
    110. }
    111. #subMgm {
    112.         177px;
    113. }
    114. #subMgm .second-menu li ul {
    115.         left:177px;
    116. }
    117. #subMgm .fourth-menu {
    118.         left:177px;
    119. }
    120. #subMusic, #subNews {
    121.         177px;
    122. }

    复制代码大功告成~好了，下面总结一下，
    第一步： 把JS 和图片复制到模版中，第二步 分析代码得出标签，第三步 把标签复制到index.php 和common.php 中的适当位置。。。

    好了...  如此一番累死累活的操作之后，我们的华丽丽的下拉菜单就完成啦~ 而且还支持3级 4级。。无限级哦~ 好好欣赏一下吧。。
  • 相关阅读:
    asp.net Ajax调用Aspx后台方法
    JS 通过字符串取得对应对象
    nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常
    jexus手动跨域设置
    HTTP Error 400. The request hostname is invalid
    at MySql.Data.MySqlClient.MySqlStream.ReadPacket 或 FUNCTION account.AddMinutes does not exist
    sql xml 入门
    Jexus .Net at System.Net.Sockets.Socket.Connect (System.Net.IPAddress[] addresses, System.Int32 port)
    关于SQL SERVER中的FLOAT转换为VARCHAR
    JS倒计时
  • 原文地址：https://www.cnblogs.com/wycc/p/2513491.html
Copyright © 2011-2022 走看看