Antworten auf deine Fragen:
Neues Thema erstellen

Navigationsreiter mit runden Ecken erstellen

patrick_l

Hat es drauf

Hi allerseits,

ich habe mal zwei Fragen zur Navigation von PSD-Tutorials. Es geht um folgendes. Ich benötige auch eine Navigation mit drei Ebenen wie es hier der Fall ist. Ich habe mir unter anderem den Quelltext von hier angeschaut. Ich wollte das ganze jetzt mal mit CSS angehen:

HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nav 3 Ebenen</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Punkt 1</a>
                    <ul>
                        <li><a href="#">Sub 1</a>
                        <ul>
                            <li><a href="#">Sub-Sub 1</a></li>
                            <li><a href="#">Sub-Sub 2</a></li>
                        </ul>
                        </li>
                        <li><a href="#">Sub 2</a></li>
                        <li><a href="#">Sub 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Punkt 2</a></li>
                <li><a href="#">Punkt 3</a></li>
                <li><a href="#">Punkt 4</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Halt den einzelnen Unterpunkten / Listen Klassen oder eindeutige ID's verpassen. Anschließend mit CSS(3) display: none; entsprechend ausblenden und beim hovern wieder einblenden. Ich bin mir nur gerade nicht sicher ob es überhaupt klappt.

2-Level Navigation (Drop-Down-Navigationen) laufen ohne Probleme. Jetzt weiß ich nur nicht ob es auch problemlos mit 3 oder mehr Ebenen funktioniert. Daher mal die Frage was ihr so an Erfahrungen gesammelt habt im Bezug komplexe Navigation (mit CSS). Ich wollte jetzt nicht unnötige an meiner herum frickeln. Daher einfach mal hier gepostet.

Meine zweite Frage wäre folgende. Ich steige hier bei einer Sache nicht ganz durch. Habe zwar im CSS nach geschaut, aber finde die passende Stelle nicht. Es geht um die Reiter in der PSD-Nav. Das Bg-Image für die runden Ecken. Wie nutze ich ähnliche Grafiken damit meine Schaltflächen entsprechend aussehen?

Beste Grüße, Patrick
 

simonpicos

Mod | Forum

AW: Navigationsreiter mit runden Ecken erstellen

Was hindert dich denn daran es mal schnell zu testen? Die vielleicht 20 Zeilen Code für die reine Funktionalität dürften doch ziemlich überschaubar sein ;)
Ich wüsste jetzt aber auch keinen Grund, warum es nicht funktionieren sollte.

Heute, 03:44 .... Immer diese Leute, die keinen Schlaf brauchen :D
 

patrick_l

Hat es drauf

AW: Navigationsreiter mit runden Ecken erstellen

Was hindert dich denn daran es mal schnell zu testen? Die vielleicht 20 Zeilen Code für die reine Funktionalität dürften doch ziemlich überschaubar sein ;)

Haste recht. :rolleyes: Ich hocke nur gerade am Layout. Halt nochmal alle Punkte durch gehen. Mit dem Coden wollte ich später erst los legen. Daher einfach mal gefragt ob es ohne weiteres geht. ;)

Wie sieht das denn mit der zweiten Frage aus. Ich meine die Grafik für Anfang und Ende meiner Schaltflächen. Halt im Prinzip wie ihr bei der Navigation.

Bin doch ein Nachtmensch ;)
 

patrick_l

Hat es drauf

AW: Navigationsreiter mit runden Ecken erstellen

Hallo!

Schau doch mal bei Stu Nicholls vorbei:

Wow! Danke für den klasse Link. Direkt in meinen Bookmarks gespeichert. :D
Gleich dort noch etwas weiter am stöbern ;)

Edit: Nur schade das man sich das ganze nicht herunterladen kann. Das ein oder andere würde ich mir schon beiseite packen ;) Möchte jetzt eigentlich nur noch wissen wie ich das ganze selber auf die Beine stelle. Ich meine mit dem Bg-Image.

Lg Patrick
 
Zuletzt bearbeitet:
AW: Navigationsreiter mit runden Ecken erstellen

Hallo!
Nur schade das man sich das ganze nicht herunterladen kann.
Ja, stimmt! Aber der Quelltext ist gut strukturiert und teilweise auch kommentiert. Bei Stu Nicholls findest du beinahe alles, was mit CSS möglich ist.
 

BeBa

Nicht mehr ganz neu hier

AW: Navigationsreiter mit runden Ecken erstellen

Hab mir den Link auf grad mal angesehen. Is ein Super-Tip. Auch von mir ein Dankeschön :-D
 
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

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.636
Beiträge
1.538.496
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben