Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [AJAX][HTML][CSS]Menu
szymonk237231
post
Post #1





Grupa: Zarejestrowani
Postów: 102
Pomógł: 0
Dołączył: 8.04.2011

Ostrzeżenie: (0%)
-----

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!
Go to the top of the page
+Quote Post
usb2.0
post
Post #2





Grupa: Zarejestrowani
Postów: 341
Pomógł: 25
Dołączył: 28.09.2008
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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

Ten post edytował usb2.0 22.12.2012, 18:12:12
Go to the top of the page
+Quote Post
szymonk237231
post
Post #3





Grupa: Zarejestrowani
Postów: 102
Pomógł: 0
Dołączył: 8.04.2011

Ostrzeżenie: (0%)
-----

Co do CSS to wiem, głównie chodzi mi o ajaxy i te inne, bo w tym to krucho (IMG:style_emoticons/default/biggrin.gif)
Nawet nie wiem w jakim języku to zrobić

Dobra, dajmy na to mam takie coś:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  5. </head>
  6. <body>
  7.   <button class="klub">Klub</button>
  8.   <button class="mlodziez">Mlodziez</button>
  9.   <button class="serwis">Serwis</button>
  10. <p id="klub" style="display: none">123</p>
  11. <p id="mlodziez" style="display: none">345</p>
  12. <p id="serwis" style="display: none">456</p>
  13. <script>
  14.  
  15. $(".klub").click(function () {
  16. $("#klub").toggle();
  17. });
  18. $(".mlodziez").click(function () {
  19. $("#mlodziez").toggle();
  20. });
  21. $(".serwis").click(function () {
  22. $("#serwis").toggle();
  23. });
  24. </script>
  25.  
  26. </body>
  27. </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?
Go to the top of the page
+Quote Post
usb2.0
post
Post #4





Grupa: Zarejestrowani
Postów: 341
Pomógł: 25
Dołączył: 28.09.2008
Skąd: Lublin

Ostrzeżenie: (0%)
-----

hide()
Go to the top of the page
+Quote Post
szymonk237231
post
Post #5





Grupa: Zarejestrowani
Postów: 102
Pomógł: 0
Dołączył: 8.04.2011

Ostrzeżenie: (0%)
-----

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


Nakierowałbyś?
Bo nie czaje. Tamten kod wzięty z innej stronki
Go to the top of the page
+Quote Post
suaby2
post
Post #6





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 24.12.2012

Ostrzeżenie: (0%)
-----

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 
  1. <html>
  2. <body>
  3.     <ul class="menu">
  4.         <li id="home"><a href="#">Home</a></li>
  5.         <li id="aboutus"><a href="#">About Us</a></li>
  6.         <li id="gallery"><a href="#">Gallery</a></li>
  7.         <li id="contact"><a href="#">Contact</a></li>
  8.     </ul>
  9. <div id="podmenu">
  10.     <div class="home">
  11.         <ul>
  12.             <li>O nas</li>
  13.             <li>Co Oferujemy?</li>
  14.             <li>Nasze produkty</li>
  15.         </ul>
  16.     </div>
  17. <div class="aboutus">
  18.         <ul>
  19.             <li>kim jesttesmy</li>
  20.             <li>Dlaczego my?</li>
  21.             <li>Wybierz nas</li>
  22.         </ul>
  23.     </div>
  24.  
  25. </div>
  26. </body>
  27.  
  28. </html>
[HTML] pobierz, plaintext


Taki kod musisz ostylowac oczywiście w CSS aby twoje podmenu
Kod
<div class="home"></div>,
<div class="aboutus"></div>
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ę.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 30.08.2025 - 08:58
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn