您好,欢迎来到高士教育。
搜索
您的当前位置:首页纯CSS打造的导航菜单(附jquery版)_jquery

纯CSS打造的导航菜单(附jquery版)_jquery

来源:高士教育


方式一:直接编写代码实现
效果如下:

代码如下:
代码如下:


无需表格的菜单





  • Home

  • News

  • Sports

  • Weather

  • Contact Me






  • 方式二:使用jQuery 代码实现
    代码如下:
    代码如下:



    伸缩的菜单,用toggle()重写



    $(function(){
    $("li").find("ul").prev().click(function(){
    $(this).next().toggle();
    });
    $("li:has(ul)").find("ul").hide();
    });





  • Home

  • News

  • Lastest News

  • All News



  • Sports

  • Basketball

  • Football

  • Volleyball



  • Weather

  • Today's Weather

  • Forecast



  • Contact Me






  • 注意:该代码必须加载了jquery.min.js 文件,并且所写的CSS 只能在Firefox 浏览器中正常显示。

    Copyright © 2019- guanggaoshi.cn 版权所有

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务