menu w xHTML

[lion]

Witam! Chciałbym na swojej przyszłej stronie zrobić menu, które byłoby na zasadzie tego z GMClan. Chodzi mi o to, że klikam na obrazek, a pod nim odrazu wyświetlają się linki. Jak dobrze wiem, to zrobione jest w xHTML? Szczególnie te pytanie kieruje do Ranmy bo przecież on je robił ;)

 

P.S - Jeżeli pytanie już się gdzieś pojawiło, to bardzo przepraszam ale jak już wiecie długo nie byłem obecny na scenie GM'a, a tym bardziej na forum.

[Firemark]

Siorawno czy html,czy xhtml.Html i xhtm;l praiwe to samo,tylko żę xhtml jest nowoczesny i ma pewncyh fajnych drobiazgów(za fajnych :D).Jest to robione na javascrpcie zapewnie.Nie zagłębiam sie jak zrobione...

[Marmot]

Nie łatwiej użyć takiej opcji Pokaż źródło strony xD ?

[Firemark]

Trudno sie skapnąć coś w kodzie rannmowskim,może dla bezpieczeństwa?

[Marmot]

To nie dla bezpieczeństwa, tylko Ranma operuje na divach, a poza tym, przeglądarka zlepiła kod skina, shoutboxa, menu i wyświetlania newsów w jedno, dlatego to jest takie nie do połapania :D .

[Tymon]

A to nie jest przypadkiem w JS ?

[Marmot]

No przecież mówimy, że JS, ale poprostu najlepiej zczytać, czytając kod strony.

[Tymon]

Marmot, ty też czasami nie przeczytasz zanim odopowiesz :P I to chyba częściej odemnie.

[Marmot]

Ale ja nic nie marudzę, tylko przypominam :D

 

PS. Ej no, wracajmy do tematu bo offtop się robi.

[Ranmus]

A może byście się tak javascriptu pouczyli? Ja nie korzystałem z żadnego gotowca. Javascript jest bardzo podobny do gml'a. W samym xhtmlu takiego menu jeszcze nie potrafię robić, dlatego podpieram się javascriptem.

 

Na początku potrzebna jest nam javascript'owa funkcja do odczytu obiektu (podam z mojej strony):

function obiekt(id)
{
    var ob;
    if(document.getElementById)
    {
 ob = document.getElementById(id);
    } 
    else if (document.all)
    { 
 ob = document.all[id];
    } 
    else if (document.layers)
    { 
 ob = document.layers[id];
    }
    return ob;
}

Samo operowanie na identyfikatorze warstwy nam nie wystarczy, ponieważ IE zbiór warstw przechowuje w tablicy document.all, natomiest Netscape i pochodne przechowują w tablicy document.layers (ach ta rozbieżność standardów). Dlatego też będziemy stosować powyższą funkcją do obsługi warstwy w zależności od przeglądarki (mimo tego, że większość przeglądarek obsługuje już nową funkcję standaryzacyjną: getElementByID). Funkcja obiekt sprawdza jaka tablica jest zadeklarowana w javascripcie i wyciaga id odpowiedniej warstwy.

 

Drugi krok to zdefiniowanie guzikow oraz elementow podmenu w html:

<a href="javascript:pokaz('menu1')">menu 1</a>
<a href="javascript:pokaz('menu2')">menu 2</a>
<a href="javascript:pokaz('menu3')">menu 3</a>
itd.
<div id="menu1" class="menu">tresc menusa 1</div>
<div id="menu2" class="menu">tresc menusa 2</div>
<div id="menu3" class="menu">tresc menusa 3</div>

 

Teraz style.css:

.menu
{
visibility: hidden;
position: absolute;
width: 100px;
height 300px;
background: #AAA;
border: 1px solid black;
}

 

Jak widzimy po klasie css "menu" zakrywamy wszystkie warstwy tej klasy a przy okazji nadajemy wspólne parametry jak wysokość i szerokość podmenu, tła, ramki oraz pozycję absolutną.

 

Teraz czas dopisac do naszego skryptu JS dodatkowa funkcje "pokaz", ktora jest uzywana w linkach powyzej. Przedtem dopiszmy sobie zmienna globalna, ktora nam posluzy do trzymania id aktualnie wyswietlanej warstwy tak by kliknieciu na inne menu moc ja zakryc.

 

var aktualna;

function pokaz(id)
{
  if ( aktualna ) aktualna.style.visibility = "hidden"; //zakrywamy poprzednia warstwe  zmieniajac jej styl css "visibility"

  menu = obiekt( id ); //pobieramy "uchwyt" danej warstwy
  aktualna = menu;    // przypisujemy ten uchwyt do zmiennej
  menu.style.visibility = "visible"; //pokazujemy zadana warswte
}

I to wszystko. :)

Możemy jeszcze sobie np. dorobić w funkcji pokaz dodatkowy argument "left", w którym będziem podawać przesunięcie warstwy menusa od lewej. Do tej funkcji dopisujemy wtedy taką linijkę:

menu.style.left = left+"px ";

Jak widać operowanie na stylach css poprzez JS wcale nie jest trudne. Oczywiście podałem tylko jeden z przykładów tworzenia takiego menusa (i to jeszcze z pamięci). Bo można by się pofatygować o document.write (jak to jest na thecrims.org - kalkulator mojego autorstwa). Można także zamiast linków używać inne warstwy z parametrem onmouseover="java script:pokaz(id,left)", a w pokazywanej warstwie dac onmouseout="java script:this.visibility='hidde'". To już wasz wybór.

[lion]

A jak zrobić żeby po najechaniu na obrazek, zmieniał on kolor? Nigdy tego nie stosowałem więc nie wiem ;)

[Tymon]

Użyj CSS (a co :P). A dokładniej to hover. Np.

<style TYPE="text/css">
     <!--
     TD:hover {color:rgb(150,150,150);}
     -->
</style>

Nie wiem tylko czy na IE bedzie dobrze to wyświetlane.

[Marmot]

Lion:

jest taki atrybut Javascript o nazwie Onmouseover.

[lion]

To wiem, ale nie znam całości kodu ;] Zaraz pewnie napiszesz caly kod, przez to nabijesz post bo jakbyś nie mógł wszystkiego napisać w poprzednim, a nie dziesięć razy naprowadzenia :[