jQuery UI的简单使用，轻松实现二级菜单

最新推荐文章于 2024-05-06 21:09:29 发布
最新推荐文章于 2024-05-06 21:09:29 发布
阅读量4.6k 收藏 2
点赞数
分类专栏： Web前端 文章标签： jquery jquery ui 二级菜单 百叶窗效果 Tab导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15096707/article/details/51504822
版权

jQuery UI 的API手册地址：http://api.jqueryui.com/

       jQuery UI 实现百叶窗效果、菜单、Tab导航；最后组合 百叶窗效果 + 菜单，实现二级菜单。案例如下：

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实验10-3 jQuery UI</title>
	<link rel="stylesheet" href="jquery-ui.min.css" type="text/css"/>
	<style>
		html {
  			-moz-osx-font-smoothing: grayscale;
  			-webkit-font-smoothing: antialiased;
  			text-rendering: optimizeLegibility;
		}

		body {
			padding: 20px 30px 200px;
		}
		.title {
			text-indent: 2em;
			/* color: transparent;
			   			text-shadow: 0 0 1px rgba(0,0,0,0.5); */
		}
	</style>
</head>
<body>
	<h2 class="title">1.百叶窗效果</h2>
	<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  </div>

  <h2 class="title">2.菜单</h2>
  <ul id="menu" style="width:100px;">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
    <ul>
      <li>
        <div>Item 3-1</div>
      </li>
      <li>
        <div>Item 3-2</div>
      </li>
      <li>
        <div>Item 3-3</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Item 4</div>
  </li>
  <li>
    <div>Item 5</div>
  </li>
	</ul>

	<h2 class="title">3.Tab导航</h2>
	<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

<h2 class="title">4.组合 百叶窗效果 + 菜单 => 实现二级菜单的制作</h2>
<div class="accordion">
  <h3>Section 1</h3>
  <div>
    <ul class="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
  <li>
    <div>Item 4</div>
  </li>
  <li>
    <div>Item 5</div>
  </li>
	</ul>
  </div>
  <h3>Section 2</h3>
  <div>
    <ul class="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
	</ul>
  </div>
  <h3>Section 3</h3>
  <div>
    <ul class="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
  <li>
    <div>Item 4</div>
  </li>
	</ul>
  </div>
  </div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<script>

		//初始化 百叶窗效果
		$( "#accordion" ).accordion({
			active: 2,
			animate: 200,
			classes: {
    			"ui-accordion": "highlight"
  			},
  			/*disabled: true,*/
  			heightStyle: "fill",
  			icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
		});

		//初始化 菜单
		$( "#menu" ).menu({
			classes: {
			    "ui-menu": "highlight"
  			},
  			position: { my: "left top", at: "right-5 top-5" }
		});

		//初始化 Tab导航
		$( "#tabs" ).tabs();

		//组合 百叶窗效果 + 菜单 => 实现二级菜单的制作
		$( ".accordion>h3" ).css('padding', ".8em");
		$( ".accordion>h3" ).css('padding-left', "2em");
		$( ".accordion>div" ).css('padding', 0);
		$( ".accordion" ).accordion({
			heightStyle: "content"
		});
		$( ".menu>li>div" ).css('padding', 8);
		$( ".menu" ).menu();
	</script>
</body>
</html></span>
效果如下：

二级菜单的效果：
点击其他菜单项可进行切换，如：

       当然也可以修改成： 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实验10-3 jQuery UI</title>
	<link rel="stylesheet" href="jquery-ui.min.css" type="text/css"/>
	<style>
		html {
  			-moz-osx-font-smoothing: grayscale;
  			-webkit-font-smoothing: antialiased;
  			text-rendering: optimizeLegibility;
		}

		body {
			padding: 20px 30px 200px;
		}
		.title {
			text-indent: 2em;
			/* color: transparent;
			   			text-shadow: 0 0 1px rgba(0,0,0,0.5); */
		}



    /* 组合 百叶窗效果 + 菜单 => 实现二级菜单的制作 */
    .accordion>h3 {
      padding: .8em;
      padding-left: 2em;
    }
    .accordion>div {
      padding: 0 !important;
      overflow: hidden !important;
    }
    .menu>li>div {
      padding: 8px;
    }

	</style>
</head>
<body>
	<h2 class="title">1.百叶窗效果</h2>
	<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
    condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
    Nam mi. Proin viverra leo ut odio.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  </div>

  <h2 class="title">2.菜单</h2>
  <ul id="menu" style="width:100px;">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
    <ul>
      <li>
        <div>Item 3-1</div>
      </li>
      <li>
        <div>Item 3-2</div>
      </li>
      <li>
        <div>Item 3-3</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Item 4</div>
  </li>
  <li>
    <div>Item 5</div>
  </li>
	</ul>

	<h2 class="title">3.Tab导航</h2>
	<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

<h2 class="title">4.组合 百叶窗效果 + 菜单 => 实现二级菜单的制作</h2>
<div class="accordion">
  <h3>Section 1</h3>
  <div>
    <ul class="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
  <li>
    <div>Item 4</div>
  </li>
  <li>
    <div>Item 5</div>
  </li>
	</ul>
  </div>
  <h3>Section 2</h3>
  <div>
    <ul class="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
	</ul>
  </div>
  <h3>Section 3</h3>
  <div>
    <ul class="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>
    <div>Item 2</div>
  </li>
  <li>
    <div>Item 3</div>
  </li>
  <li>
    <div>Item 4</div>
  </li>
	</ul>
  </div>
  </div>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<script>

		//初始化 百叶窗效果
		$( "#accordion" ).accordion({
			active: 2,
			animate: 200,
			classes: {
    			"ui-accordion": "highlight"
  			},
  			/*disabled: true,*/
  			heightStyle: "fill",
  			icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
		});

		//初始化 菜单
		$( "#menu" ).menu({
			classes: {
			    "ui-menu": "highlight"
  			},
  			position: { my: "left top", at: "right-5 top-5" }
		});

		//初始化 Tab导航
		$( "#tabs" ).tabs();


    //组合 百叶窗效果 + 菜单 => 实现二级菜单的制作
		$( ".accordion" ).accordion({
			heightStyle: "content"
		});
		$( ".menu" ).menu();
	</script>
</body>
</html>
葡萄干是个程序员
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂亮的jquery UI 渐变二级下拉导航菜单
11-10
漂亮的jquery UI 渐变二级下拉导航菜单
bootstrap实现二级下拉菜单效果
08-28
Bootstrap 实现二级下拉菜单效果 Bootstrap 是一个流行的前端框架，提供了许多...使用 Bootstrap 实现二级下拉菜单效果非常简单和方便。 Bootstrap 提供了许多实用的 UI 组件和工具，帮助我们快速构建复杂的应用程序。
jquery实现菜单切换
爱.NET
11-23 156
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; ..
【菜单下拉效果】基于jquery实现二级菜单下拉效果（附完整源码下载）
最新发布
赏樱看雪撸代码
05-06 1161
html菜单下拉特效，js实现二级菜单下拉效果，Js如何实现菜单下拉效果，js特效二级菜单实现，基于jquery实现菜单下拉功能，菜单下拉特效如何实现。
用jquery生成二级菜单的实例代码
AI开源工具分享
11-05 1033
这篇文章介绍了用jquery生成二级菜单的代码，需要的朋友可以参考一下 javascript 页面中的函数  复制代码代码如下: function querySub(id,sid/*选中的项*/){ $.post('${path}/page/article/querySubChannelArticle.action',                 
JQuery UI的简单使用
qq_36074044的博客
08-28 280
UI继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。 jquery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，您可以使用它创建高度交互的 Web 应用程序。 简单而言UI可以实现在网页上的一些效果 比如拖动按钮  引入需要的控件： link rel="stylesheet" href="//c
Jquery结合CSS实现简单的二级菜单
yaly200的博客
09-20 189
下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码。于是博客就用jquery+css实现简单二级下拉菜单导航。 第一步：确定导航的html格式 <ul id="nav"> ...
jquery二级下拉菜单导航代码13
06-05
良好的UI设计，经典二级下拉菜单，不仅节省了你写代码的时间，还有可能节省了你的设计时间。懒人之家重点推荐导航
jquery二级下拉菜单导航代码12
06-05
jquery经典二级下拉菜单导航，良好的UI设计，懒人之家推荐下载
jquery二级下拉菜单导航代码21
06-05
jquery经典导航，懒人之家重点推荐，推荐的原因：漂亮的UI设计效果
jquery写二级菜单
bachou1292的博客
09-23 314
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul ul {display: none;} </style> </head> &lt...
漂亮的jquery_UI_渐变二级下拉导航菜单
05-29
漂亮的jquery_UI_渐变二级下拉导航菜单
基于jQuery实现的菜单切换效果
12-28
这是一个非常流畅的菜单展示效果，应用在亚马逊上，当你上下移动鼠标的时候，二级菜单会非常轻快的切换，没有任何延时，给用户如滑丝般的感觉。这种效果借助于一款jQuery插件menu-aim，本文将结合实例讲解如何实现速度超快的菜单效果。 HTML 首先建立主菜单，我们借用电商网站常见的商品分类。其html结构代码如下，其中我们用到了html5的data-submenu-id属性设置，这在插件调用时非常有用。 <li data-submenu-id=submen
用jquery UI实现的手风琴菜单、折叠菜单
08-29
用jquery UI实现的手风琴菜单、折叠菜单
jquery+css实现侧边导航栏效果
12-11
最近做项目的时候，突然想用一个侧边导航栏，网上找了几个插件，有的太丑而且不太符合我的预期。与其修改别人的代码，不如自己来写一个了。废话不多说先上图，感兴趣的请继续看下去。 1、效果图 　　 当有顶部导航栏的时候侧边导航栏会消失。 响应式方面，同样的顶部导航栏消失后右下角的图标才出现。点击出现导航，选中后消失； 这里是个demo ，没有做平滑滚动，需要的可以自己加上。 大体就介绍这么多吧，下面上代码。 2、css代码 这里是css代码，详情请看注释 <style> /*重置一些样式*/ *, *::after, *::before { box-sizing: border-
jquery下拉菜单select二级菜单导航
06-05
select下拉菜单，逐渐展开，展开后还可以分为二级
Jquery二级菜单的显示
ljh_learn_from_base的博客
05-31 1140
page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> DOCTYPE html> head> title>二级菜单练习title> script type="text/javascript" src="/AAA/js/jquery-1.8.3.js"
利用jquery ui实现微信底部的二级下拉菜单
sxf359的博客
05-07 1326
近日在进行一个网站微信网页开发的时候需要实现在微信底部二级下拉菜单，此菜单非微信自定义的二级菜单。由于使用了jquery weui插件，先在上面找，jquery weui中没有现成的组件可以使用。自己开发，想想还是算了，在网上找吧。找到一个使用jquery ui插件的，其自带有menu组件，可以轻松实现二级菜单。引用了jquery ui插件的js，及css文件后写了底部实现的html代码：
巧用ui.tabs.js生成二级菜单
技术回归
08-22 146
利用ui.tabs.js生成一级菜单，一般都很简单。 不过实际应用中，二级菜单更具备实用性，用ui.tabs.js达到目的也很简单。 以下示例在jquery1.3.2和jquery ui1.7.2中通过。   javascript导入如下： &lt;script language="javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&...
jquery实现二级菜单
11-18
以下是使用jQuery实现二级菜单的代码： ```html <!DOCTYPE html> <title>jQuery实现二级菜单 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> ul { list-style: none; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值