jquery-ui怎样制作折叠菜单呢

折叠菜单可以让用户浏览网页时体验到更好的交互效果，今天我就来讲讲jquery-ui怎样制作折叠菜单，希望可以帮助到大家。

操作方法

  • 01

    首先，新建一个html界面，然后引入jquery-ui.js，jquery-ui.css，jquery即可。数字表示的是版本号，只要jquery的版本是2版本的基本都可以，太高版本的和jqueryui不兼容哦。

  • 02

    然后我们添加一个div作为折叠菜单的最外层，并且添加id：accordion。然后在里面嵌套h4标签和div标签，分别用作菜单栏和菜单内容区域。

  • 03

    然后设置最外层div的宽度和高度，这个可以根据你自己的情况调整到最合适的效果。

  • 04

    如图，预览一下最初的折叠菜单效果，哈哈，现在这个页面的菜单还不能折叠，接着开始添加折叠效果。

  • 05

    如图，使用$("#accordion")来获取到折叠菜单的最外层容器。

  • 06

    然后给这个容器添加折叠效果，只要调用accordion方法就可以了，这样div就具备了折叠菜单的效果。

  • 07

    接着我们来预览，可以看到现在菜单一是展开的，而接着我们点击菜单二，再去看看效果。

  • 08

    点击之后，菜单一就会被折叠起来，轮到菜单二展开。也就是说，默认情况下会有一个菜单处于展开状态。哈哈，到此，折叠菜单就制作完了。

  • 09

    最后来说说新手可能遇到的问题，如图，一定不要漏掉红色框中的rel="stylesheet"，因为连接外部的css文件必须用到它，否则就没有折叠效果的哦。

赞 (0)

相关推荐

  • Axure7.0怎么制作折叠菜单原型?

    设计产品原型时,利用Axure7.0工具制作折叠菜单效果. 1.拖曳三个动态模板到空白页上,分别命名为“tem1”,“tem2”,“tem3” 2.配置每个模板的属性,在“部件属性和样式”中勾选“调整 ...

  • Axure7.0制作折叠菜单

    设计产品原型时,利用Axure7.0工具制作折叠菜单效果 操作方法 01 拖曳三个动态模板到空白页上,分别命名为"tem1","tem2","tem3 ...

  • JQuery UI如何制作颜色动画

    在使用Jquery UI进行Web页面制作的时候,我们有时需要添加一些动画特效,比如颜色变化的效果.下面小编教大家如何用Jquery UI制作颜色动画. 操作方法 01 先打开Sublime Text ...

  • PPT怎么制作折叠字效果

    PPT怎么制作折叠字效果 反倒是如上图所示,通过一些文字变形小技巧以及背景明暗对比做出来的3D效果更加受人追捧.在本文中,小编图文详解使用PPT制作折叠字效果的方法. 1.使用矩形和梯形绘制墙面.为了 ...

  • excel怎么制作分级菜单呢?

    今天给大家演示下EXCEL制作分级菜单的方法.最终效果如图,实现通过下拉菜单选择内容,限制其它内容输入,好了,下面我们来看看吧. 1.通过同时按 win+r 或右键方式 启动 excel,创建一个新的 ...

  • Excel怎么制作下拉列表菜单

    Excel怎么制作下拉列表菜单

    Excel是现在十分常用的办公软件之一,有些新用户不知道怎么制作下拉列表菜单,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图所示,打开电脑中的Excel文档.2. 第二步 ...

  • jquery ui slider使用 jquery ui 滑动条使用

    jquery ui slider: 拖动处理选择一个数值. 操作方法 01 <!doctype html> <html> <head> <meta chars ...

  • 如何利用搜狐快站在微信公众号上制作个性菜单？

    其实有一些方便快捷的途径,下面,我来教大家如何提高app消息推送送达数和点击率如何在微信公众号上制作个性菜单. 操作方法 01 登录 搜-狐-快-站 ,用微信登录更方便,然后建立站点并认证,在编辑器中 ...

  • PS制作折叠的Logo字体教程

    现在很多精美的网页或漂亮的字体都是用PS制作,可折叠的Logo字体深受很多人的喜爱,今天我给大家分享下怎么用PS制作折叠的Logo字体.方法并不难,只要大家按照我下面的步骤去做,很容易做出精美的Log ...