mootools折疊式選單製作

好久沒更新了...

今天來說一個折疊式選單

這一個範例是使用mootools.js的套件來實作!

以下的成品圖

再來是實作的部份

首先,你要先有mootools

如果沒檔案可以到此下載：

http://mootools.net/download

下載完成之後把放在你要呈現的目錄下

然後是你要呈現的頁面

首先在<head></head>裡面載入剛剛下載的js檔案

<SCRIPT type="text/javascript" src="mootools.js"></SCRIPT>

接下來是style的部份

一樣在<head></head>裡面加入style

body{font: 12px Arial, sans-serif;background: #fff;color: #444;overflow: -moz-scrollbars-vertical;}

p{padding: 5px 10px;color: #666;}

#container{width: 400px;margin: 20px auto;min-height: 100%; /*ie hack*/}

#content{width: 220px;margin: 0 auto;}

#wrap{width: 232px;overflow: hidden;background: #fff url("images/wrapbg.gif") repeat-y top left;}

h3{padding: 10px 0 11px 15px;margin:0;font-size:12px;font-weight:normal;color:#222;background:#efefef;cursor: pointer;border-bottom: 1px solid #fff;text-decoration: none;}

h3.toggler a{color: #666;text-decoration: none;}

h3.toggler a:hover {color: black;}

div.accordion {background: #fff url("images/accordionbg.gif") repeat-x top left;}

div.accordion ul {list-style-type: none;padding: 0;margin: 0 0 5px 0;}

div.accordion ul li {padding: 6px 0;}

div.accordion ul li a {color: #666;text-decoration: none;display: block;padding: 4px 0px 4px 20px;font-size: 90%;}

div.accordion ul li a span {padding-bottom: 10px;}

div.accordion ul li a img {border: 0;vertical-align: bottom;margin-right: 15px;}

div.accordion ul li a:hover span {text-decoration: underline;}

#top_round {height: 10px;font-size: 1px; /* ie whitespace */}

#bottom_round {height: 10px;font-size: 1px; /* ie whitespace */}

.top_dark {background: url("images/top_dark.gif") no-repeat top left;}

.top_light {background: url("images/top_light.gif") no-repeat top left;}

.bottom_dark {background: url("images/bottom_dark.gif") no-repeat top left;}

.bottom_light {background: url("images/bottom_light.gif") no-repeat top left;}

.first {padding-top: 5px;}

.last {padding-bottom: 5px;}

以上是CSS的部份

接下來是html的部份,把HTML放在你要呈現的位置

<DIV id="container">

 <DIV id="wrap">

  <DIV id="top_round" class="top_light"></DIV>

  

  <DIV id="content">

  

  <H3 class="toggler first" style="padding-top: 5px; border-bottom-color: rgb(244, 244, 244); padding-bottom: 5px; background-color: rgb(244, 244, 244); "><A href="http   www.ryanscherf.net demos accordion #section1.htm" onfocus="this.blur();" style="text-decoration: none; ">Section Title 1</A></H3>

  <DIV class="accordion" style="overflow-x: hidden; overflow-y: hidden; height: 288px; ">

  <UL>

  <LI><A href="#" onfocus="this.blur();"><IMG src="comments.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="door_open.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="computer.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="cup.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="date.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="flag_red.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="drive.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="email.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  </UL>

  </DIV>

  

  <H3 class="toggler" style="padding-bottom: 11px; border-bottom-color: rgb(255, 255, 255); background-color: rgb(239, 239, 239); "><A href="#section2" onfocus="this.blur();" style="text-decoration: none; ">Section Title 2</A></H3>

  <DIV class="accordion" style="overflow-x: hidden; overflow-y: hidden; height: 0px; ">

  <UL>

  <LI><A href="#" onfocus="this.blur();"><IMG src="date.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="flag_red.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="drive.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="email.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  </UL> 

  </DIV>

  

  <H3 class="toggler" style="padding-bottom: 11px; border-bottom-color: rgb(255, 255, 255); background-color: rgb(239, 239, 239); "><A href="#section3" onfocus="this.blur();" style="text-decoration: none; ">Section Title 3</A></H3>

  <DIV class="accordion" style="overflow-x: hidden; overflow-y: hidden; height: 0px; ">

  <UL>

  <LI><A href="#" onfocus="this.blur();"><IMG src="computer.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="cup.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="date.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  </UL> 

  </DIV>

  

  <H3 class="toggler" style="padding-bottom: 11px; border-bottom-color: rgb(255, 255, 255); background-color: rgb(239, 239, 239); "><A href="#section4" onfocus="this.blur();" style="text-decoration: none; ">Section Title 4</A></H3>

  <DIV class="accordion" style="overflow-x: hidden; overflow-y: hidden; height: 0px; ">

  <UL>

  <LI><A href="#" onfocus="this.blur();"><IMG src="comments.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="door_open.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="computer.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="cup.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="date.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="flag_red.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="drive.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  <LI><A href="#" onfocus="this.blur();"><IMG src="email.png" alt=""><SPAN>Link to other content area</SPAN></A></LI>

  </UL> 

  </DIV>

  

  <H3 class="toggler last" style="padding-bottom: 5px; border-bottom-color: rgb(239, 239, 239); background-color: rgb(239, 239, 239); "><A href="#section5" onfocus="this.blur();" style="text-decoration: none; ">Section Title 5</A></H3>

  <DIV class="accordion" style="overflow-x: hidden; overflow-y: hidden; height: 0px; "><!-- no content hack --></DIV>

  

  </DIV>

  

  <DIV id="bottom_round" class="bottom_dark"></DIV>

  </DIV>

  

</DIV>

圖片部分可以到原作者的範例中下載

原作者網址：http://www.ryanscherf.net/demos/accordion/

最後的重點是js的部份




  var stretchers = $$('div.accordion');

  stretchers.each(function(item){

  item.setStyles({'height': '0', 'overflow': 'hidden'});

  });

window.onload = function(){ //safari cannot get style if window isnt fully loaded

    

  var togglers = $$('h3.toggler');

  

  var bgFx = [];

  

  togglers.each(function(toggler, i){

  toggler.defaultColor = toggler.getStyle('background-color');

  

  //fx creation

  bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});

  });

 var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,

    

  onActive: function(toggler, i){

  bgFx[i].toColor('#f4f4f4');

  //toggler.getFirst().setStyle('color', '#000');

  toggler.getFirst().setStyle('text-decoration', 'none');

  toggler.getFirst().parentNode.setStyle('border-bottom-color', '#f4f4f4');

  toggler.getFirst().parentNode.setStyle('padding-bottom', '5px');

 // fix top and bottom images accordingly

  $('top_round').className = (i != 0) ? "top_dark" : "top_light";

  $('bottom_round').className = (i != 4) ? "bottom_dark" : "bottom_light";

  

  },

  

  onBackground: function(toggler, i){

  bgFx[i].clearTimer();

 if(i != 4) {

  toggler.getFirst().parentNode.setStyle('padding-bottom', '11px'); // reset styles

  toggler.getFirst().parentNode.setStyle('border-bottom-color', '#fff');

  }

  else {

  toggler.getFirst().parentNode.setStyle('padding-bottom', '5px');

  toggler.getFirst().parentNode.setStyle('border-bottom-color', '#efefef');

  }

  

  toggler.setStyle('background-color', toggler.defaultColor);

  toggler.getFirst().setStyle('text-decoration', 'none');

  //toggler.getFirst().setStyle('color', '#666');

  }

  

  });

  

  //anchors

  function checkHash(){

  var found = false;

  $$('h3.toggler a').each(function(link, i){

  if (window.location.hash.test(link.hash)){

  myAccordion.showThisHideOpen(i);

  found = true;

  }

  });

  return found;

  }

 if (!checkHash()) myAccordion.showThisHideOpen(0);

};

try {

  Window.disableImageCache();

  }catch(e){}

這樣就完成折疊式選單的製作了!!

PHP、ASP、C、VB - FU程式學習日記

2009年1月20日星期二