מה שגורם לכל התפריט לא להופיע הוא הקוד style:none שגורם לתפריט לא להיטען בכניסה של גולש. הוא ייטען רק בלחיצה.

שלב שני:

פונקציית ה javascript:

הוסף את קוד ה javascript בראש הדף בתוך תגית ה head בכדי להוסיף את הפונקצייה של הצגה / הסתרה של אלמנט html עם שימוש ב css.

<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>

פונקציית ה showElement גורמת לערך ה css להשתנות ל block כאשר מישהו לוחץ על הכפתור ובכך גורמת להצגת התפריט.

2. תפריט עם Mootools

התפריט הזה יוצר אפקט גלישה פנימה / החוצה של לתפריט באמצעות MooTools

שלב ראשון:

קוד html

<a href="#" class=&שquot;button" id="toggle"><span>Click Here</span></a>

<ul id="v-menu" class="v-menu">
<li><a href="p1.html">טכנולוגיה</a></li>
<li><a href="http://www.styleffect.co.il/">עיצוב</a></li>
<li><a href="p3.html">מוזיקה</a></li>
<li><a href="p4.html">מדריכים</a></li>
<li><a href="p5.html">תכנות</a></li>


</ul>

כל מה שצריך זה להוסיף ID שיציג / יסתיר את התפריט. לא צריך את הערך display:none שישתמשנו בו מקודם, מכיוון שהפעם נעשה זאת באמצעות פונקציית ה Hide של MooTools שנכניס בקוד ה javascript בשלב הבא…

שלב שני:

קוד javascript

דבר ראשון נוסיף קישור ל MooTools בתגית ה head של הדף בעזרת הקוד הבא:

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

ואת הקוד הבא נוסיף אחרי קוד ה javascript הקודם מהתפריט הראשון:

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu= new Fx.Slide('v-menu2');
myMenu.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
myMenu.toggle();
e.stop();
});
});
</script>

כאשר מישהו לוחץ על הכפתור התפריט יופיע עם אפקט כגלישה פנימה אנכי נחמד, הפונקציה מחביאה את התפריט שהדף נטען ולכן לא צריך את display:none מהתפריט הקודם.

זהו, תודה שהקשבתם.

את קוד המקור אפשר להוריד מראש הדף בלחיצה על הכפתו הורד קוד מקור או להציג את מה שיצרנו בלחיצה על הצג דוגמא.

כדי לשנות את מה שהקישורים בכפתורים רק צריך לשנות בקובץ ה html שבקוד המקור, לדוגמא

מוזיקה תשנו למה שאתם רוצים שיהיה כתוב ואת הקישור משנים בקוד שבתוך המרכאות אחרי ה –  href= כמו ששיניתי את אני את אחד בתפריט השני את הקישור של העיצוב שיגיע לאתר www.styleffect.co.il במקום פשוט תרשמו את הדף אליו תרצו לקשר.

אפשר לשחק עם העיצוב ולהתאים אותו לצבע האתר שלכם, דרך ה css שבקובץ ה html.