ایجاد منو یا پنل جمع شونده (CollapsiblePanel) را به کمک جاوا اسکریپت و نرم افزارDreamweaver ؛
روش های زیادی برای ایجاد جلوه های ویژه و انعطاف پذیر در صفحات وب وجود دارد، از جمله استفاده از کتابخانه های جی کوئری (jquery)، موتولز(mootools)، فایل های فلش (flash) و...
اما حرفه ای تر ها در وب، همیشه به دنبال کم حجم ترین و در عین حال سازگارترین کدها هستند!
کدی که معرفی میشه در عین سبکی از قابلیت سازگاری خوبی با مرورگرهای استاندارد برخورداره
و در کنار کدهای جاوا اسکریپت قابلیت ایجاد تعییرات سفارشی از طریق ویرایش فایل css نیز وجود دارد که می توانید بر اساس سلیقه خودتان آن را تنظیم کنید.
استفاده از قابلیت Spry در دریم ویور
برای ایجاد این باکس یا پنل از قابلیت Spry در نرم افزار معروف و قدرتمند دریم ویور (Dreamweaver) استفاده شده
با این تفاوت که موارد اضافه و غیر ضروری ، جهت کم حجم کردن کد، حذف شده، نمای کلی کد به شکل زیر :
HTML:
<!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> باکس جمع شونده</title>
<script type="text/javascript">
(function(){if(typeof Spry=="undefined")window.Spry={};if(!Spry.Widget)Spry.Widget={};Spry.Widget.CollapsiblePanel=function(a,b){this.element=this.getElement(a);this.focusElement=null;this.hoverClass="CollapsiblePanelTabHover";this.openClass="CollapsiblePanelOpen";this.closedClass="CollapsiblePanelClosed";this.focusedClass="CollapsiblePanelFocused";this.enableAnimation=true;this.enableKeyboardNavigation=true;this.animator=null;this.hasFocus=false;this.contentIsOpen=true;this.openPanelKeyCode=Spry.Widget.CollapsiblePanel.KEY_DOWN;this.closePanelKeyCode=Spry.Widget.CollapsiblePanel.KEY_UP;Spry.Widget.CollapsiblePanel.setOptions(this,b);this.attachBehaviors()};Spry.Widget.CollapsiblePanel.prototype.getElement=function(a){if(a&&typeof a=="string")return document.getElementById(a);return a};Spry.Widget.CollapsiblePanel.prototype.addClassName=function(a,b){if(!a||!b||(a.className&&a.className.search(new RegExp("\\b"+b+"\\b"))!=-1))return;a.className+=(a.className?" ":"")+b};Spry.Widget.CollapsiblePanel.prototype.removeClassName=function(a,b){if(!a||!b||(a.className&&a.className.search(new RegExp("\\b"+b+"\\b"))==-1))return;a.className=a.className.replace(new RegExp("\\s*\\b"+b+"\\b","g"),"")};Spry.Widget.CollapsiblePanel.prototype.hasClassName=function(a,b){if(!a||!b||!a.className||a.className.search(new RegExp("\\b"+b+"\\b"))==-1)return false;return true};Spry.Widget.CollapsiblePanel.prototype.setDisplay=function(a,b){if(a)a.style.display=b};Spry.Widget.CollapsiblePanel.setOptions=function(a,b,d){if(!b)return;for(var c in b){if(d&&b[c]==undefined)continue;a[c]=b[c]}};Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver=function(a){this.addClassName(this.getTab(),this.hoverClass);return false};Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut=function(a){this.removeClassName(this.getTab(),this.hoverClass);return false};Spry.Widget.CollapsiblePanel.prototype.open=function(){this.contentIsOpen=true;if(this.enableAnimation){if(this.animator)this.animator.stop();this.animator=new Spry.Widget.CollapsiblePanel.PanelAnimator(this,true,{duration:this.duration,fps:this.fps,transition:this.transition});this.animator.start()}else this.setDisplay(this.getContent(),"block");this.removeClassName(this.element,this.closedClass);this.addClassName(this.element,this.openClass)};Spry.Widget.CollapsiblePanel.prototype.close=function(){this.contentIsOpen=false;if(this.enableAnimation){if(this.animator)this.animator.stop();this.animator=new Spry.Widget.CollapsiblePanel.PanelAnimator(this,false,{duration:this.duration,fps:this.fps,transition:this.transition});this.animator.start()}else this.setDisplay(this.getContent(),"none");this.removeClassName(this.element,this.openClass);this.addClassName(this.element,this.closedClass)};Spry.Widget.CollapsiblePanel.prototype.onTabClick=function(a){if(this.isOpen())this.close();else this.open();this.focus();return this.stopPropagation(a)};Spry.Widget.CollapsiblePanel.prototype.onFocus=function(a){this.hasFocus=true;this.addClassName(this.element,this.focusedClass);return false};Spry.Widget.CollapsiblePanel.prototype.onBlur=function(a){this.hasFocus=false;this.removeClassName(this.element,this.focusedClass);return false};Spry.Widget.CollapsiblePanel.KEY_UP=38;Spry.Widget.CollapsiblePanel.KEY_DOWN=40;Spry.Widget.CollapsiblePanel.prototype.onKeyDown=function(a){var b=a.keyCode;if(!this.hasFocus||(b!=this.openPanelKeyCode&&b!=this.closePanelKeyCode))return true;if(this.isOpen()&&b==this.closePanelKeyCode)this.close();else if(b==this.openPanelKeyCode)this.open();return this.stopPropagation(a)};Spry.Widget.CollapsiblePanel.prototype.stopPropagation=function(a){if(a.preventDefault)a.preventDefault();else a.returnValue=false;if(a.stopPropagation)a.stopPropagation();else a.cancelBubble=true;return false};Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers=function(){var d=this.getTab();if(!d)return;var c=this;Spry.Widget.CollapsiblePanel.addEventListener(d,"click",function(a){return c.onTabClick(a)},false);Spry.Widget.CollapsiblePanel.addEventListener(d,"mouseover",function(a){return c.onTabMouseOver(a)},false);Spry.Widget.CollapsiblePanel.addEventListener(d,"mouseout",function(a){return c.onTabMouseOut(a)},false);if(this.enableKeyboardNavigation){var f=null;var g=null;this.preorderTraversal(d,function(a){if(a.nodeType==1){var b=d.attributes.getNamedItem("tabindex");if(b){f=a;return true}if(!g&&a.nodeName.toLowerCase()=="a")g=a}return false});if(f)this.focusElement=f;else if(g)this.focusElement=g;if(this.focusElement){Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement,"focus",function(a){return c.onFocus(a)},false);Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement,"blur",function(a){return c.onBlur(a)},false);Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement,"keydown",function(a){return c.onKeyDown(a)},false)}}};Spry.Widget.CollapsiblePanel.addEventListener=function(a,b,d,c){try{if(a.addEventListener)a.addEventListener(b,d,c);else if(a.attachEvent)a.attachEvent("on"+b,d)}catch(e){}};Spry.Widget.CollapsiblePanel.prototype.preorderTraversal=function(a,b){var d=false;if(a){d=b(a);if(a.hasChildNodes()){var c=a.firstChild;while(!d&&c){d=this.preorderTraversal(c,b);try{c=c.nextSibling}catch(e){c=null}}}}return d};Spry.Widget.CollapsiblePanel.prototype.attachBehaviors=function(){var a=this.element;var b=this.getTab();var d=this.getContent();if(this.contentIsOpen||this.hasClassName(a,this.openClass)){this.addClassName(a,this.openClass);this.removeClassName(a,this.closedClass);this.setDisplay(d,"block");this.contentIsOpen=true}else{this.removeClassName(a,this.openClass);this.addClassName(a,this.closedClass);this.setDisplay(d,"none");this.contentIsOpen=false}this.attachPanelHandlers()};Spry.Widget.CollapsiblePanel.prototype.getTab=function(){return this.getElementChildren(this.element)[0]};Spry.Widget.CollapsiblePanel.prototype.getContent=function(){return this.getElementChildren(this.element)[1]};Spry.Widget.CollapsiblePanel.prototype.isOpen=function(){return this.contentIsOpen};Spry.Widget.CollapsiblePanel.prototype.getElementChildren=function(a){var b=[];var d=a.firstChild;while(d){if(d.nodeType==1)b.push(d);d=d.nextSibling}return b};Spry.Widget.CollapsiblePanel.prototype.focus=function(){if(this.focusElement&&this.focusElement.focus)this.focusElement.focus()};Spry.Widget.CollapsiblePanel.PanelAnimator=function(a,b,d){this.timer=null;this.interval=0;this.fps=60;this.duration=500;this.startTime=0;this.transition=Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;this.onComplete=null;this.panel=a;this.content=a.getContent();this.doOpen=b;Spry.Widget.CollapsiblePanel.setOptions(this,d,true);this.interval=Math.floor(1000/this.fps);var c=this.content;var f=c.offsetHeight?c.offsetHeight:0;this.fromHeight=(b&&c.style.display=="none")?0:f;if(!b)this.toHeight=0;else{if(c.style.display=="none"){c.style.visibility="hidden";c.style.display="block"}c.style.height="";this.toHeight=c.offsetHeight}this.distance=this.toHeight-this.fromHeight;this.overflow=c.style.overflow;c.style.height=this.fromHeight+"px";c.style.visibility="visible";c.style.overflow="hidden";c.style.display="block"};Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition=function(a,b,d,c){a/=c;return b+((2-a)*a*d)};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start=function(){var a=this;this.startTime=(new Date).getTime();this.timer=setTimeout(function(){a.stepAnimation()},this.interval)};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop=function(){if(this.timer){clearTimeout(this.timer);this.content.style.overflow=this.overflow}this.timer=null};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation=function(){var a=(new Date).getTime();var b=a-this.startTime;if(b>=this.duration){if(!this.doOpen)this.content.style.display="none";this.content.style.overflow=this.overflow;this.content.style.height=this.toHeight+"px";if(this.onComplete)this.onComplete();return}var d=this.transition(b,this.fromHeight,this.distance,this.duration);this.content.style.height=((d<0)?0:d)+"px";var c=this;this.timer=setTimeout(function(){c.stepAnimation()},this.interval)};Spry.Widget.CollapsiblePanelGroup=function(a,b){this.element=this.getElement(a);this.opts=b;this.attachBehaviors()};Spry.Widget.CollapsiblePanelGroup.prototype.setOptions=Spry.Widget.CollapsiblePanel.prototype.setOptions;Spry.Widget.CollapsiblePanelGroup.prototype.getElement=Spry.Widget.CollapsiblePanel.prototype.getElement;Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren=Spry.Widget.CollapsiblePanel.prototype.getElementChildren;Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget=function(a,b){if(!a||!b)return;if(!a.spry)a.spry=new Object;a.spry.collapsiblePanel=b};Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget=function(a){return(a&&a.spry&&a.spry.collapsiblePanel)?a.spry.collapsiblePanel:null};Spry.Widget.CollapsiblePanelGroup.prototype.getPanels=function(){if(!this.element)return[];return this.getElementChildren(this.element)};Spry.Widget.CollapsiblePanelGroup.prototype.getPanel=function(a){return this.getPanels()[a]};Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors=function(){if(!this.element)return;var a=this.getPanels();var b=a.length;for(var d=0;d<b;d++){var c=a[d];this.setElementWidget(c,new Spry.Widget.CollapsiblePanel(c,this.opts))}};Spry.Widget.CollapsiblePanelGroup.prototype.openPanel=function(a){var b=this.getElementWidget(this.getPanel(a));if(b&&!b.isOpen())b.open()};Spry.Widget.CollapsiblePanelGroup.prototype.closePanel=function(a){var b=this.getElementWidget(this.getPanel(a));if(b&&b.isOpen())b.close()};Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels=function(){var a=this.getPanels();var b=a.length;for(var d=0;d<b;d++){var c=this.getElementWidget(a[d]);if(c&&!c.isOpen())c.open()}};Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels=function(){var a=this.getPanels();var b=a.length;for(var d=0;d<b;d++){var c=this.getElementWidget(a[d]);if(c&&c.isOpen())c.close()}}})();
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
@charset "UTF-8";
.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
}
.CollapsiblePanelTab {
font-weight:bold;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
.CollapsiblePanelContent {
margin: 0px;
padding: 4px;
}
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
/* background-color: #EFEFEF */
}
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #CCC;
}
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #3399FF;
}</style>
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">منو</div>
<div class="CollapsiblePanelContent">نمایش محتوای شما!</div>
</div>
<div id="CollapsiblePanel12" class="CollapsiblePanel">
<div class="CollapsiblePanelTab">منو</div>
<div class="CollapsiblePanelContent">نمایش محتوای شما!</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel12");
</script>
</body>
</html>