מפת אתר צבעונית בעזרת jQuery

 

בתור בוני אתרים אנחנו נתקלנו לא פעם אחת בצורך ליצירת מפת אתר, אם זו מפת אתר XML או מפת אתר מעוצבת. הסיבות לבניית מפות אתר הם מגוונות, סיפוק מנועי החיפוש ועזרה לגולש בניווט באתר. למרות שהצורך המקורי ליצירת מפות אתר היה דווקא השני (עזרה למנווט באתר), היום כמעט ולא נראה גולשים מנווטים דרך מפת האתר. אם את שואלים מה הסיבה לכך, לדעתי, מפות אתר פשוט לא ידיותיות למשתמש. בסרטון ההדכה שאני אתן לכם היום אני מסביר איך להוסיף קוד jQuery דינמאי ופשוט, על-מנת ליצור מפת אתר ידודתית יותר ומסודרת יותר. את המדריך הזה לקחתי מכריס קויר מאתר css-tricks, שפרסם מאמר על הטכניקה הזו באתר Smashing Magazine.

ברשותכם חילקתי את הסרטון לשני חלקים, כל חלק כ-5 דקות:

להלן התכנים שהוסברו בסרטון:

HTML

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
   <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1255"> 
    <link rel="stylesheet" href="../demoStyle.css" type="text/css" media="screen, projection">
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/></script>
    <style type="text/css">
    *      { margin: 0; padding: 0; }
        body   { font: 14px Georgia, serif; background: #222; }

        h1,p   {color:#e6e6e6;}

        a                   { text-decoration: none; color: #eee; display: block; padding: 4px 0;}
        a:hover             { text-decoration: underline;color: #eee; }

        ul{
            padding: 8px 25px;
            list-style: none;
            background: #282828;
        }
        ul ul               { background: #393939; }
        ul ul ul            { background: #4b4b4b; }
        ul ul ul ul         { background: #5a5a5a; }
    </style>
    <script src="js/jquery.color.js" type="text/javascript"></script>
    <script src="js/sitemap.js" type="text/javascript"></script>
</head>
<body>
<div class="push-2">
   <ul>
      <li>
        <a href="/category/בניית_אתרים">בניית אתרים</a>
        <ul>
          <li>
            <a href="/tag/html-5">HTML 5</a>
            <ul>
              <li><a href="/2009/10/26/html-5-מה-נכנס-ומה-יוצא-חלק-א/">HTML 5 – מה נכנס ומה יוצא? – חלק א'</a></li>
              <li>
                <a href="/category/חדשות/">הרצאות</a>
                <ul>
                  <li><a href="/2009/11/13/סיכום-של-יום-השימושיות/">כנס יום ה-Usability</a></li>
                  <li><a href="/2009/09/28/סיכום-מפגש-העשרה-של-איגוד-האינטרנט-היש">סיכום מפגש העשרה של איגוד האינטרנט הישראלי 2009</a></li>
                </ul> <!-- END הרצאות -->
              </li>
              <li><a href="/2009/10/26/html-5-מה-נכנס-ומה-יוצא-חלק-ב/">HTML 5 – מה נכנס ומה יוצא? – חלק ב' </a></li>
            </ul> <!-- END HTML 5 -->
          </li>
          <li><a href="/2009/09/22/ולידציה-נעה-לשליחת-טפסים/">ולידציה נעה לשליחת טפסים</a></li>
          <li><a href="/2009/10/25/קוד-קצר-להצגת-תוכן-תיקייה">קוד קצר להצגת תוכן תיקייה</a></li>
          <li>
            <a href="/tag/jquery/">jQuery</a>
            <ul>
              <li><a href="/2009/10/21/תיבת-הצעות-לשורת-טקסט-בעזרת-תוסף-json-ו-jquery">תיבת הצעות לשורת טקסט בעזרת תוסף JSON ו-jQuery</a></li>
              <li><a href="/2009/10/22/הפיכת-טופס-לתהליך-הרשמה/">הפיכת טופס לתהליך הרשמה</a></li>
              <li><a href="/2009/10/14/שיתוף-תכנים-בגרירה">שיתוף תכנים בגרירה</a></li>
              <li><a href="/2009/09/30/היפוך-של-אנגלית-לעברית-באמצעות-ajax">היפוך של אנגלית לעברית באמצעות AJAX</a></li>
            </ul> <!-- END jQuery -->
          </li>
          <li><a href="/2009/09/19/שינוי-כתובות-עם-mod_rewrite">שינוי כתובות עם mod_rewrite</a></li>
          <li><a href="/2009/09/23/יישום-שינוי-כתובות-עם-mod_rewrite-פרק-ב/">יישום שינוי כתובות עם mod_rewrite – פרק ב'</a></li>
          <li><a href="/2009/09/17/fusion-charts-דרך-יפה-להציג-נתונים/">Fusion Charts – דרך יפה להציג נתונים </a></li>
        </ul> <!-- END בניית אתרים -->
      </li>
      <li><a href="/category/עיצוב_אתרים/">עיצוב אתרים</a></li>
      <li><a href="/category/חדשות/">חדשות</a></li>
      <li><a href="/category/המלצות/">המלצות</a></li>
    </ul>
</div>
   
</body>
</html>

JavaScipt – sitemap.js

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
$(function(){
    $("ul").css("opacity","0.7");
   
    $("ul").doFade({ fadeColor : "#362b40"});
    $("ul ul").doFade({ fadeColor : "#354668"});
    $("ul ul ul").doFade({ fadeColor : "#304531"});
    $("ul ul ul ul").doFade({ fadeColor : "#72352d"});
});

jQuery.fn.doFade = function(settings) {

   settings = jQuery.extend({
      fadeColor: "black",
      duration: 200,
      fadeOn: 0.95,
      fadeOff: 0.7
   }, settings);

    var duration = settings.duration;
    var fadeOff = settings.fadeOff;
    var fadeOn = settings.fadeOn;
    var fadeColor = settings.fadeColor;
   
$(this).hover(function(){
    $(this)
        .stop()
        .data("origColor", $(this).css("background-color"))
        .animate({
            opacity: fadeOn,
            backgroundColor: fadeColor
        },duration)
    }, function() {
      $(this)
        .stop()
        .animate({
            opacity: fadeOff,
            backgroundColor: $(this).data("origColor")
        },duration)
        });

};
שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון