Menu Design : Ebene 1 Vertical, Ebene 2 Horizontal

tonKom

Hallo zusammen,

ich betreibe seit längerem eine Website (http://www.ladela.de) die ich nun in ein Wordpress bringen möchte.

Ich möchte aber gerne mein Menü beibehalten. Hier mal kurz eine Ansicht:

Eigentlich dachte ich sollte das ja mit CSS kein Problem sein. Also habe ich die TwentyTen so angepasst, dass die erste Menüebene statt horizontal vertical ist. So weit kein Thema.
Doch nun möchte ich Subebene horizontal aufklappen lassen und genau das klappt nicht. Wenn ich den ul ul li mit float:left versehe, keine Änderung. Habe leider keine Idee was ich sonst noch machen kann...

Eine Sache die dann auch noch wäre, ist dass die aktive Kategorie jeweils das Menü zu sehen sein soll (also wenn zB. 1.1-Subpunkt aktiv ist, soll die ganze Zeile 1.X zu sehen sein).

Wäre super wenn mir jemand noch nen Ansatz geben könnte (oder nen passendes Plugin - obwohl Coding mir schon lieber wäre an der Stelle)

viele grüße

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

tonKom

aktive Kategorie sichtbar

also den zweiten Teil habe ich schon geschafft. habe einfach dem folgendes ins css eingebaut:

Code

li.current-menu-item ul {display:inline}

das funktioniert jetzt schon mal problemlos.

Leider bin ich mit dem nebeneinander anzeigen der Zweiten-Menü-Ebene immer noch nicht weitergekommen... :(

flipps

Hast du die Wordpress Seite irgendwo online? Dann könnte ich dort etwas herumprobieren.

So aus dem Stehgreif heraus kann ich auch nur sagen, dass das mit float: left; funktionieren müsste. Natürlich der richtigen Listenebene zuweisen. Aber da kann ich hier halt auch nur raten.

VG
Philip

tonKom

http://neu.ladela.de

give it a try :) vielleicht hast du ja mehr erfolg.

Gruß

flipps

Ich habs gerade irgendwie geschafft. ;-)

Mal sehen ob ichs noch reproduzieren kann.

style.css Zeile 407 (das rote habe ich geändert)

Code

#access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 126px;
    [COLOR=Red]position: relative;[/COLOR]
    [COLOR=Red]top: -27px;[/COLOR]
    width: auto;
    z-index: 99999;




}

Alles anzeigen

Zusätzlich:

Code

.sub-menu li {
float: left;
}

Das Menü verschiebt es zwar noch etwas, kann das gerade per Firebug auch nicht nachvollziehen, aber vielleicht bekommst du das noch hin.

VG
Philip

tonKom

Lösung gefunden

Hi flipps,

vielen Dank für die Hilfe! Aber die Lösung war noch viel einfacher. Man muss die Breite der <ul> größer machen, so dass alle Punkte platz finden! Das wars dann schon. :-)

Muss man aber auch erst mal drauf kommen. Nachdem ich also die Breite vom UL auf der Ebene 1 und 2 manuelle Breite gesetzt habe funktioniert es einwandfrei.

Viele Grüße

flipps

Gern geschehen. :-)

Vielleicht brauch ich das ja auch mal, dann weiß ich wenigstens Bescheid.

VG
Philip

derElch

Zitat von tonKom
Code
li.current-menu-item ul {display:inline}
das funktioniert jetzt schon mal problemlos.
Leider bin ich mit dem nebeneinander anzeigen der Zweiten-Menü-Ebene immer noch nicht weitergekommen... :(

lieg doch daran dass du beim UL eine feste breite hast.
Nimm die breite raus und dann klappt das. (so hab ichs jedenfalls etwa bei mir)

.marco

hi,

ich bräuchte auch Hilfe,
zwar habe ich ein ganz normales CSS Menü,
was vorerst noch nicht mit wordpress läuft, sondern wo ich in der header Datei noch manuell die menü punkte ändern müsste.

Die CSS Daten des Menüs sind:

HTML

#nav {padding:0; margin:0; list-style:none; height:38px; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:25px; color:#FFFFFF; text-decoration:none; font-size:18px; font-weight:bold; padding:0 0 0 44px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}


#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}


#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}


#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}


#nav :hover ul.sub
{left:1px; top:38px; background: #bebebe; padding:3px; border:1px solid #8f0f3f; white-space:nowrap; width:180px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:182px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:16px; height:18px; width:180px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bebebe;}
#nav li ul.sub li a.fly
{background:#bebebe url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover
{background:#8f0f3f; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#8f0f3f url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#nav li b {display:block; font-size:18px; height:18px; width:180px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#8f0f3f; border-bottom:1px solid #8f0f3f; cursor:default;}


#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #bebebe; padding:3px; border:1px solid #848484; white-space:nowrap; width:182px; z-index:400; height:auto;}


#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}


#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #bebebe; padding:3px; border:1px solid #848484; white-space:nowrap; width:182px; z-index:400; height:auto;}
#nav li:hover > ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#bebebe url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover > li a.fly
{background:#bebebe url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bebebe;}

Alles anzeigen

die HTML Daten des Beispielmenüs sind:

HTML

<ul id="nav">
    <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
            <li><b>Cameras</b></li>
            <li><a href="#nogo3" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#nogo4">Nikon</a></li>
                        <li><a href="#nogo5">Minolta</a></li>
                        <li><a href="#nogo6">Pentax</a></li>
                    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#nogo8">Wide Angle</a></li>
                        <li><a href="#nogo9">Standard</a></li>
                        <li><a href="#nogo15">Mirror</a></li>
                        <li><a href="#nogo10">Telephoto</a></li>
                        <li><b>Zoom</b></li>
                        <li><a href="#nogo12">35mm to 125mm</a></li>
                        <li><a href="#nogo13">50mm to 250mm</a></li>
                        <li><a href="#nogo14">125mm to 500mm</a></li>
                        <li><b>Non standard</b></li>
                        <li><a href="#nogo17">Bayonet mount</a></li>
                        <li><a href="#nogo18">Screw mount</a></li>
                    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><b>Accessories</b></li>
            <li><a href="#nogo19">Flash Guns</a></li>
            <li><a href="#nogo20">Tripods</a></li>
            <li><a href="#nogo21">Filters</a></li>
        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
            <li><a href="#nogo23">Printing</a></li>
            <li><a href="#nogo24">Photo Framing</a></li>
            <li><a href="#nogo25">Retouching</a></li>
            <li><a href="#nogo26">Archiving</a></li>
        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
            <li><a href="#nogo28">Support</a></li>
            <li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                    <li><b>European</b></li>
                    <li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                            <li><b>City</b></li>
                            <li><a href="#nogo35">London</a></li>
                            <li><a href="#nogo36">Liverpool</a></li>
                            <li><a href="#nogo37">Glasgow</a></li>
                            <li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                    <li><b>District</b></li>
                                    <li><a href="#nogo39">Redland</a></li>
                                    <li><a href="#nogo40">Hanham</a></li>
                                    <li><a href="#nogo41">Eastville</a></li>
                                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                            <li><a href="#nogo42">Cardiff</a></li>
                            <li><a href="#nogo43">Belfast</a></li>
                        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
                    </li>
                    <li><a href="#nogo44">French</a></li>
                    <li><a href="#nogo45">German</a></li>
                    <li><a href="#nogo46">Spanish</a></li>
                    <li><b>Worldwide</b></li>
                    <li><a href="#nogo30">USA</a></li>
                    <li><a href="#nogo31">Canadian</a></li>
                    <li><a href="#nogo32">South American</a></li>
                    <li><a href="#nogo47">Australian</a></li>
                    <li><a href="#nogo48">Asian</a></li>
                </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li><a href="#nogo49">Buying</a></li>
            <li><a href="#nogo50">Photographers</a></li>
            <li><a href="#nogo51">Stockist</a></li>
            <li><a href="#nogo52">General</a></li>
        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
            <li><a href="#nogo54">Online</a></li>
            <li><a href="#nogo55">Catalogue</a></li>
            <li><a href="#nogo56">Mail Order</a></li>
        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>

Alles anzeigen

Das Menü hat die Hauptpunkte, Submenüs, SubSubMenüs und auch solche überschriften, wer es live sehen möchte schreibe dies bitte,
dann würde ich den Link per PM posten, die unfertige Seite soll noch nicht an die Öffentlichkeit.

Bin gerad dabei mein Template aus reinem HTML/CSS so umzusetzen das es mit Wordpress läuft, beim Menü habe ich keine Ahnung wo es die Daten speichert um es per HTML zu ändern.

Aus anderen Systemen kenne ich solche Variablen wie
"{main_menu}" oder "{sub_menu}" die ich einfach entsprechend in meinen HTML Code reinsetze und dann geht das auch schon,
bei Wordpress finde ich da keine Menü Vorlage wo ich die Möglichkeit hätte das auf diese Art zu lösen.

Dankesehr :)

grüsse

.marco

keiner ne lösung? :(

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menu Design : Ebene 1 Vertical, Ebene 2 Horizontal

Jetzt mitmachen!