vertikale Listen-Navigation ohne HTML zu ändern

[limubai81]

Hiho ich soll eine Navigation nachbauen die der im unten angegeben Link ähnelt.

Bitte kostenlos registrieren, damit du die Links siehst.

Da dies leider ein selbst entwickeltes CMS ist und ich keine Änderung am eigentlichen HTML-Gerüst vornehmen darf bin ich sehr stark eingeschränkt. Laut Vorgabe soll dies mit CSS und JS realisierbar sein.
Hier mal der Code von der Liste:

<div id="ContentPlaceHolder1_myMenuLeft" class="mynav">
    <ul id="mynav" style="padding:0px;margin:0px;width:100%;">
    <li style="whitespace: nowrap;"><a class="isActive" href="hauptseite1.aspx" target="_self" style="">Seite 1
    </a>
    <ul style="display: none;">
    <li style="whitespace: nowrap;"><a class="" href="unterseite1_1.aspx" target="_self" style="">Unterseite 1
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class=""  href="unterseite1_2.aspx" target="_self" style="">Unterseite 2
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite1_3.aspx" target="_self" style="">Unterseite 3
    </a>
    </li>
    </ul>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="hauptseite2.aspx" target="_self" style="">Hauptseite 2
    </a>
    <ul style="display: none;">
    <li style="whitespace: nowrap;"><a class="" href="unterseite2_1.aspx" target="_self" style="">Unterseite 2.1
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite2_2.aspx" target="_self" style="">Unterseite 2.2
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite2_3.aspx" target="_self" style="">Unterseite 2.3
    </a>
    </li>
    </ul>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="hauptseite3.aspx" target="_self" style="">Hauptseite 3
    </a>
    <ul style="display: none;">
    <li style="whitespace: nowrap;"><a class="" href="unterseite3_1.aspx" target="_self" style="">Unterseite 3.1
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite3_1.aspx" target="_self" style="">Unterseite 3.2
    </a>
    </li>
    </ul> 
    </li>
    </ul>
</div>

Die Klasse "isactive" wird über JS vergeben.
Kennt jemand vielleicht ein Tutorial oder so womit sich das umsetzen lassen würde?

lg limu

 

[Trabilady]

AW: vertikale Listen-Navigation ohne HTML zu ändern

Hallo limubai,

Ich glaube, dass Du größere Chancen auf eine Antwort hast, wenn Du schon mal einen Versuch von Dir selbst zeigst (CSS) - anderenfalls ähnelt Deine Anfrage eher einem Auftragsangebot

 

[limubai81]

AW: vertikale Listen-Navigation ohne HTML zu ändern

ist klar, will ich ja auch gar nicht
Habe aber vorhin gemerkt das vorher noch ein JS-Problem behoben werden muss. Da im "Template" ein JS liegt das die untergeordneten Listen bei Hover rechts neben dem Hauptpunkt erscheinen lässt und das JS darf nicht entfernt werden. :hmpf:

Wenn das Problem behoben ist werd ich mich nochmal melden und die auch die CSS-Schnipsel posten.

lg limu

 

[lucifer-bw]

AW: vertikale Listen-Navigation ohne HTML zu ändern

Dein Problem sind die bereits vergebenen Eigenschaften.
Mit der CSS-Anweisung !important kannst du Sie trotzdem überschreiben.

Ein fiddle gibts auch:

Würde ich für die Stunde 120Euro nehmen, wäre mein Rechnungsbetrag jetzt 10,- Euro.
Super Auftragsangebot.