Graphene - wie Menü nach links öffnen

Christian S

Hallo,

ich bastle gerade an der Seite und komme als Einsteiger grds. schon ganz gut klar.

Im Hauptmemü: http://www.transeurope.de/wordpress/
öffnen sich die Untermenüs nach unten, die Unteruntermenüs dann immer nach rechts.

Das Problem: Bei den Menüpunkten, die sich ohnehin schon ziemlich weit rechts befinden, rutschen die Unteruntermenüs aus dem Bildschirm raus.

Bitte über Fotos, dann über Tiere fahren, der nächste Untermenüpunkt ist dann schon ziemlich weit rechts.

Unter Anzeigeoptionen des Navigationsmenüs kann man nur einheitlich die Breite einstellen.

Die einfachste Lösung wäre es, wenn ich irgendwo das so ändern könnte, dass bei den Menüpunkten, die sich weiter rechts befinden, die Untermenüs nach links öffnen.

Wer hat eine Idee?

Grüße und Danke
Christian S

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Gsi

Hallo,

da gibt's einige Möglichkeiten.

Die einfachste ist, du vergibst den hinteren Listenpunkten eine eigene Klasse, die sich nach links öffnen sollen. Am besten manuell mit einem minus-left
(Pixel natürlich anpassen; manuell ;-) ... also nur z.B. ):

HTML

.navi li ul {left: -300px;}

oder:

HTML

.navi ul ul {left: -300px;}

... je nachdem.
So kannst du die Liste nach links ziehen, wohin du sie haben willst.

Gruß,
Gsi

Christian S

Hallo Gsi,

besten Dank für die rasche Antwort. Da ich ganz am Anfang stehe muss ich nachfragen.
Wo finde ich die Dateien bzw. wie vergebe ich den hinteren Listenpunkten eine eigene Klasse. Ich habe etwas gegoogelt, naja, es ergaben sich mehr Fragen als Antworten.

DANKE
Christian S

Gsi

Hallo Christian,

uiuiui - dann stehst du wirklich noch am Anfang. Dann nehme ich auch mal an, dass du von "CSS" nicht gerade umfängliche Ahnung hast.

Die CSS findest du (beim Dashboard links) unter:
Design -> Editor -> stylesheet (style.css) ... runterscrollen bis zur Klasse ".menu" ... da kannst du das ändern ... aber ohne CSS-Kenntnisse wirst du etwas länger brauchen, um es hin zu kriegen ;-)

;-)
Gruß,
Gsi

Christian S

Zitat von Gsi

Hallo Christian,
uiuiui - dann stehst du wirklich noch am Anfang. Dann nehme ich auch mal an, dass du von "CSS" nicht gerade umfängliche Ahnung hast.
Die CSS findest du (beim Dashboard links) unter:
Design -> Editor -> stylesheet (style.css) ... runterscrollen bis zur Klasse ".menu" ... da kannst du das ändern ... aber ohne CSS-Kenntnisse wirst du etwas länger brauchen, um es hin zu kriegen ;-)
;-)
Gruß,
Gsi

Hallo Gsi,

danke für die Info. Selbst bringe ich die Lösung natürlich nicht hin, aber wenn man mir sagt, wo ich was ergänzen muss könnte es schon klappen. Ich muss ja nicht alle Details bzgl "CSS" hinterblickt haben, Hauptsache es funzt. Den editor kannte ich schon:

Code

/* =Navigation
-------------------------------------------------------------- */








/* Son of Suckerfish - what makes it tick */
#nav a {
    display: block;
}
#nav li {
    float: left;
}
#nav li ul {
    position: absolute;
    width: 200px;
    left: -999em;
}
#nav li:hover ul {
    left: auto;
}
#header-menu li ul ul {
    margin: -34px 0 0 200px;
}
#secondary-menu li ul ul {
    margin: -29px 0 0 200px;
}
#nav, #nav ul {
    padding: 0;
    list-style: none; 
    line-height: 1;
    z-index: 15;
}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li:hover ul ul ul ul ul {
    left: -999em;
}
#nav li:hover ul, 
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul {
    left: auto;
}




/* What gives our menus style */
.menu-bottom-shadow{
    background: url(images/sprite_h.png) left top repeat-x #eee;
    height: 3px;
    width: 100%;
}
#nav .menu li:hover{
    position: static;
}
#nav .menu ul {
    box-shadow: 0 1px 2px #555;
}




/* Top level header menu, default state */
#header-menu-wrap {
    background: url(images/sprite_h.png) left -4px repeat-x #101010;
    position: relative;
}
.have-secondary-menu #header-menu-wrap {
    border-bottom: 1px solid #000;
}
.dropdown #header-menu-wrap {
    background: none;
    border: none;
}
#header-menu,
#secondary-menu {
    margin: 0 10px;
    z-index: 20;
}
#header-menu > li {
    font: normal 14px arial;
    margin: 0 0 0 5px;
}
#header-menu > li:first-child {
    margin-left: 0;
}
#header-menu > li > a {
    color: #fff;
    line-height: 16px;
    padding: 9px 10px 10px;
}
#header-menu > li > a > .desc {
    display: block;
    font-size: 11px;
    color: #aaa;
}
#header-menu > .menu-item-ancestor > a > .desc {
    margin-left: 14px;
}
#header-menu > li.menu-item-ancestor > a:before {
    content: '\f431';
    display: inline-block;
    margin-left: -2px;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'Genericons';
    vertical-align: top;
}




/* Top level header menu, hover and current state */
#header-menu > li:hover,
#header-menu > li.current-menu-item,
#header-menu > li.current-menu-ancestor {
    background: url(images/sprite_h.png) left -300px repeat-x #eee;
}
#header-menu > li:hover > a,
#header-menu > li.current-menu-item > a,
#header-menu > li.current-menu-ancestor > a {
    color: #000;
}
#header-menu > li:hover > a > span,
#header-menu > li.current-menu-item > a > span,
#header-menu > li.current-menu-ancestor > a > span {
    color: #484848;
}




/* Sub level header menu, default state */
#header-menu ul li a {
    color: #000;
    padding: 10px;
    width: 180px;
}
#header-menu ul li {
    background: url(images/sprite_h.png) left -777px repeat-x #dfdfdf;
}
#header-menu ul li.menu-item-ancestor > a:after {
    content: '\f501';
    display: inline-block;
    float: right;
    margin: 2px -5px 0 0;
    -webkit-font-smoothing: antialiased;
    font: normal 10px/1 'Genericons';
    vertical-align: middle;
}




/* Sub level header menu, hover and current state */
#header-menu ul li:hover,
#header-menu ul li.current-menu-item,
#header-menu ul li.current-menu-ancestor {
    background-position: left -856px;
    background-color: #212121;
}
#header-menu ul li:hover > a,
#header-menu ul li.current-menu-item > a,
#header-menu ul li.current-menu-ancestor > a {
    color: #fff;
}








/* Secondary menu */
/* Top level, default state */
#secondary-menu-wrap {
    width: 100%;
    border-top: 1px solid #2C2C2C;
    background: #222;
}
#secondary-menu > li {
    font: normal 11px arial;
    margin: 0 5px;
    text-transform: uppercase;
}
#secondary-menu > li:first-child {
    margin-left: 0;
}
#secondary-menu > li > a {
    color: #fff;
    line-height: 16px;
    padding: 7px 10px 6px;
}




#secondary-menu > li.menu-item-ancestor > a:before {
    content: '\f431';
    display: inline-block;
    margin-left: -2px;
    -webkit-font-smoothing: antialiased;
    font: normal 12px/1 'Genericons';
    vertical-align: text-top;
}




/* Top level, hover and current state */
#secondary-menu > li:hover,
#secondary-menu > li.current-menu-item,
#secondary-menu > li.current-menu-ancestor {
    background: #eee;
}
#secondary-menu > li:hover > a,
#secondary-menu > li.current-menu-item > a,
#secondary-menu > li.current-menu-ancestor > a {
    color: #000;
}




/* Sub level, default state */
#secondary-menu ul li a {
    color: #000;
    padding: 7px 10px 6px;
    width: 180px;
    line-height: 16px;
}
#secondary-menu ul li {
    background: url(images/sprite_h.png) left -1014px repeat-x #dfdfdf;
}
#secondary-menu ul li.menu-item-ancestor > a:after {
    content: '\f501';
    display: inline-block;
    float: right;
    margin: 3px -5px 0 0;
    -webkit-font-smoothing: antialiased;
    font: normal 8px/1 'Genericons';
    vertical-align: middle;
}
/* Sub level header menu, hover and current state */
#secondary-menu ul li:hover,
#secondary-menu ul li.current-menu-item,
#secondary-menu ul li.current-menu-ancestor {
    background-position: left -1084px;
    background-color: #212121;
}
#secondary-menu ul li:hover > a,
#secondary-menu ul li.current-menu-item > a,
#secondary-menu ul li.current-menu-ancestor > a {
    color: #fff;
}

Alles anzeigen

Das sollte dann doch hier zu finden sein. Aber wie definiere ich, bzgl. welcher Menüpunkte (listenpunkte) die Anweisung gelten soll, dass sich die Navigation nach links öffnen soll?

Wie du siehst, im Rahmen meiner Möglichkeiten gebe ich mir Mühe :oops:

DANKE und Grüße
Christian S

Gsi

Hallo Christian

ah - super *g* - du scheinst zumindest die Navi gefunden zu haben ;-)
Ich bin Webentwickler und knöpfe meinen Kunden € 70,- pro Stunde ab für solche Infos *chchch* ... aber ab und zu bin ich gnädig und gebe Fachinfos auch mal gratis in Foren ;-)

Dann gebe ich dir mal 2 Werkzeuge in die Hand, womit du rumprobieren kannst:
1) Lad dir das Firefox-Addon "Firebug" runter und spiel damit mal rum ... da kannst du als Einsteiger gut die Elemente entdecken, um heraus zu finden, wo was ist.
2) http://de.selfhtml.org/ ... das sollte am Anfang dein ständiger Begleiter werden, wo du dich über Syntax usw. informieren kannst ... für diesen Fall jetzt:
http://de.selfhtml.org/html/text/listen.htm
und
http://de.selfhtml.org/css/eigenschaf…us_hover_active

;-)

Kleiner Zusatztipp:

HTML

#nav li ul {
    position: absolute;
    width: 200px;
    left: -999em;
}
#nav li:hover ul {
    left: auto;

Mit "left: -999em;" wird die ul außerhalb des Sichtbereiches platziert, mit "left: auto" beim Hovern wieder reingeholt.

Und du musst nun eine Klasse erstellen, diese den bestimmten Unterlisten zuordnen, und dann eben links statt auto platzieren. Noch ein Zusatztipp: In dem Falle nicht mit "left", sondern besser mit "margin-left" .

Viel Spaß beim Üben! ;-)

Christian S

Hallo Gsi,

danke für die Infos. Ich war übers WE unterwegs, daher die späte Antwort.
Ohoh, da wartet etwas Arbeit auf mich. Ich muss mal sehen wie ich allgemein an die Sache rangehe. Ich bin gerade dabei, meine website auf wordpress umzustellen, damit ich nicht mehr viel Zeit mit Rumspielerei vertue. Eher besteht bei mir eine Bereitschaft dazu, mit einem Kompromiss zu leben anstatt zu lange rumzuspielen.

Letztlich hätte ich auch die Option, die 2 Hauptmenüpunkte rechts zu plazieren, die die wenigsten Untermenüs haben.

Eine kleine Anmerkung noch. Foren mit Niveau leben Leuten, die sich auskennen. In anderen Foren kann ich mich da besser einbringen in meinen beruflichen Bereichen... und vom Stundensatz her kann ich auch mithalten :oops:.

Danke jedenfalls für deine Mühe.

Grüße
Christian S

Gsi

*g*

Zitat

Eine kleine Anmerkung noch. Foren mit Niveau leben Leuten, die sich auskennen. In anderen Foren kann ich mich da besser einbringen in meinen beruflichen Bereichen... und vom Stundensatz her kann ich auch mithalten :oops:.

Wenn du bez. Stundenlohn mithalten kannst ... warum vergibst du diese Arbeit nicht? Rechne mal die Stunden zusammen, die du alleine für die Einarbeit bei WP benötigst, was ein Eingelesener in Kürze erledigen könnte.
*kopfkratz*
Du würdest dir eine Menge Zeit ersparen ... v.a. wenn man es 1:1 aufrechnet.

Gruß,
Gsi

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Graphene - wie Menü nach links öffnen

Jetzt mitmachen!