Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Menü probleme“

darkminde

Noch nicht viel geschrieben

Hi ich nochmal irgenwie stelle ich mich heute einfach zu blöde an kann mir vll einer helfen?
Habe ein menü mit css erstellt.
Home / About / Portfolio / Login
wenn ich nun auf Portfolio gehe Klappt es nach unten auf soweit ganz gut
Equipment
Photoshoots
nun soll wenn ich bei Photoshoots bin es nach rechts und dann nach unten auklappen für die Jahre.
..
Portfolio / 2015 / Januar
Februar
..

Aber irgenwie klapt das nicht siehe Quelltext:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="shoot.html">About</a></li>
<li>Portfolio
<ul>
<li><a href="shoot.html">Equipment</a></li>
<li>Photoshoots
<ul>
<li>2015
<ul>
<li>Januar</li>
<li>Februar</li>
</li>
</ul>
</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>

Danke schonmal im vorraus.

Dark
 

darkminde

Noch nicht viel geschrieben

@charset "utf-8";
/* CSS Document */

body { background: #222; font-family:Helvetica, sans-serif}

nav {position:absolute; top:100px; left:200px; }

nav ul {margin:0; padding:0; height:36px; box-shadow:0px 0px 32px 0px #111; border-radius:10px; width:auto;}
nav ul li { position:relative; border-right:1px solid#222; list-style:none; float:left; background:#333; padding:10px; width:70px; text-align:center; transition:all 500ms; color:#999}
nav ul li:first-child { border-radius:10px 0px 0px 10px}
nav ul li:last-child {border-radius:0px 10px 10px 0px; border:none}
nav ul li:hover {background:#0C0; color:#FFF}

nav ul li:hover ul { height:auto; opacity:1;}
nav ul li ul {height:0; overflow:hidden; opacity:0; position: absolute; top:40; left:0px}
nav ul li ul li { width:130px;}
nav ul li ul li:first-child { border-radius:10px 10px 0px 0px}
nav ul li ul li:last-child {border-radius:0px 0px 10px 10px; border:none}

nav ul li a {
color: #999;
text-decoration: none;
}

list-style: none;
 

dn3d_fanboy

Aktives Mitglied

Ich sehe gerade, dass du bei der vierten Ebene im HTML-Code die <ul>-Liste nicht korrekt schließt. Und ob das alles mit dem CSS-Code geht, kann ich auch nicht sagen, da der nur bis zur zweiten Ebene geht.

Was genau funktioniert denn nicht?
 

darkminde

Noch nicht viel geschrieben

ab der zweiten ebene wo das menü nach rechts ausklappen soll beo Photoshoots er baut dann immer nur nach unten (unter portfolio und nicht nach rechts)
 

dn3d_fanboy

Aktives Mitglied

Na ja, da brauchst du dann eben den CSS-Code der dritten und vierten Ebene. Im Moment nimmt er den des Elternelements, also der Zweiten.
 

patrick_l

Hat es drauf

kannst mir vll dabei helfen bei css bin ich nicht so fit habe da erst angefangen :(
Vorweg, wir sind kein "mach mir mal" Forum. Hier bekommt jeder Hilfe zur Selbsthilfe. Wenn nötiges Grundlagenwissen fehlt, solltest du dir selbiges mit Hilfe von passender Fachlektüre und/oder passenden Tutorials aneignen. Hier auf PSD-Tutorials findest du einiges zu diesem Thema. Wenn es mehr sein darf, auch mal im Shop vorbeischauen.

Auch im Internet findest du haufenweise Anleitungen, Snippets und der Gleichen. Sowohl reine CSS(3) Multi-Level Navigationen als auch mit JavaScript (jQuery). Also einfach mal explizit danach suchen und dann Schritt für Schritt an deine Website anpassen. Auf schnelle auch ein Link von mir:

- 38 OpenSource CSS Dropdown Menüs

Was jetzt dein CSS angeht, solltest du auch mehr Ordnung rein bringen. Arbeite unter anderem mit Klassen, um einzelne Elemente schneller selektieren zu können.

Liebe Grüße, Patrick
 

darkminde

Noch nicht viel geschrieben

Hi patrick ich will ja nicht hier machmal und präsentiere mir das ergebniss ich will es ja lehrnen deshalb habe ich ja gefragt ob er mir helfen könte und nicht codet.

Hab auch schon gegooglet aber leider nicht das passende gefunden.

ich bedanke mich für den Link und werde es mal durcharbeiten.

danke an alle
 

hub

nicht ganz neu hier

Moin,
um weiter zu experimentieren solltest du die zeile mit overflow mal auskommentieren
CSS:
nav ul li ul {
    height:0; 
   /*  overflow:hidden;  /* <-------------*/
    opacity:0;
    position: absolute;
    top:40;
    left:0px
}
und dann dafür sorgen, das ab der 3. Ebene ul mit top: 0 und left: 100% positioniert werden ...

Gruß Ulli
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben