Navigationsreiter mit runden Ecken erstellen

patrick_l · 21.06.2012, 03:44

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-Code:

<!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 · 21.06.2012, 07:28

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

patrick_l · 21.06.2012, 07:36

Zitat:

Zitat von simonpicos

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.

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

_schatzi_ · 21.06.2012, 13:13

Hallo!

Schau doch mal bei Stu Nicholls vorbei:
http://www.cssplay.co.uk/menus/csspl...-dropdown.html

patrick_l · 21.06.2012, 13:19

Zitat:

Zitat von _schatzi_

Hallo!

Schau doch mal bei Stu Nicholls vorbei:
http://www.cssplay.co.uk/menus/csspl...-dropdown.html

Wow! Danke für den klasse Link. Direkt in meinen Bookmarks gespeichert.

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

_schatzi_ · 21.06.2012, 13:25

Hallo!

Zitat:

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 · 21.06.2012, 13:57

Hab mir den Link auf grad mal angesehen. Is ein Super-Tip. Auch von mir ein Dankeschön :-D

21.06.2012, 03:44	#1
patrick_l Medienjongleur Registriert seit: 11.05.2008 Ort: NRW Beiträge: 5.983 Kamera: Canon Eos 7D, Eos 60D, MV900, Revue Verwendet: bis CS6, Corel, GIMP, Coda, SublimeText 2, VSE 2013, Wacom [...]	Navigationsreiter mit runden Ecken erstellen 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-Code: <!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

21.06.2012, 07:28	#2
simonpicos Mod \| Web Registriert seit: 16.02.2011 Ort: Taunus Beiträge: 2.301 Kamera: Canon EOS 600D Verwendet: CS6 Design Standard, Lightroom, Scriptly, Avid Studio	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 __________________ Momentan ohne Signatur

21.06.2012, 13:13	#4
_schatzi_ Lampen-Sau Registriert seit: 07.08.2009 Beiträge: 1.285 Verwendet: CS4	AW: Navigationsreiter mit runden Ecken erstellen Hallo! Schau doch mal bei Stu Nicholls vorbei: http://www.cssplay.co.uk/menus/csspl...-dropdown.html __________________ Viele liebe Grüße! _schatzi_

21.06.2012, 13:57	#7
BeBa Member Registriert seit: 01.09.2007 Ort: Litzendorf Beiträge: 199 Verwendet: Adobe CS5.5 Master Collection	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 __________________ MfG BeBa ________________________________ Dropbox - Kostenloser Online-Speicher

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS, Überlappende Navigation mit runden Ecken	barodscheff	(X)HTML & CSS	6	03.05.2012 01:22
Dokument mit runden ecken	sergej777	Photoshop	9	03.03.2010 12:51
foto mit runden ecken	hinsen2k	Vektorprogramme	3	19.08.2009 14:07
Rechteck mit runden Ecken wie bei Paint?	Amlernen	Photoshop	7	08.08.2009 15:28
prob mit runden ecken ...	pitianer	Photoshop	4	12.06.2006 14:10

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Navigationsreiter mit runden Ecken erstellen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Navigationsreiter mit runden Ecken erstellen

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige