Navi mal etwas anders

[bheneka]

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.

 

[jackprince]

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

 

[sokie]

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.?!

 

[freakyfrank]

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....

 

[jackprince]

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

<div id="circular_menu">
 <ul id="circular_left">
   <li><a>1</a></li>
   <li><a>2</a></li>
   <li><a>3</a></li>
 </ul>
 <ul id="circular_right">
   <li><a>4</a></li>
   <li><a>5</a></li>
   <li><a>6</a></li>
 </ul>
</div>

css

body {font-size: 10px;}
#circular_menu {
 background: url(bildadresse) no-repeat 0 0; /* bild eines kreises */
 width: 20em;
 height: 20em;
 margin: 0;
 padding: 0; /* oder doch nicht? */
}
#circular_left {
  float:left;
  margin: 0;
  padding: 0;
  width: 100px;
}
#circular_left {
  float:right;
  margin: 0;
  padding: 0;
  width: 100px;
}

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.