Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozwijane menu graficzne horyzontalne
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Ferago
Szanowni forumowicze, mam problem z utworzeniem rozwijanego menu graficznego.

Utworzyłem menu w photoshopie, odpowiednio pociąłem i zapisałem z kodem HTML, do tego wstawiłem dodatkową grafikę rollover po najechaniu myszką na dana pozycję w menu.
Szukałem w sieci rozwiązań, są różne przykłady ale nie wiem jak wdrożyć znalezione przykłady w to co próbuje uzyskać.

Efekt moich kombinacji jest statyczny:


Chciałbym rozwinąć pozycję w menu Dla dostawców tak aby rozwinęło się dwa poziomy niżej, nastepnie z każdego z tych poziomów 1 i 2 aby można było rozwinąć jeszcze dalej, czyli trzeci poziom.
Taki przykład który ma niby pomóc



Poniżej kod, moje kombinacje.


W <head></head> dałem:
<style type="text/css">
link menu {
display: none;
}

link:hover menu {
display: block;
}

</style>


W <body> to:


<table id="Tabela_01" width="1023" height="23" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://adres" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Dom','','images/menux2_01.gif',1)"><img src="images/menux_01.gif" alt="Strona główna" width="43" height="23" id="Dom"></a></td>
<td>
<img src="images/menux_02.gif" width="22" height="23" alt=""></td>
<td>
<img src="images/menux_03.gif" width="15" height="23" alt=""></td>
<td>
<img src="images/menux_04.gif" width="5" height="23" alt=""></td>
<td>
<img src="images/menux_05.gif" width="14" height="23" alt=""></td>
<td>
<img src="images/menux_06.gif" width="6" height="23" alt=""></td>
<td>
<img src="images/menux_07.gif" width="21" height="23" alt=""></td>
<td>
<img src="images/menux_08.gif" width="6" height="23" alt=""></td>
<td>
<img src="images/menux_09.gif" width="14" height="23" alt=""></td>
<td>
<img src="images/menux_10.gif" width="6" height="23" alt=""></td>
<td>
<img src="images/menux_11.jpg" width="12" height="23" alt=""></td>
<td>
<img src="images/menux_12.gif" width="11" height="23" alt=""></td>
<td>
<img src="images/menux_13.gif" width="60" height="23" alt=""></td>
<td>
<img src="images/menux_14.gif" width="1" height="23" alt=""></td>
<td><a href="o-firmie.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ofirmie','','images/menux2_15.gif',1)"><img src="images/menux_15.gif" alt="O firmie" width="128" height="23" id="ofirmie"></a></td>
<td>
<img src="images/menux_16.gif" width="1" height="23" alt=""></td>
<td><a href="produkcja.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Produkcja','','images/menux2_17.gif',1)"><img src="images/menux_17.gif" alt="Produkcja" width="97" height="23" id="Produkcja"></a></td>
<td>
<img src="images/menux_18.gif" width="1" height="23" alt=""></td>
<td><a href="odlewy.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Odlewy','','images/menux2_19.gif',1)"><img src="images/menux_19.gif" alt="Odlewy" width="77" height="23" id="Odlewy"></a></td>
<td>
<img src="images/menux_20.gif" width="1" height="23" alt=""></td>
<td><a href="jakosc.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Jakosc','','images/menux2_21.gif',1)"><img src="images/menux_21.gif" alt="Jakosc" width="74" height="23" id="Jakosc"></a></td>
<td>
<img src="images/menux_22.gif" width="1" height="23" alt=""></td>
<td><a href="eko-ochrona.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Ekoochrona','','images/menux2_23.gif',1)"><img src="images/menux_23.gif" alt="Eko ochrona" width="117" height="23" id="Ekoochrona"></a></td>
<td>
<img src="images/menux_24.gif" width="1" height="23" alt=""></td>
<td><menu><link><a href="dotacje.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('DlaDostawcow','','images/menux2_25.gif',1)"><img src="images/menux_25.gif" alt="Dla dostawcow" width="132" height="23" id="DlaDostawcow"></a></link>
<link>
<a href="dotacje.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('DlaDostawcow','','images/menux2_25.gif',1)"><img src="images/menux_25.gif" alt="Dla dostawcow" width="132" height="23" id="DlaDostawcow"></a> <menu>
<link>
<a href="dotacje.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('DlaDostawcow','','images/menux2_25.gif',1)"><img src="images/menux_25.gif" alt="Dla dostawcow" width="132" height="23" id="DlaDostawcow"></a> </link>
<link>
<a href="dotacje.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('DlaDostawcow','','images/menux2_25.gif',1)"><img src="images/menux_25.gif" alt="Dla dostawcow" width="132" height="23" id="DlaDostawcow"></a>
</link>
</menu>
</link>
</menu></td>

<td>
<img src="images/menux_26.gif" width="1" height="23" alt=""></td>
<td><a href="praca.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Praca','','images/menux2_27.gif',1)"><img src="images/menux_27.gif" alt="Praca" width="65" height="23" id="Praca"></a></td>
<td>
<img src="images/menux_28.gif" width="1" height="23" alt=""></td>
<td><a href="kontakt.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Kontakt','','images/menux2_29.jpg',1)"><img src="images/menux_29.jpg" alt="Kontakt" width="90" height="23" id="Kontakt"></a></td>
</tr>
</table>


kamil4u
Jest to stosunkowo trudne do napisania. Znaczy jak wiesz jak to dałbyś radę(, chociaż nadal będzie to w miarę czasochłonne ), ale jak praktycznie nie miałeś styczności z CSS i ew. JS to będzie Ci niezmiernie ciężko.Proponuję Ci zatem:

- znaleźć gotowca w necie i lekko przerobić - najlepsza dla Ciebie opcja
- zlecić komuś - znacznie lepszemu od Ciebie
- nauczyć robić się to samemu, ale ostrzegam, że jeśli nie chcesz zostać koderem to średnio Ci się to opłaca( chyba, że dla własnej przyjemności )

Jak już wybierzesz, którą drogą chcesz iść to napisz znacznie konkretniejsze pytanie.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.