יצירת 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>

דמו | הורדה