投稿
  1. 首页
  2. 随笔

HTML5怎么做出苹果折叠菜单的效果

一致b • 2023-3-19 • 随笔 • 阅读 17

HTML5怎么做出苹果折叠菜单的效果,第1张

1、在网页<head>区添加以下样式定义 ：

<style type="text/css">

#dlmenu {height:10em}

#menu {list-style-type:nonemargin:0 0 10pxpadding:0position:absolutewidth:15embackground:#fffz-index:100}

#menu li {display:blockpadding:0margin:0position:relativez-index:100}

#menu li a, #menu li a:visited {display:blocktext-decoration:none}

#menu li dd {display:none}

#menu li:hover, #menu li a:hover {border:0}

#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center centercolor:#ff0}

#menu li:hover dd, #menu li a:hover dd {display:block}

#menu li:hover dl, #menu li a:hover dl {height:20embackground:#b4be9c url(sub_grad.gif)}

#menu table {border-collapse:collapsepadding:0margin:-4pxfont-size:1em}

#menu dl {width: 15emmargin: 0background: #6f9c6fcursor:pointer}

#menu dt {margin:0padding: 0font-size: 1.1emborder-top:1px solid #cce}

#menu dd {margin:0padding:0font-size: 1emtext-align:left}

.gallery dt a, .gallery dt a:visited {display:blockcolor:#fffpadding:5px 5px 5px 10pxbackground:#949e7c url(top_grad.gif) center center}

.gallery dd a, .gallery dd a:visited {color:#000min-height:1emtext-decoration:nonedisplay:blockpadding:4px 5px 4px 20pxbackground:#b4be9c url(sub_grad.gif)}

* html .gallery dd a, * html .gallery dd a:visited {height:1em}

.gallery dd a:hover {background:#7aacolor:#ff0}

</style>

2、在网页<body>区添加菜单HTML代码

<div id="dlmenu">

<ul id="menu">

<li>

<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="gallery">

<dt><a href="../menu/index.html">DEMOS</a></dt>

<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>

<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>

<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>

<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>

<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>

<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>

<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>

<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />

<title>CSS+JavaScript三级折叠菜单</title>

<style>

*,body,ul,li,h1,h2 {

margin: 0

padding: 0

list-style: none

}

body {

font: 12px "宋体"

padding-top: 20px

}

#menu {

width: 200px

margin: auto

}

#menu h1 {

cursor: pointer

color: #FFF

font-size: 12px

padding: 5px 0 3px 10px

border: #C60 1px solid

margin-top: 1px

background-color: #F93

}

#menu h2 {

cursor: pointer

color: #777

font-size: 12px

padding: 5px 0 3px 10px

border: #E7E7E7 1px solid

border-top-color: #FFF

background-color: #F4F4F4

}

#menu ul {

padding-left: 15px

height: 100px

border: #E7E7E7 1px solid

border-top: none

overflow: auto

}

#menu ul li {

padding: 5px 0 3px 10px

}

.no {

display: none

}

</style>

<script language="JavaScript">

function ShowMenu(obj, noid) {

var block = document.getElementById(noid)

var n = noid.substr(noid.length - 1)

if (noid.length == 4) {

var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul")

var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2")

for (var i = 0i <h2.lengthi++) {

h2[i].innerHTML = h2[i].innerHTML.replace("+", "-")

h2[i].style.color = ""

}

obj.style.color = "#FF0000"

for (var i = 0i <ul.lengthi++) {

if (i != n) {

ul[i].className = "no"

}

}

} else {

var span = document.getElementById("menu").getElementsByTagName("span")

var h1 = document.getElementById("menu").getElementsByTagName("h1")

for (var i = 0i <h1.lengthi++) {

h1[i].innerHTML = h1[i].innerHTML.replace("+", "-")

h1[i].style.color = ""

}

obj.style.color = "#0000FF"

for (var i = 0i <span.lengthi++) {

if (i != n) {

span[i].className = "no"

}

}

}

if (block.className == "no") {

block.className = ""

obj.innerHTML = obj.innerHTML.replace("-", "+")

} else {

block.className = "no"

obj.style.color = ""

}

}

</script>

</head>

<body>

<div id="menu">

<h1 onClick="javascript:ShowMenu(this,'NO0')">- 一级菜单A</h1>

<span id="NO0" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO00')">- 一级菜单A_1</h2>

<ul id="NO00" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO01')">- 一级菜单A_2</h2>

<ul id="NO01" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO02')">- 一级菜单A_3</h2>

<ul id="NO02" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

<li>一级菜单A_6</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO03')">- 一级菜单A_4</h2>

<ul id="NO03" class="no">

<li>一级菜单A_0</li>

<li>一级菜单A_1</li>

<li>一级菜单A_2</li>

<li>一级菜单A_3</li>

<li>一级菜单A_4</li>

<li>一级菜单A_5</li>

<li>一级菜单A_6</li>

<li>一级菜单A_7</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO1')">- 二级菜单B</h1>

<span id="NO1" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO10')">- 二级菜单B_1</h2>

<ul id="NO10" class="no">

<li>二级菜单B_0</li>

<li>二级菜单B_1</li>

<li>二级菜单B_2</li>

<li>二级菜单B_3</li>

<li>二级菜单B_4</li>

<li>二级菜单B_5</li>

<li>二级菜单B_6</li>

<li>二级菜单B_7</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO11')">- 二级菜单B_2</h2>

<ul id="NO11" class="no">

<li>二级菜单B_0</li>

<li>二级菜单B_1</li>

<li>二级菜单B_2</li>

<li>二级菜单B_3</li>

<li>二级菜单B_4</li>

<li>二级菜单B_5</li>

<li>二级菜单B_6</li>

<li>二级菜单B_7</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO2')">- 三级菜单C</h1>

<span id="NO2" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO20')">- 三级菜单C_1</h2>

<ul id="NO20" class="no">

<li>三级菜单C_0</li>

<li>三级菜单C_1</li>

<li>三级菜单C_2</li>

<li>三级菜单C_3</li>

<li>三级菜单C_4</li>

<li>三级菜单C_5</li>

<li>三级菜单C_6</li>

<li>三级菜单C_7</li>

<li>三级菜单C_8</li>

<li>三级菜单C_9</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO21')">- 三级菜单C_2</h2>

<ul id="NO21" class="no">

<li>三级菜单C_0</li>

<li>三级菜单C_1</li>

<li>三级菜单C_2</li>

<li>三级菜单C_3</li>

<li>三级菜单C_4</li>

</ul>

</span>

<h1 onClick="javascript:ShowMenu(this,'NO3')">- 四级菜单D</h1>

<span id="NO3" class="no">

<h2 onClick="javascript:ShowMenu(this,'NO30')">- 四级菜单D_1</h2>

<ul id="NO30" class="no">

<li>四级菜单D_0</li>

<li>四级菜单D_1</li>

<li>四级菜单D_2</li>

<li>四级菜单D_3</li>

</ul>

<h2 onClick="javascript:ShowMenu(this,'NO31')">- 四级菜单D_2</h2>

<ul id="NO31" class="no">

<li>四级菜单D_0</li>

<li>四级菜单D_1</li>

<li>四级菜单D_2</li>

<li>四级菜单D_3</li>

<li>四级菜单D_4</li>

<li>四级菜单D_5</li>

</ul>

</span>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6247539.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
一致b 一致b 一级用户组
0 0
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表（0条）

保存