Forum PHP.pl > [AJAX][HTML][CSS]Menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

szymonk237231

22.12.2012, 18:03:28

Witajcie. Chciałbym zrobić menu na stronke, ale nie wiem jak się za to zabrać.
Takowe menu jest na: http://www.realmadryt.net/ lub http://losblancos.pl/ .
Chodzi mi o to menu pod "szukajką".
Jak takie menu zorbić? Lub jak szukać tego w necie?
Prosiłbym o pomoc
Pozdrawiam!

usb2.0

22.12.2012, 18:11:38

jeżeli totalnie nie wiesz jak zaczać to:
najpierw zobacz jak się poziomuje menu czyli np ul li { float: left; }
ajax to byc nie musi, zwykly onclick i np show i hide

szymonk237231

22.12.2012, 18:19:28

Co do CSS to wiem, głównie chodzi mi o ajaxy i te inne, bo w tym to krucho

Nawet nie wiem w jakim języku to zrobić

Dobra, dajmy na to mam takie coś:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button class="klub">Klub</button>
  <button class="mlodziez">Mlodziez</button>
  <button class="serwis">Serwis</button>
<p id="klub" style="display: none">123</p>
<p id="mlodziez" style="display: none">345</p>
<p id="serwis" style="display: none">456</p>
<script>
 
$(".klub").click(function () {
$("#klub").toggle();
});
$(".mlodziez").click(function () {
$("#mlodziez").toggle();
});
$(".serwis").click(function () {
$("#serwis").toggle();
});
</script>
 
</body>
</html>
[HTML] pobierz, plaintext

Jak to zrobić, aby gdy się kliknie w Klub, a potem w Serwis to <p> z informacjami o klubie znikneły a pokazały się dane o Seriwsie?

usb2.0

22.12.2012, 18:54:19

hide()

szymonk237231

22.12.2012, 19:32:57

Cytat(usb2.0 @ 22.12.2012, 18:54:19 )

hide()

Nakierowałbyś?
Bo nie czaje. Tamten kod wzięty z innej stronki

suaby2

24.12.2012, 13:07:14

Uważam, że sam kod html jakis stworzyłeś jest tutaj błędny.
Moim zdaniem takie menu jak podajesz jest zrobione na zasadzie jQuery Tabs.

Twój kod html powienien wygladac mnie więcej tak. Jeżeli chcesz mieć takie menu.

[HTML] pobierz, plaintext 
<html>
<body>
    <ul class="menu">
        <li id="home"><a href="#">Home</a></li>
        <li id="aboutus"><a href="#">About Us</a></li>
        <li id="gallery"><a href="#">Gallery</a></li>
        <li id="contact"><a href="#">Contact</a></li>
    </ul>
<div id="podmenu">
    <div class="home">
        <ul>
            <li>O nas</li>
            <li>Co Oferujemy?</li>
            <li>Nasze produkty</li>
        </ul>
    </div>
<div class="aboutus">
        <ul>
            <li>kim jesttesmy</li>
            <li>Dlaczego my?</li>
            <li>Wybierz nas</li>
        </ul>
    </div>
 
</div>
</body>
 
</html>
[HTML] pobierz, plaintext

Taki kod musisz ostylowac oczywiście w CSS aby twoje podmenu

Kod

itp.... było schowane dopiero po najechaniu sie pojawiało ( poszukaj menu poziome z poziomym submenu).
Do tego musisz ładnie to oprogramować w w jQuery. Kodu sam nie dostaniesz, bo wszystko mozna znaleźć na www.jquery.com, oraz jest mnostwo poradników z jQuery Tabs
Podpowiem CI tylko ze na poczatku musisz schować wszystkie podmenu, pokazac tylko pierwszy. z home, następnie przy najechaniu myszką albo kliknięciu na następne menu musisz znowu schować wszystkie podmenu i pokazać tylko to podmenu które Cię interesuje.
Internet to miejsce dla ludzi kreatywnych, poszukaj rozwiązań sam, dopiero jak będziesz miał fragment kodu wróć tutaj to pomogę.

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.