18.07.2011, 10:54
|
|||
|
|||
Variable Breite für Submenü
Hallo,
ich möchte ein Submenü so gestalten, daß alle Menuitems genauso "lang" sind wie ihr Text und nicht nach 100px in eine 2. Zeile umbrechen. So ein ähnliches Problem hatte ich schonmal, damals ließ es sich damit lösen, bei den ul und li Elementen einfach width auszukommentieren . Damit scheint es diesmal aber nicht zu gehen. Hat jemand einen Tipp? Hier mein Css: Code:
#mainmenu {
width: 730px;
height: 20px;
float: right;
margin-top: 12px;
margin-bottom: 20px;
}
.mainnav {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav ul {
position: absolute;
top: -999em;
display: none;
}
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 20px;
line-height: 20px;
margin-left: 20px;
}
.mainnav a {
display: block;
font-size: 12px;
font-weight: normal;
margin: 0;
padding: 0;
color: #fff;
text-decoration: none;
text-transform: lowercase;
}
.mainnav a:hover,
.mainnav li.current-menu-item a,
.mainnav li#current a,
.mainnav li.current-cat a,
.mainnav li.current_page_item a {
text-decoration: none;
color: #d65917;
}
.mainnav li:hover {
text-decoration: none;
}
.mainnav ul li{
/*width: 100px;*/
}
.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: -10px;
top: 15px;
padding-top: 25px;
/*width: 100px;*/
}
.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}
.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 100px;
top: -25px;
}
.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}
.mainnav li li {
display: inline;
padding: 0px;
/*height: auto !important;*/
border-bottom: solid 1px #fff;
margin: 0;
background: #4f4f4f;
line-height: 20px;
}
.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
/*height: auto !important;*/
text-transform: lowercase;
color: #fff;
font-weight: normal;
font-size: 12px;
border: none;
margin: 0;
padding: 0;
margin-left: 10px;
}
.mainnav li li a:hover {
color:#d65917 !important;
}
|
| Sponsored Links |
|
19.07.2011, 11:33
|
|||
|
|||
|
Das Problem kenne ich, habe auch derzeit superfish im einsatz. Ich habe das Ganze über ein jQuery-Hack gelöst, sodass alle li-Elemente eine angegebene Weite bekommen.
Code:
jQuery.fn.justify = function(width) {
var max = 0;
this.each(function() {
var width = jQuery(this).width();
max = (width > max) ? width : max;
});
return this.width(max + (width));
}
Code:
$('#menu-hauptnavigation #menu-item-1643 .sub-menu li').justify(weite);
Zugegeben, es ist nicht die sauberste Lösung, aber es funktioniert.
|
|
19.07.2011, 13:02
|
|||
|
|||
|
Danke Dir erstmal! Den ersten Code habe ich in meine header.php gepackt - aber (dumme Frage...aber ich weiß es einfach nicht) - wo packe ich denn den zweiten hin ? (
Code:
$('#menu-hauptnavigation #menu-item-1643 .sub-menu li').justify(weite);
|
 |
| Stichwörter |
| dropdown, submenu, suckerfish |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Variable breite für extern geladene Überschrift | MrMister | CSS | 7 | 04.06.2010 15:00 |
| Variable Breite -> Problem Hintergrundgrafik | Korasu | CSS | 2 | 08.01.2010 00:26 |
| Variable Breite mit fester Breite vermischen | vertex | CSS | 11 | 16.10.2006 13:22 |
| 3 Spalten | Aussen: variable Breite; Mitte: feste Breite | dreamshocker | CSS | 9 | 17.08.2005 16:23 |
| problem mit IE Textarea + variable breite | stese | CSS | 3 | 26.07.2004 11:52 |
Linear-Darstellung
