יצירת תפריט 'פופ-אפ'

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

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

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

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

1
2
3
4
5
6

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

1
2
3
4
5
6
7

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

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
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:[email protected]">Sales</a><br>
            <a href="mailto:[email protected]">Marketing</a><br>
            <a href="mailto:[email protected]">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>

תגיות: CSS, JS, menu, תפריט

יצירת תפריט 'פופ-אפ'

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

עוד בנושא זה

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

תגיות