ראשי ⇠ שיעורים ⇠ CSS ⇠ יצירת Drop Down Menu בעזרת Suckerfish CSS

יצירת Drop Down Menu בעזרת Suckerfish CSS

פורסם ב- על ידי מנהל האתר

מה זה בעצם Suckerfish CSS ? ובכן, מדובר ביצירת תפריט נגלל, Drop Down Menu שבנוי בדרך פופולארית ומודרנית ע”י שימוש ב-CSS קל משקל בלבד תוך הקפדה על היררכיה של רשימות Lists , ז”א שימוש בתגיות UL, LI, רשימות בתוך רשימות  ושימוש ב – hover property ליצירת “ריחוף”  של תפריט נגלל.
נבנה במקור ע”י  החברה מ – A List Apart .

1.בשלב הראשון ניצור את ה – HTML , דף פשוט שמכיל רשימת UL כתפריט ניווט ובתוכה עוד רשימה פנימית. בשלב זה HTML בלבד ללא עיצוב:

<ul id="nav">
<li><a href="#">עלינו</a>
<ul>
<li><a href="#">הצוות</a></li>
<li><a href="#">תמיכה</a></li>
<li><a href="#">פיתוח</a></li>
<li><a href="#">גיבוי</a></li>
</ul>
</li>

<li><a href="#">מוצרים</a>
<ul>
<li><a href="#">מחשבים ניידים</a></li>
<li><a href="#">מחשבי שולחן</a></li>
<li><a href="#">מסכי מחשב</a></li>
<li><a href="#">עכברים</a></li>
<li><a href="#">מקלדות</a></li>
</ul>
</li>

<li><a href="#">על החנות</a>    </li>

<li><a href="#">צור קשר</a>    </li>

</ul>

2.שלב שני הוא לתת סטיילינג כללי לתפריט כרגע ללא אפקטים רק ויזואלית לייצר תפריט עליון כאשר הרשימות שבתוך הרשימות (הרשימות הפנימיות) הן יהוו את התפריט הנפתח. בשלב זה הן כולן פתוחו הנה ה – CSS בקוד:

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	direction: rtl;
	text-align: right;
}

#nav a {
	display: block;
	padding: 5px;
	color: #333333;
	text-decoration: none;
	background-color: #EEEEEE;
}

#nav li {
	float: right;
	width: 10em;
}

3.השלב האחרון הוא ליצור את האפקט של ה – Drop Down בעזרת השימוש בפרופרטי hover , יש ליצור מצב בלתי נראה לתפריט הפנימי ולהציג אותו במעבר עכבר מתחת לכפתור “האב” שלו. מן הסתם ניתן היה צורך להשתמש בערך: Display:none; על מנת לא להציג ואז בתצוגה במעבר עכבר להניח את ה-Position באחד הפרמטרים: left, right בהתאמה לזרימה שהיא במקרה שלנו מימין לשמאל אך בשל באג שהתגלה בדפדפן אופרה שמשליך את ה – Position לדף ולא לאובייקט נמצא תיקון ובמקום display: none; נשתמש בערכים הבאים להסתרה ותצוגה:

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	/*-999 מתייחס להמצאות האובייקט מחוץ לתחום המסך*/
}

#nav li:hover ul {
	left: auto;
}

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

#nav li:hover ul li a:hover{
	background-color: #333333;
	color: #FFFFFF;
}

5.מה אם אקספלורר? משום מה לא תומך בערך hover כשזה נוגע לתצוגה והסתרה בתוך רשימות ולכן נצטרך להוסיף את קוד ה Javascript הבא בדף HTML מיד לפני הסגירה של ה – HEAD של המסמך:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {

  var sfEls = document.getElementById("nav").getElementsByTagName("LI");

  for (var i=0; i<sfEls.length; i++) {

  sfEls[i].onmouseover=function() {

  this.className+=" sfhover";

  }

  sfEls[i].onmouseout=function() {

  this.className=this.className.replace(new RegExp(" sfhover\b"), "");

  }

  }

  }

  if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

דמו | הורדה

לכתבה הבאה

לכתבה קודמת

מחשבה אחת של 14 על “יצירת Drop Down Menu בעזרת Suckerfish CSS”

  4. ומה כאשר האתר כולו בכיוון של ימין לשמאל, למשל כשבBODY יש direction: rtl – במקרה כזה תווצר גלילה אופקית עם ה-CSS הנוכחי.

    הגב

  5. תודה רבה על הקוד, הייתי מאוד מאושרת ממנו עד שגיליתי את הבאג המשונה הבא: באקספלורר בלבד, כאשר מקליקים באיזשהו מקום בדף, לא משנה איפה, ואחרי זה עוברים על התפריט, הוא ישאר פתוח כל הזמן.
    אנא, הושיע!!!

    הגב

  7. סליחה ליאון, יכול להיות שהאקספלורר שלי היה מחורפן. שדרגתי אותו והכל בסדר.
    אתה יכול למחוק את ההודעות שלי, סליחה ותודה על הקוד המעולה!!!

    הגב

  9. היי מיכל
    ישנה דרך והיא להוסיף קובץ .htc
    ל – Root Folder
    קצת מסורבל. אני מציע להתחיל לוותר על ie6 לא?
    בכל אופן אם תתעקשי פרסמי מייל ואשלח לך פרטים

    גיל

    הגב

  11. תודה על הקוד גם אני הייתי מאושרת עד שראיתי שבאקספלורר יש בעיות
    1. משום התפריט שלי נשאר פתוח למרות שדמו שלך עובד יפה
    2. הוא לא מקבל רקע תמונה במקום צבע (ניסיתי לשנות ב -CSS
    3. לא הבנתי איך להקטין את רוחב התפריטים כדי להכניס יותר כותרות(בדמו שלך זה “עלינו” מוצרים”)
    4. איך מוסיפים אפקט מעבר בעכבר גם לכותרות

    הגב

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *