Anzeige

Navi mal etwas anders

Navi mal etwas anders | PSD-Tutorials.de

Erstellt von bheneka, 12.11.2008.

  1. bheneka

    bheneka DvD

    Dabei seit:
    07.12.2006
    Beiträge:
    304
    Geschlecht:
    männlich
    Ort:
    Bruchsal
    Software:
    Adobe CS2/CS3
    Navi mal etwas anders
    Hi zusammen,

    ich möchte meine Navigation entlang einer ungleichmäßigen Linie an verschiednen Punkten ausrichten. Also z.B. entlang eines Kreises.

    Hat jemand eine Idee wie ich das umsetzen kann?
    Also außer mit flash.
     
    #1      
  2. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Navi mal etwas anders
    AW: Navi mal etwas anders

    Nur mit Sonderlösungen

    • ImageMap
    • JS Funktion welche z.B. in einem Div mehrere Elemente nach einem Prinzip oder zufällig anordnet
    • PHP nach ähnlichem Prinzip
    Davon ausgehend das es für alle Browser funktionieren soll. Für den Amaya, FF, etc. gibt es eventl. möglichkeiten mit SVG.

    Als einfachste handarbeit Methode gibt es natürlich die Möglichkeit die Elemente absolut zu positionieren.

    Siehe hier : http://csscreator.com/?q=node/20933
     
    #2      
  3. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Navi mal etwas anders
    AW: Navi mal etwas anders

    eigentlich sollte das doch recht einfach sein, wenn man diese elemente innerhalb eines Containers absolut positioniert und sie am Umriss des Kreises ausrichtet.?!
     
    #3      
  4. freakyfrank

    freakyfrank Noch nicht viel geschrieben

    Dabei seit:
    07.10.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Navi mal etwas anders
    AW: Navi mal etwas anders

    Kommt halt darauf an ob deine Navigation statisch ist, also immer am gleichen Ort bleibt, oder sich immer mit irgendetwas mitbewegt, sich vergrössert oder was auch immer.

    Mach doch mal eine Skizze, dann kann man besser helfen....
     
    #4      
  5. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Navi mal etwas anders
    AW: Navi mal etwas anders

    ob sie statisch ist oder nicht ist eigentlich sekundär zumindest
    die von der lokalität her. Auch Effekte wie vergrößern etc. sind
    nicht entscheidend und auch nicht wichtig.

    Einzig die ausrichtung der einzelnen Menüpunkte an Formen ist
    ja gefragt also ist die art der ausrichtung an den Formen das
    was wissenswert ist.

    An einem Kreis könnte man das ganze z.B. wie folgt machen

    HTML:
    1.  
    2. <div id="circular_menu">
    3.  <ul id="circular_left">
    4.    <li><a>1</a></li>
    5.    <li><a>2</a></li>
    6.    <li><a>3</a></li>
    7.  </ul>
    8.  <ul id="circular_right">
    9.    <li><a>4</a></li>
    10.    <li><a>5</a></li>
    11.    <li><a>6</a></li>
    12.  </ul>
    13. </div>
    14.  
    css
    HTML:
    1.  
    2. body {font-size: 10px;}
    3. #circular_menu {
    4.  background: url(bildadresse) no-repeat 0 0; /* bild eines kreises */
    5.  width: 20em;
    6.  height: 20em;
    7.  margin: 0;
    8.  padding: 0; /* oder doch nicht? */
    9. }
    10. #circular_left {
    11.   float:left;
    12.   margin: 0;
    13.   padding: 0;
    14.   width: 100px;
    15. }
    16. #circular_left {
    17.   float:right;
    18.   margin: 0;
    19.   padding: 0;
    20.   width: 100px;
    21. }
    22.  
    So als grobe Idee ... dann einfach die Menüpunkte der reihe nache je nach
    Menü immer mehr nach links oder rechts verschieben.
    Mann muss zwar wieder jeden Menüpunkt einzeln anfassen, aber man kann
    zumindest die werte von links auf für rechts nehmen.
     
    #5      
x
×
×
teststefan