Liste mit vielen Links wie Select Element

Tommy57

Erfahrenes Mitglied
Hallo,

ich baue gerade für eine Website eine Art Subnavi, die urspünglich als Select Element geplant war, welches bei onchange die URL wechselt, auf den jeweiligen Eintrag.

Es ist an dieser Stelle jedoch sehr wichtig, dass Google diese URLs alle indizieren kann, was er bisher scheinbar nicht konnte. Grund wird das onchange sein, bzw. die Tatsache, dass es sich hierbei nicht um echte Links handelt.

Nun möchte ich also ein Element bauen, was sich wie ein Select Element verhält, was aber dutzende Links beinhaltet. Mein Aufbau sieht aktuell ungefähr so aus:

HTML:
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  ul{width:200px;height:20px;max-height:200px;background:#a7a7a7;list-style-type:none;overflow:hidden;position:relative;z-index:50;}
  ul:hover{height:auto;overflow:scroll;overflow-x:hidden;overflow-y:scroll;}
</style>
  <div style="height:40px;position:relative;">
    <ul>
      <li><span>item 1</span></li>
      <li><a href="javascript:void(0);">item 1</a></li>
      <li><a href="javascript:void(0);">item 2</a></li>
      <li><a href="javascript:void(0);">item 3</a></li>
    </ul>
  </div>

Kennt jemand vielleicht eine bessere Idee? Ich hab mir das so zusammen gewürfelt und weiß nicht, ob das wirklich gut ist. Also für TouchScreens würde ich noch ein onclick Event hinzufügen, der das Ding aufklappen lässt, bis es wieder abgewählt wird und zuklappt.

Gruß, Tommy
 
Diese vier ausgewählten Beispiele aus Stu Nicholls' umfang- und variationsreich kategorisierten Menus dürften bei der Inspiration und Entscheidung zur CSS-technischen Umsetzung deines Vorhabens behilflich sein:


  1. http://www.cssplay.co.uk/menus/concertina-slide.html
  2. http://www.cssplay.co.uk/menus/concertina-scroll.html
  3. http://www.cssplay.co.uk/menus/cssplay-click-slide.html
  4. http://www.cssplay.co.uk/menus/cssplay-click-click.html
    -hab hier einen der horizontalen Menüpunkte (oder sie vertikal ausgerichtet) vor Augen;-)-
 
Zuletzt bearbeitet:
Danke spicelab.

Das zweite Beispiel entspricht genau meinem Beispiel. Das 4. gefällt mir sehr gut, lässt aber keine scrollbare Liste zu. Ich habe dafür ein onclick Event eingebaut.

Gut, ich denke dann, dass meine Lösung vollkommen okay ist, wenn Stu Nicholls ähnliche Varianten anbietet.

Gruß, Tommy
 
Zurück