Anzeige

Navigationsreiter mit runden Ecken erstellen

Navigationsreiter mit runden Ecken erstellen | PSD-Tutorials.de

Erstellt von patrick_l, 21.06.2012.

  1. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    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:
    1.  
    2. <!doctype html>
    3. <meta charset="utf-8">
    4. <title>Nav 3 Ebenen</title>
    5. </head>
    6.     <header>
    7.         <nav>
    8.             <ul>
    9.                 <li><a href="#">Punkt 1</a>
    10.                     <ul>
    11.                         <li><a href="#">Sub 1</a>
    12.                         <ul>
    13.                             <li><a href="#">Sub-Sub 1</a></li>
    14.                             <li><a href="#">Sub-Sub 2</a></li>
    15.                         </ul>
    16.                         </li>
    17.                         <li><a href="#">Sub 2</a></li>
    18.                         <li><a href="#">Sub 3</a></li>
    19.                     </ul>
    20.                 </li>
    21.                 <li><a href="#">Punkt 2</a></li>
    22.                 <li><a href="#">Punkt 3</a></li>
    23.                 <li><a href="#">Punkt 4</a></li>
    24.             </ul>
    25.         </nav>
    26.     </header>
    27. </body>
    28. </html>
    29.  
    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
     
    #1      
  2. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    Navigationsreiter mit runden Ecken erstellen
    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
     
    #2      
  3. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Navigationsreiter mit runden Ecken erstellen
    AW: Navigationsreiter mit runden Ecken erstellen

    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 ;)
     
    #3      
  4. _schatzi_

    _schatzi_ Lampen-Sau

    Dabei seit:
    07.08.2009
    Beiträge:
    1.660
    Geschlecht:
    männlich
    Software:
    CS6
    Navigationsreiter mit runden Ecken erstellen
    #4      
  5. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Navigationsreiter mit runden Ecken erstellen
    AW: Navigationsreiter mit runden Ecken erstellen

    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: 21.06.2012
    #5      
  6. _schatzi_

    _schatzi_ Lampen-Sau

    Dabei seit:
    07.08.2009
    Beiträge:
    1.660
    Geschlecht:
    männlich
    Software:
    CS6
    Navigationsreiter mit runden Ecken erstellen
    AW: Navigationsreiter mit runden Ecken erstellen

    Hallo!
    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.
     
    #6      
  7. BeBa

    BeBa Nicht mehr ganz neu hier

    Dabei seit:
    01.09.2007
    Beiträge:
    212
    Geschlecht:
    männlich
    Ort:
    Bamberg
    Software:
    Adobe CS5.5 Master Collection
    Navigationsreiter mit runden Ecken erstellen
    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
     
    #7      
Seobility SEO Tool
x
×
×