שורת תפריט

[dem]

איך עושים שהתפריט המשני יהיה מאוזן ג״כ (כמו התפריט הראשי)? --- במקום מאונך שזה הברירת מחדל

 

[s976]

ברירת מחדל של מה? על מה אתה מדבר?
בכל מקרה אם ננסה לנחש מה היתה כוונתך - אתה צריך לשנות את הCSS של האלמנטים בתת-תפריט, מ display:block
ל display:inline

 

[dem]

ברירת מחדל של מה? על מה אתה מדבר?
בכל מקרה אם ננסה לנחש מה היתה כוונתך - אתה צריך לשנות את הCSS של האלמנטים בתת-תפריט, מ display:block
ל display:inline

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

 

[s976]

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

 

[dem]

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

קוד של ה html וcss מספיק?
אם כן-

#access{
  background-color: #f5f5f5 !important;
  width: 1400px;
  margin-top: 10px;
margin-bottom: 10px;
margin-left: -140px;

}
#access .menu ,#access li,
#access a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
}
#access  .menu  li{
	 zoom: 1;
  background: #fd757a;
  background: -moz-linear-gradient(top, #fd757a 0%, #fc4349 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd757a), color-stop(100%, #fc4349));
  background: -webkit-linear-gradient(top, #fd757a 0%, #fc4349 100%);
  background: -o-linear-gradient(top, #fd757a 0%, #fc4349 100%);
  background: -ms-linear-gradient(top, #fd757a 0%, #fc4349 100%);
  background: linear-gradient(top, #fd757a 0%, #fc4349 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 5px 5px 5px;
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;

    border: 1px solid #d6030a;
    margin:1px 1px 1px 1px;
width:110px;

}
#access .menu:before {
  content: '';
  display: block;
}
#access .menu:after {
  content: '';
  display: table;
  clear: both;
}
#access .menu li {
  float: left;
    border: 1px solid transparent;
}

#access .menu li a {
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  padding: 5px 5px 5px 5px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#access .menu  li.active {
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  border-radius: 10px;
  border: 1px solid #fd757a;
}
#access .menu  li.active a {
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  display: block;
  background: #fb1118;
  border: 1px solid #d6030a;
  -moz-box-shadow: inset 0 5px 10px #d6030a;
  -webkit-box-shadow: inset 0 5px 10px #d6030a;
  box-shadow: inset 0 5px 10px #d6030a;
}
#access .menu li:hover {
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  border: 1px solid #fd757a;
}
#access .menu li:hover a {
  -webkit-border-radius: 10px 10px 0px 0px;
  -moz-border-radius: 10px 10px 0px 0px;
  -ms-border-radius: 10px 10px 0px 0px;
  -o-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  display: block;
  background: #fb1118;
  border: 1px solid #d6030a;
  -moz-box-shadow: inset 0 5px 10px #d6030a;
  -webkit-box-shadow: inset 0 5px 10px #d6030a;
  box-shadow: inset 0 5px 10px #d6030a;
}
#access .sub-menu {
	width: auto;
	position: absolute;
}
#access .sub-menu li {
	float: left;
display: block;
border-bottom: 1px solid #eeeeee;
position: relative;
border: 0px;
background: #ffffff !important;
background-image: none !important;
border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
border-radius: 0px;
  background-color: #ffffff;

  filter: none;

width:auto;

}
#access .sub-menu:hover li {
border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
border-radius: 0px;

}
#access .sub-menu li a{
background-color: #ffffff;
background-image: none;
border: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
border-radius: 0px;
}

#access .sub-menu li:hover a{
border:none;
background: #ffffff !important;
box-shadow: none;

}

#access .sub-menu  li.active {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
    border-radius: none;
  border: none;
}
#access .sub-menu  li.active a {

  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  display: block;
  background: #ffffff;
  border: none;
  box-shadow: none;
}

ו html זה פשוט זה
This user does not have permission to use the HTML BB code.

 

[dem]

אני יכולה לשלוח לך בפרטי קישורים?

 

[s976]

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

 

[s976]

מסתבר שהגברת שואלת שאלה מעניינת בCSS
איך אפשר לעשות (על ידי שינויים בCSS בלבד) שהתפריט הנפתחת, תיפתח בצורה אנכית?
הבעיה היא, שהאלמנט UL של סב-מנו, אינו רוצה להתרחב, בגלל שלאלמנט האב שלו (LI) יש רוחב מוגבל. וממילא כל השורות של סב-מנו, אינן מתפרסות אנכית, אלא אפקית.
להלן דוגמא:
http://jsfiddle.net/r6qNJ/

יש לי שני פתרונות לבעיה.
פתרון 1:
לתת רוחב גדול ל UL של סב-מנו.
החסרון: צריך לנטרל את צבע הרקע, בורדר וכו'.
http://jsfiddle.net/r6qNJ/1/

פתרון 2:
להשתמש בהגדרה החדשה של

display: flex;

החסרון: אינו נתמך בדפדפנים הישנים.
http://jsfiddle.net/r6qNJ/2/

חברים, בטח יש לכם פתרון יותר אלגנטי. מעניין לראות.

 

[dem]

גלה לי! בבקשה!!

 

[Shia]

מסתבר שהגברת שואלת שאלה מעניינת בCSS
איך אפשר לעשות (על ידי שינויים בCSS בלבד) שהתפריט הנפתחת, תיפתח בצורה אנכית?
הבעיה היא, שהאלמנט UL של סב-מנו, אינו רוצה להתרחב, בגלל שלאלמנט האב שלו (LI) יש רוחב מוגבל. וממילא כל השורות של סב-מנו, אינן מתפרסות אנכית, אלא אפקית.
להלן דוגמא:
http://jsfiddle.net/r6qNJ/

יש לי שני פתרונות לבעיה.
פתרון 1:
לתת רוחב גדול ל UL של סב-מנו.
החסרון: צריך לנטרל את צבע הרקע, בורדר וכו'.
http://jsfiddle.net/r6qNJ/1/

פתרון 2:
להשתמש בהגדרה החדשה של

display: flex;

החסרון: אינו נתמך בדפדפנים הישנים.
http://jsfiddle.net/r6qNJ/2/

חברים, בטח יש לכם פתרון יותר אלגנטי. מעניין לראות.

לא יודע מה הסתבכת
http://jsfiddle.net/r6qNJ/5/

 

[dem]

ישששש

לא יודע מה הסתבכת
http://jsfiddle.net/r6qNJ/5/

זה לא מה שבקשתי. תודה בכל אופן

תודה רבה s970 !! תבורך
הפתרון הראשון עבד, השני לא (למרות שאני עובדת על כרום)

 

[s976]

לא יודע מה הסתבכת
http://jsfiddle.net/r6qNJ/5/

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

 

[Shia]

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

תגיד לי אתה רציני? מה לא הבנתי? עשיתי סאב-מניו לרוחב.
תראה כאן: http://jsfiddle.net/r6qNJ/6/
בול אותה תוצאה כמו שלך, כמעט בלי css... הפתרונות שלך סתם מסובכים בלי סיבה....

 

[Shia]

וכאן זה עם המנגנון שמציג את הסאב במעבר עכבר על האב.
http://jsfiddle.net/r6qNJ/7/

 

[Shia]

זה לא מה שבקשתי.

למה זה לא מה שביקשת?

 

[s976]

תגיד לי אתה רציני? מה לא הבנתי? עשיתי סאב-מניו לרוחב.
תראה כאן: http://jsfiddle.net/r6qNJ/6/
בול אותה תוצאה כמו שלך, כמעט בלי css... הפתרונות שלך סתם מסובכים בלי סיבה....

נכון. אתה צודק.
רק צריך לסלק position: relative; מאלמנט אב (כמו שעשית). וממילא צריך גם לסלק left:0px; ואז אם יש לך padding באלמנט אב, הסב מנו לא יהיה מיושר כמו שצריך.
אבל באמת שזה ניתן לפתור עם margin פחות מאפס.
אכן זו הדרך.

 

[Shia]

נכון. אתה צודק.
רק צריך לסלק position: relative; מאלמנט אב (כמו שעשית). וממילא צריך גם לסלק left:0px; ואז אם יש לך padding באלמנט אב, הסב מנו לא יהיה מיושר כמו שצריך.
אבל באמת שזה ניתן לפתור עם margin פחות מאפס.
אכן זו הדרך.

גם אם צריך padding משום מה, הייתי מוודא שהוא חל על ה- a שבתוך ה li ולא על ה li עצמו

 

[s976]

ידעתי שאתה תותח אמיתי.

 

[dem]

למה זה לא מה שביקשת?

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

תודה לכל התותחים