一個(gè)簡潔型伸縮菜單

2024-09-05 12:20:03

字體：大中小

供稿：網(wǎng)友

一個(gè)簡潔型伸縮菜單，黑色超酷風(fēng)格，簡約實(shí)用，喜歡簡潔的朋友可以試用一下哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一個(gè)簡潔型伸縮菜單</title><style type="text/css">*{margin:0; padding:0;}body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}#box{width:200px; border:1px solid #ccc;}.title{ font-size:12px; padding-left:3px; height:20px; border-bottom:1px solid #fff; background:#000; line-height:20px; color:#FFF; cursor:pointer;}.content{ padding:5px; height:150px;}</style><script type="text/javascript">function flexMenu(id){ var $id = document.getElementById(id); var titleList = $id.getElementsByTagName('h2'); var contentList = $id.getElementsByTagName('div'); titleList[titleList.length-1].style.border = 'none'; for(var i=0;i<titleList.length;i++) {     titleList[i].onclick = function()  {   for(var a=0;a<contentList.length;a++)   {    contentList[a].style.display = 'none';   }   if(this.nextSibling.nodeType=='3')   {    this.nextSibling.nextSibling.style.display = '';   }else   {    this.nextSibling.style.display = '';   }  } }}window.onload = function(){ flexMenu('box')}</script></head><body><div   class="iwvjtn8m0"   id="box"> <h2 class="title">網(wǎng)站總導(dǎo)航</h2>     <div   id="iwvjtn8m0"   class="content" > 網(wǎng)站首頁</div>    <h2 class="title">網(wǎng)頁特效</h2>    <div   id="iwvjtn8m0"   class="content" style="display:none;">網(wǎng)頁特效</div>    <h2 class="title">源代碼下載</h2>    <div   id="iwvjtn8m0"   class="content" style="display:none;">電子教程</div></div></body></html>

上一篇：類似Vista樣式的純CSS導(dǎo)航條

下一篇：帶缺口的CSS導(dǎo)航欄