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

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

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

<span style="font-size:18px;"><!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>实验10-3 jQuery UI</title>
	<link rel="stylesheet" href="jquery-ui.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><span>One</span></a></li>
    <li><a href="#fragment-2" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><span>Two</span></a></li>
    <li><a href="#fragment-3" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><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>

效果如下：

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

二级菜单的效果：

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

点击其他菜单项可进行切换，如：

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

当然也可以修改成：

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>实验10-3 jQuery UI</title>
	<link rel="stylesheet" href="jquery-ui.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><span>One</span></a></li>
    <li><a href="#fragment-2" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><span>Two</span></a></li>
    <li><a href="#fragment-3" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><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>

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

继续阅读

推荐一些有用的网站一键分享制作网站小图标插件网站seo 相关的网站地图 api二维码相关

初学web前端开发需要掌握什么

前端开发技术汇总

如何正确的去学习web前端开发？

Jeecg-Boot 2.4.0版部署后无法加载验证码问题Provisional headers are shown Failed to load response data

jQuery实现Ajax通讯的几种常用方式

jqGrid的使用笔记：5. 事件

jQuery实现百度搜索框

聊一聊Swagger-UI的那些事情软件简介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的升级版的UI

javascript console对象解读

2010年终总结--技术篇

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

JQuery--dom捕获html元素

JavaScript的那些坑之事件代理事件代理事件阶段

jquery_126_demo