下拉菜单例子--Jquery控件JDMenu(一)

帮朋友调整菜单显示方式.轻量级的JS框架Jquery当然是首选,于是找到了菜单插件JDMenu.

效果如下:

• Home
• Communal Work
• Foster Parents Program
  • CAF Animal Orphanage
  • Adoption from CAF
  • Surrender to CAF
  • CAF H-Programme
  • Animal Abuse Complaint Cases
• About CAF
  • Memberships
  • CAF Annual Reports
  • Animal Welfare Work
  • CAF Research Work
  • CAF Edu and Info Centre
  • Careers at CAF
  • Volunteers Participation
• Funding Projects
  • CVF-CJARR Veterinary Fund
  • Companion Animal Patronage
  • Fundraising for CAF
• Friendly Links
• Contact CAF
• Downloads
• 

 

我主要调整了CSS文件,首要先满足了应用的要求.将在下一步中完善JDMenu的了解及修改.这里简要说一下.

1. 新建HTML文件,添加Jquery引用,以及bgiframe,dimensions,JDMenu的JS文件,及CSS文件等必须引用.(他们都包含在压缩包中).

2. 然后添加类似如下的结构的HTML代码:

      <ul class="jd_menu_vertical jd_menu_slate"> <!--这里的class很重要,需要用于识别这是菜单的主体-->
        <li>第一层_1
           <ul>
              <li>第二层_1_1</li>
              <li>第二层_1_2</li>
              <li>第二层_1_3</li>
           </ul>
        </li>
        <li>第一层_2
           <ul>
              <li>第二层_2_1</li>
              <li>第二层_2_2</li>
              <li>第二层_2_3</li>
           </ul>
        </li>
      </ul>

      这是菜单的原型了~从文字上可以了解他们是1层及2层菜单的内容.

3. 最后执行JS

     $(function(){
           $("ul.jd_menu_vertical").jdMenu({});
     });

     这里需要说明的是,我对JDMenu的使用绝对是毛皮级的应用，插件提供了多种可控的参数。例如 自定义动画效果,速度，AJAX调用等方式。待我进一步阅读源码后再写第二篇。

当然，除了JDMenu，我在之前查找资料的过程中也找到了不少优秀的下拉，滑动菜单例子。

      手工打造分离式滑动门导航菜单

      还有一个自己订制菜单的代码生成器,忘记了链接,找到后补充.

      最后强烈推荐一篇 CSS菜单的汇总文章.