 [HTML][CSS] Rozwijane menu |
  |
| [HTML][CSS] Rozwijane menu |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 76 Pomógł: 0 Dołączył: 8.01.2009 Ostrzeżenie: (0%) 
 |
Witam
chcę zrobić menu po kliknięciu na którym rozwinie się podmenu, ale nie wiem jak. Proszę o pomoc |
 |
 
|
|
Post
#2
|
|
|
Grupa: Nieautoryzowani Postów: 45 Pomógł: 16 Dołączył: 28.02.2009 Ostrzeżenie: (0%)
|
Masz linka z odpowiedzią na to pytanie:
http://www.kurshtml.boo.pl/skrypty/menu_rozwijane.html |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 76 Pomógł: 0 Dołączył: 8.01.2009 Ostrzeżenie: (0%)
|
Wielkie dzięki
Witam wstawiłem ten kod według wskazówek, ale niestety nie wyświetla mi się prawidłowo. Powinno być kilka linków obok siebie i tylko jeden w środku powinien się rozwijać. Po umieszczeniu tego link się rozwija ale niestety przesuwa ine linki znajdujące się za nim i psuje układ strony. Oto kod: Proszę o pomoc w naprawie tego lub ewentualnie o pomysł na zrobienie tego innym sposobem. Dziękuję |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 214 Pomógł: 26 Dołączył: 7.11.2007 Skąd: Warszawa Ostrzeżenie: (0%)
|
http://www.cssplay.co.uk/menus/ znajdziesz cos dla siebie
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 76 Pomógł: 0 Dołączył: 8.01.2009 Ostrzeżenie: (0%)
|
Witam
Skorzystałem z pomocy i zrobiłem to za pomocą: http://www.alistapart.com/articles/dropdowns/ " target="_blank"> http://www.alistapart.com/articles/dropdowns/ Wszystko działa dokładnie tak jak chcę ale problemem jest że w IE nic się nie rozwija (są tylko nagłówki). Czy można coś z tym zrobić?? |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 122 Pomógł: 11 Dołączył: 24.01.2008 Ostrzeżenie: (0%)
|
Kod menu rozwijanego z kursu na stronie: http://www.kurshtml.boo.pl/skrypty/menu_rozwijane.html jest moim skromnym zdaniem najlepszy. Nawet w starych przeglądarkach wszystko śmiga.
W Twoim przypadku problem z wyżej wymienionym menu polega na tym, że błędnie zapakowałeś go w kod. Powinno być: Kod <dl id="menu0">
<dt><a href="index.php">Home</a></dt> <dt><a href="aboutme.php">About me</a></dt> <dt>Gallery</dt> <dd><a href="gallery.php">Element 1.1</a></dd> <dd><a href="gallery.php">Element 1.2</a></dd> <dd><a href="gallery.php">Element 1.3</a></dd> <dt><a href="contact.php">Contact</a></dt> </dl> <script type=\"text/javascript\"> // <![CDATA[ new Menu('menu0', '', false, true); // ]]> </script> Ten post edytował Savage.Mephisto 28.04.2009, 21:18:51 |
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 76 Pomógł: 0 Dołączył: 8.01.2009 Ostrzeżenie: (0%)
|
Zrobiłem dokładnie tak jak powiedziałeś i wyświetlają mi się wszystkie elementy jeden pod drugim
a chcę żeby się wyświetlały obok siebie. |
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 122 Pomógł: 11 Dołączył: 24.01.2008 Ostrzeżenie: (0%)
|
Żeby poszczególne elementy były obok siebie trzeba odpowiednio zmodyfikować kod CSS.
Podam Ci gotowe rozwiązanie, ale oparte o listę <ul>,<li>. Kiedyś zrobiłem takie menu dla potrzeb jednego z projektów. Oto kod: - CSS: Kod #nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1; text-align: left; z-index: 1; } #nav a { display: block; width: 8em !important; width: 9em; } #nav li { float: left; width: 10em !important; width: 9em; } #nav li ul { position: absolute; background: #000; width: 17em; left: -999em; } #nav li ul a { display: block; width: 16em !important; width: 17em; } #nav li ul ul { margin: -1em 0 0 10em; } #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; } - HTML: Kod <ul id="nav"> <li><a href="admin.php">Galeria zdjęć</a> <ul> <li><a href="?galeria=1">Referencje</a></li> </ul> </li> <li><a href="admin.php">Podstrony</a> <ul> <li><a href="?go=menulist">Pokaż podstrony</a></li> <li><a href="?go=textadd">Dodaj podstronę</a></li> </ul> </li> <li><a href="admin.php">Kategorie / podkategorie</a> <ul> <li><a href="?go=katlist">Pokaż kategorie</a></li> <li><a href="?go=addkatform">Dodaj kategorię</a></li> </ul> </li> </ul> - JS (dla starszych przeglądarek typu mIsiE): Kod sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); Ten post edytował Savage.Mephisto 28.04.2009, 22:17:10 |
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 76 Pomógł: 0 Dołączył: 8.01.2009 Ostrzeżenie: (0%)
|
Dzięki za kod.
Mam pytanie odnosnie JS ponieważ ja programuje w php i nie wiem zawiele o JS. Gdzie umieścić ten kod JS? Jak i gdzie go wywołać? Dzieki za pomoc |
|
|
|
|
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 122 Pomógł: 11 Dołączył: 24.01.2008 Ostrzeżenie: (0%)
|
Aby nie wprowadzać bałaganu zrób to w ten sposób:
stwórz sobie plik o nazwie np.: topmenu.js i wrzuć tam odpowiednią funkcję, która Ci podałem (czyli sfHover = function()). W dokumencie (X)HTML zaś wpisz pomiędzy znacznikami <head></head>: Kod <script type="text/javascript" src="topmenu.js"></script> Oczywiście ścieżkę dostępu do pliku możesz sobie dowolnie zmienić. To tyle. Have fun! Ten post edytował Savage.Mephisto 29.04.2009, 21:03:43 |
|
|
|
|
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 76 Pomógł: 0 Dołączył: 8.01.2009 Ostrzeżenie: (0%)
|
Ok wszystko działa wyświetla jedno obok drugiego tylko ja umieszczam to w sekcji div nagłówek
a pojawia mi się to w sekcji div poniżej. W nagłówku posiadam logo jpg sformatowane jako float: left. Czy to może być przyczyną(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) |
|
|
|
|
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 122 Pomógł: 11 Dołączył: 24.01.2008 Ostrzeżenie: (0%)
|
To menu daj do nowego div'a i nadaj mu atrybut float: right oraz odpowiednią długość. Powinno to załatwić sprawę. O ile dobrze Cię zrozumiałem.
Ten post edytował Savage.Mephisto 29.04.2009, 22:05:34 |
|
|
|
|
|
Aktualny czas: 25.08.2025 - 02:49 |
