יצירת תפריט ‘פופ-אפ’

‏ • 27 בנובמבר, 2003


במאמר זה אדגים ואסביר איך לבנות תפריט דינאמי פשוט ב javascript אין צורך בידע גדול או בנסיון עשיר בJavascript ,CSS או HTML, אבל דרוש לפחות ידע בסיסי.
הרעיון הוא פשוט, יוצרים טבלה עם שורה אחת ו 4 תאים, בכל תא יש מילהלינק ועוד אלמנט נסתר, וכשעוברים על התא רואים את האלמנט שנמצא בו. כאשר יוצאים מהתא, התפריט נעלם. פשוט לא?

אז איפה מתחילים?


קודם כל ניצור פונקציה ב Javascript (DHTML), שתבדוק האם רואים את התפריט? אם כן אז היא תעלים אם לא אז היא תראה! וכל פעם שנצטרך להראותלהעלים את הטבלה נקרא לה,






1
2
3
4
5
6  




<script language=”javascript”>
function showHideTable(menuId){
    var obj=document.getElementById(menuId)
    obj.style.visibility=(obj.style.visibility==“visible”?“hidden”:“visible”)
}
</script>


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






1
2
3
4
5
6
7  




<style>
div.menu
{
position:absolute;
visibility:hidden
}
</style>


זאת הטבלה שהמשתמש יראה כשהוא נכנס לאתר:






1
2
3
4
5
6
7
8
9  




<table width=“100%”>
<tr>
            <td><a href=“home.html”>Home</a></td>
            <td><a href=“products.html”>Products</a></</td>
            <td><a href=“contacts.html”>Contacts</a></</td>
            <td><a href=“search.html”>Search</a></</td>
        </tr>
</table>



עכשיו נוסיף לכל תא DIV בשביל התפריט, לדוגמה:






1
2
3
4
5
6
7
8  




<td>
<a href=“products.html”>products</a>
<div class=“menu” id=“products”>
            <a href=“page1.html”>prod 1</a><br>
            <a href=“page2.html”>prod 2</a><br>
            <a href=“page3.html”>prod 3</a><br>
        </div>
</td>


שימו לב שבגלל הclass ה-DIV יהיה בלתי ניראה.
ונתנו לו id זהה למילה שמופיעה מעליו, על מנת שנוכל לקרוא לפונקציה.
אותו דבר נעשה לגבי כל התאים בטבלה הראשית

עכשיו יש לנו טבלה עם 4 תאים שבכל אחד מהם יש DIV בלתי ניראה, מה עשינו בזה אם אי אפשר לראות את התפריטים? אז בדיוק על זה רציתי לדבר איתכם..

נשתמש ב events של DHTML, onmouseover ו onmouseout (ניץן לעשות זאת גם עם קליק או כל ארוע אחר..)

נוסיף לכל תג <td> שבטבלה הראשית onmouseover שיקרא לפונקציה ההיא שבנינו מקודם, זוכרים? נוסיף גם onmouseout שתתבצע כאשר המשתמש יוריד את העכבר מהטבלה אז הפונקציה תעלים את התפריט.






1  



<td onmouseover=“showHideTable(‘products’)” onmouseout=” showHideTable(‘products’)”>


זהו, זה כל הסיפור.. נכון פשוט? עכשיו צריך רק לעצב ולשנות לפי המצברוח

הקוד המלא:






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51  




<html>
<head>
<script language=”javascript”>
function showHideTable(menuId){
    var obj=document.getElementById(menuId)
    obj.style.visibility=(obj.style.visibility==“visible”?“hidden”:“visible”)
}
</script>

<style>
div.menu
{
position:absolute;
visibility:hidden
}
</style>
</head>
<body>
<table>
    <tr>
        <td>
        <a href=“home.html”>Home</a>
        </td>
        <td onmouseover=“showHideTable(‘products’)” onmouseout=“showHideTable(‘products’)”>
        <a href=“products.html”>Products</a><br>
        <div class=“menu” id=“products”>
            <a href=“page1.html”>prod 1</a><br>
            <a href=“page2.html”>prod 2</a><br>
            <a href=“page3.html”>prod 3</a><br>
        </div>
        </td>
        <td onmouseover=“showHideTable(‘contacts’)” onmouseout=“showHideTable(‘contacts’)”>
        <a href=“contacts.html”>contacts</a><br>
        <div class=“menu” id=“contacts”>
            <a href=“mailto:shlomi@www.com”>Sales</a><br>
            <a href=“mailto:yoav@www.com”>Marketing</a><br>
            <a href=“mailto:david@www.com”>Management</a><br>
        </div>
        </td>
        <td onmouseover=“showHideTable(‘search’)” onmouseout=“showHideTable(‘search’)”>
        <a href=“search.html”>search</a><br>
        <div class=“menu” id=“search”>
            <a href=“search.asp?keyword=book”>Books</a><br>
            <a href=“search.asp?keyword=block”>Building Blocks</a><br>
            <a href=“search.asp?keyword=computer”>Computers</a><br>
        </div>
        </td>
    </tr>
</table>
</body>
</html>


תגיות: , , ,

תגובות בפייסבוק