בניתי תפריט עם CSS. משהו נורא פשוט, בעצם רשימה (List) ב HTML. אני רוצה לעשות תתי-תפריטים, ע"י זה שאני מכניס תתי רשימות, בתוך הרשימות.


קישור לאתר - http://roniblabla.googlepages.com/index.html

הצלחתי לעשות את זה. הבעיה היא שאני רוצה שתתי-התפריטים יפתחו רק בשעת מעבר עכבר (או לחיצה, עוד לא החלטתי. אשמח לשמוע המלצות גם בנושא זה..) ו... אין לי כ"כ שמץ איך. תאמינו לי, קראתי הרבה בנושא. עברתי על כל החומר ב Webmaster.org.il (יש שם אפילו דף מיוחד לנושא, אבל לא הבנתי ממנו כמעט כלום..), וב W3school. עדיין אין לי מושג איך אני אמור לעשות את זה. אני יודע שאני אמור להשתמש ב Hover, ואולי גם ב JS, אבל אני שונא JS!!! ממש בעעע...

מצורף בזה קובץ הHTML, וקובץ ה CSS.
אז אם מישהו יוכל לעזור, לתת קצת טיפים - אני אשמח מאוד.
קובץ ה Html ו- https://2007-uploaded.fresh.co.il/2...6/70972523.html
קובץ ה CSS ו- https://2007-uploaded.fresh.co.il/2...06/96754757.css

לנוחיותכם, העתקתי את שורות הקוד הרלוונטיות -

HTML -

קוד:

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">ברוכים הבאים!</a></li>
<li><a href="#">מסלולים</a>
<div id="submenu">
<ul>
<li><a href="#">אזור הצפון</a></li>
<li><a href="#">אזור המרכז</a></li>
<li><a href="#">אזור הדרום</a></li>
</ul>
	</div>
</li>
<li><a href="#">קצת על עצמי</a></li>
<li><a href="#">קישורים</a></li>
<li><a href="#">אודות</a></li>
<li><a href="#">מעצב האתר</a></li>
</ul>

CSS -

קוד:

 
#avmenu {
float: right;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul { 
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0px;
font-size: 1.1em;
text-align: left;
} 
#avmenu li {
margin-bottom: 4px;
} 
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-right: 4px solid #aaaaaa;
} 
 
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-right: 4px solid #286ea0;
}
#submenu ul { 
list-style: none;
width: 100px;
float: left;
margin: 4px 50px 0px 0;
} 
#submenu li a { 
height: 15px;
} 
 

למנהלים - מקווה שהבעיה שהתכוונתם תוקנה. אם לא אתם מוזמנים לכתוב מה הייתה הבעיה, כי אין לי אפשרות לנחש..

אתה צריך לכתוב בורר שיבחר תת-תפריט שנמצא בתוך פריט בתפריט הראשי בעת מעבר העכבר מעליו. נשמע מסובך? לא ממש, שים לב לזה:

קוד:

#avmenu li:hover #submenu

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

בהצלחה!

1. קראתי בכמה מקומות כבר ש hover לא נתמך ע"י IE. אם זה נכון - מה זה יעזור פה?

2. לא הבנתי כ"כ את המשפט שכתבת. אם אני מסתיר אותם, איפה בדיוק אני מגדיר שהם יופיעו?
תחת האירוע שאתה כתבת? כלומר, האם התכוונת למשהו כזה?

קוד:

 
#avmenu li:hover #submenu
{
display: block
} 

לגבי הבעיה של תמיכת IE ב-hover: ב-IE7 זה נתמך, אבל ב-IE6 תצטרך להוסיף קובץ HTC שיוסיף את התמיכה. למידע נוסף, חפש בארכיון אשכול עם הכותרת "HTC ויולו" (או משהו בסגנון).

אוקיי. קראתי את החומר בנושא ה Behavior, הוספתי את זה לאתר, אבל זה עדיין לא עובד.
הורדתי את הקובץ csshover2.HTC מהאתר http://www.xs4all.nl/~peterned/csshover.html, הפניתי אליו בתגית ה Body, ו... נאדה.
הנה הקוד שהוספתי:

קוד:

 
body {
behavior: url("http://roniblabla.googlepages.com/csshover2.htc");
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}
#avmenu {
float: right;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul { 
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0px;
font-size: 1.1em;
text-align: left;
} 
#avmenu li {
margin-bottom: 4px;
} 
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-right: 4px solid #aaaaaa;
} 
 
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-right: 4px solid #286ea0;
}
#submenu ul { 
display:none;
list-style: none;
width: 100px;
float: left;
margin: 4px 50px 0 0;
} 
#submenu li a { 
height: 15px;
} 
#avmenu li:hover #submenu
{
display: block;
} 
 

