Forum PHP.pl > [html][js] Podwójne menu al'a bash.org.pl

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html][js] Podwójne menu al'a bash.org.pl

Lee

21.04.2008, 20:50:13

Mam pytanie. Jak wygląda kod na menu al'a bash (jest na górze np. przeglądaj, najeżdżamy i na dole jest drugie (tygodniowe, miesięczne etc.) i je wybieramy). Problem jest w tym głównie, że chcę aby kod nie gryzł się z walidatorem w3c pod xhtml 1.0 translational i z css 2.0. Z góry dzięki za rady

webdice

21.04.2008, 20:51:48

Popatrz w źródło i będziesz wiedział jak jest to zrobione. Nikt Ci gotowca tu nie poda.

Lee

23.04.2008, 16:24:18

Tyle tylko, że dzisiaj mi bash się nie ładuje, a termin mnie goni

Tak na marginesie to dobrze jak by to z div'ami współgrało.

P.S: Wiem, że tutaj gotowców się nie podaje, źle się wyraziłem.

Sorry za posta pod postem, ale znalazłem jakieś tam rozwiązanie, które jednak nie działa w 100%. Otóż w dwóch opcjach menu w tym kodzie mają wyskoczyć podopcje. Jednak w obecnej konfiguracji gdy raz się pojawią nie znikają już, a ja chce że jak zjedzie się poza obszar danego menu lub jego pod opcji, żeby zniknęło. Oto kod jaki narazie mam

Plik .html

[HTML] pobierz, plaintext 
<div class="watch"><h4><a href="#" style="font-size: 18px; cursor:pointer;" onmouseover="showContent(this);">&nbsp;</a></h4>
    <div style="width: 400px; display: none;">
        <div class="daily_02"><a href="#" style="font-size: 18px;">&nbsp;</a></div>
        <div class="weekly_02"><a href="#" style="font-size: 18px;">&nbsp;</a></div>
        <br style="clear: both"/>
    </div>
</div>
[HTML] pobierz, plaintext

Plik .css

Kod

div.daily_02 {
    margin: 2px 0px 0px -90px;
    width: 39px; height: 10px;
    background-image: url('images/daily_01.gif');
    float: left;
    overflow: hidden;
}
div:hover.daily_02 {
    margin: 2px 0px 0px -90px;
    width: 39px;
    height: 10px;
    background-image: url('images/daily_02.gif');
    float: left;
    overflow: hidden;
}
div.weekly_02 {
    margin: 2px 0px 0px -35px;
    width: 56px;
    height: 10px;
    background-image: url('images/weekly_01.gif');
    float: left;
    overflow: hidden;
}
div:hover.weekly_02 {
    margin: 2px 0px 0px -35px;
    width: 56px;
    height: 10px;
    background-image: url('images/weekly_02.gif');
    float: left;
    overflow: hidden;
}

Plik .js

Kod

function showContent(vThis)
{
// http://www.javascriptjunkie.com
// alert(vSibling.className + " " + vDef_Key);
vParent = vThis.parentNode;
vSibling = vParent.nextSibling;
while (vSibling.nodeType==3) { // Fix for Mozilla/FireFox Empty Space becomes a TextNode or Something
vSibling = vSibling.nextSibling;
};
vSibling.style.display = "block";

return;
}

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.