Jak utworzyć menu DHTML?

głosy
0

Muszę stworzyć menu DHTML z określonymi funkcjami, ale nie mogę dowiedzieć się, jak to zrobić. Oto, co trzeba:

Wszystkie elementy są rozplanowane poziomo. Jeśli byłyby one szersze niż ekranu, dwie małe strzałki pojawiają się po prawej stronie menu, które pozwalają, aby je przewijać. Coś takiego:

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

Pozycje menu powinny być klikalne gdziekolwiek w komórce. Powinny one rozciągnąć zarówno pionowo jak i poziomo w zawartości. Tekst w pozycji powinny być skupione zarówno pionowo jak i poziomo. Menu powinno pracować w IE7 / opera / FF / Safari.

Przewijanie jest łatwe - po prostu umieścić to wszystko w pojemniku (powiedzmy, <div>), ustawić pojemnik overflow: hidden, a następnie bawić się z Javascript clientWidth, scrollWidthi scrollLeft. Że już zorientowali się, i już próbowałem.

Ale jak zrobić elementy menu tak elastyczna, można kliknąć w dowolnym miejscu i wyśrodkowany tekst?

Utwórz 09/12/2008 o 15:11
źródło użytkownik
W innych językach...                            


3 odpowiedzi

głosy
2

Spróbuj poniżej CSS:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

A następnie sformatować menu jak:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

To zmusi pionowe wyrównanie i zapobiec linki z opakowania. Daj nam znać jak to działa.

Odpowiedział 09/12/2008 o 15:18
źródło użytkownik

głosy
1

OK, rozmawiałem z moimi przełożonymi i zdecydowali, że to może być OK, że nie można kliknąć prawym przyciskiem myszy i wybierz pozycję menu „Otwórz w nowym oknie”. Jeżeli wymóg ten jest odrzucany, a ja nie jestem związany z <a>elementów linki. Z JavaScript mogę obrócić wszystko w odnośnik. Zatem, wybieram cię pikachoo <table> !

Yap, to herezja, ale to działa. Dokładniej, jest to tylko konstrukt, że mogę myśleć, że może zrobić wszystko z następujących czynności w tym samym czasie:

  • Centrum tekst poziomo i pionowo;
  • Rozciągają się poziomo i pionowo zawartości;
  • Nie zawijać do następnej linii, kiedy elementy zaczynają przepełnienia.

Cokolwiek innego, co może zrobić to samo będzie prawdopodobnie bardziej convulted tak. I zanim ktoś ma pomysł - nie, nie muszę szukania wsparcia silnika. Jest to wewnętrzna aplikacja internetowa. Byłoby bardzo źle, jeśli Google może indeks że ...

Odpowiedział 09/12/2008 o 16:12
źródło użytkownik

głosy
-2

klikalny wszędzie jest łatwe: można powiązać wyzwalacza zdarzeń onclick (i miejmy nadzieję niektóre kursora stylizacji) do elementu komórki atomowej, czy można zrobić atomowej pierwiastków komórce <a> tagów (lub bardziej prawdopodobne, owinąć je w <li>) i Informacje i styl odpowiednio (dopełnienie, margines, bla).

np case 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(Oczywiście tak naprawdę nie polecam inline stylizacji lub skryptów teleskopowe ale masz pomysł)

Stosując wyściółka efektywnie wyśrodkować tekst i mającą szerokość przypisane będą naturalnie rozciągnąć, aby dopasować swoją zawartość.

Odpowiedział 09/12/2008 o 15:21
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more