כתובת האתר - http://roniblabla.googlepages.com/index.html

מישהו יודע מה הפאק פה? ואם יש פה מישהו עם FireFox - אשמח לדעת אם אצלם העיסק כן עובד.

מישהו?

אין שום תפריט קופץ כשעוברים מעל התפריט

הבלוג החדש שלי
ג'ומלה ישראל

אשמח אם מישהו יוכל למצוא את הבעיה בשורות הקוד שהבאתי.
אמרו לי שגם ב IE6 זה לא עובד. למה, לעזאזל, למה?

אני בניתי תפריט נפתח על בסיס ההסברים שנתנו שם באתר, והוא עובד לי גם ב-FF וגם ב-IE 6 ו-7.
למעט בעיה אחת מוזרה - לקטגוריות שמשולבות בהן אותיות באנגלית הדפדפן לא מגיב כקישור, כלומר גם אפקט האובר שבחרתי (שינוי צבע רקע) לא מתרחש, וגם שינוי המצביע לצורת יד לא מתרחש. אין בכלל זיהוי שמדובר בקישור.
אז על הדרך, אם למישהו יש רעיון מה יכול לגרום לכזה דבר, אני אשמח לשמוע.

תודה.

אבל בערך באמצע המאמר שם יש הערה בקשר לזה.

ציטוט:

במקור נכתב על ידי webmaster.org.il הערה: מסיבה לא ידועה הגדרת ה-behavior גורמת לאינטרנט אקספלורר להתנהג בצורה משונה כאשר עוברים עם העכבר מעל הפריטים בתפריט שלנו. (הבעיה הזאת מתרחשת רק כאשר משתמשים ב-direction: rtl בתפריטים אנכיים) הדפדפן מנסה לגרום להם "לצוף" שמאלה. דרך אחת לתקן את הבעיה לשנות את הכיוון ל-ltr ואז תהיה לנו בעיה אם נרצה לכתוב עברית ואנגלית ביחד. דרך אחרת היא להכניס float: right, להגדרת פריטי הרשימה (div#menu li). אך אז יש לנו בעיה עם דפדפנים מודרניים. בואו ניתן הגדרה שרק אינטרנט אקספלורר יקרא: 1 * htmldiv#menuli{ 2 float: right; 3 } ההגדרה הזו, מנצלת באג שנמצא בדפדפני אינטרנט אקספלורר (גרסא 5.01 ומעלה) שלמעשה קורא את ההגדרה בצורה הזו: html div#menu li. והוא אינו אמור להתאים לשום אלמנט. מידע נוסף לגבי הבורר הזה אפשר למצוא באתר CSS Hub.

מקווה שזה עזר. בכל אופן, אני מעדיף להבין מה הבעיה בקוד שאני כתבתי, מאשר סתם להעתיק מהם כמו תוכי...

ובכל זאת אחרי ההערה שלך ניגשתי שוב למאמר המקורי והשוויתי את זה עם מה שעשיתי.
שמתי לב שבמאמר הוא מציין שהבעיה עם העברית והאנגלית מתרחשת רק כאשר מחליפים את ה-direction למצב של ltr במקום rtl. כדי להימנע ממצב כזה הוא נתן את שורות הקוד שאמורות לבלבל את IE. אני פעלתי לפי ההוראות, השארתי את הכיוון על rtl, והכנסתי את הקוד המיוחד.

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

אז שוב - אם יש למישהו רעיון איך לפתור את זה - אני אודה לו מאוד.

נסה להגדיר את ה-behavior גם על התג html, כלומר:

קוד:

html, body {  behavior: url("http://roniblabla.googlepages.com/csshover2.htc"); }

(מה שמוזר, שכשהוספתי את ה Html ל Behavior, כל האותיות נהפכו ליותר קטנות. מוזר, אבל לא משמעותי) בכל אופן, הסרתי אותו חזרה, כי זה לא ממש עזר לפתרון הבעיה.

הקטע הוא שאם אומרים לי שגם בFF זה לא עובד, אז כנראה שזו בעיית-תחביר איפשהו בקוד, לא? כי עד כמה שידוע לי, FF לא נזקק בכלל לכל הקטע של ה Behavior אלא מרנדר באופן טבעי Hover גם על אלמנטים של רשימה. אז מה בכל זאת הפאק פה?