Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][html] Menu rozsuwane
Forum PHP.pl > Forum > Przedszkole
thomson89
9.04.2009, 22:16:40
Jak można zrobić menu rozsuwane, ttylko za pomocą css? To ma być w lini, jak najedziemy na tytył, to zmieni sie background i rozsunie menu.Ale również jak najedziemy na rozusawne elemnty to też się zmieni background. Niestety nie mam pomysłu jak to wykonać.

Kod
<ul>
<li>Tytul
<ul>
<li>Rozsuwane 1</li>
<li>rozsuwane 2</li>
</ul>
</li>
<li>tytulik
<ul>
<li>Rozsuwane 3</li>
<li>rozsuwane 4</li>
</ul>
</li>
thekoks
10.04.2009, 08:09:50
takie http://www.kurshtml.boo.pl/skrypty/menu_wy..._rozwijane.html questionmark.gif
albrzykowski
10.04.2009, 09:02:23
Hej,
Odwiedź te linki:

http://www.cssmenumaker.com/

http://www.alistapart.com/articles/dropdowns

I zaznaczę, że samym CSS będziesz miał problem ze względu na brak dobrej obsługio pseudoklasy hover w IE.
W tej przeglądarce reaguje tylko dla a jeżli dobrze pamiętam. Stąd dla IE należałoby dopisać JavaScript. Wszystko to masz opisane w drugim linku.

Podaje Ci mój kod, może Ci się przyda:

[PHP] pobierz, plaintext 
  1. <?php
  2. //<![CDATA[
  3. function hideMenu(){
  4.     var ul=document.getElementsByTagName('ul');
  5.     for(var i=0;i<ul.length;i++){
  6.         if(ul[i].className=='submenu'){
  7.             ul[i].className+=' hiden';
  8.         }
  9.     }
  10. }
  11. function setClass(){
  12.     this.className+=' over';
  13. }
  14. function resetClass(){
  15.     this.className=this.className.replace('over', '');
  16. }
  17. function dynamicMenu(){
  18.     if(document.getElementById){
  19.         var navRoot=document.getElementById('dynamic-menu');
  20.         for(var i=0;i<navRoot.childNodes.length;i++){
  21.             var node=navRoot.childNodes[i];
  22.             if(node.nodeName=='LI'){
  23.                 if(node.addEventListener){
  24.                     node.addEventListener('mouseover', setClass, false);
  25.                     node.addEventListener('mouseout', resetClass, false);
  26.                 }    
  27.                 else{
  28.                     node.onmouseover=function(){
  29.                         this.className+=' over';
  30.                     }
  31.                     node.onmouseout=function(){
  32.                         this.className=this.className.replace('over', '');
  33.                     }
  34.                 }    
  35.             }
  36.         }
  37.     }
  38. }
  39. function initMenu(){
  40.     if(window.addEventListener){
  41.         window.addEventListener('load', hideMenu, false);
  42.         window.addEventListener('load', dynamicMenu, false);
  43.     }
  44.     else if(window.attachEvent){
  45.         window.attachEvent('onload', hideMenu);
  46.         window.attachEvent('onload', dynamicMenu);
  47.     }
  48. }
  49. initMenu();
  50. //]]>
  51. ?>
[PHP] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <ul id="dynamic-menu">
  2. <li>
  3. <ul class="submenu">
  4. <li><a href="#">Link1 1</a></li>
  5. <li><a href="#">Link 2</a></li>
  6. </ul>
  7. </li>
  8. </ul>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #main-menu{
  2. position: absolute;
  3. clear: both;
  4. display: block;
  5. }
  6. #main-menu ul{
  7. list-style: none;
  8. }
  9. #main-menu ul li{
  10. float: left;
  11. }
  12. #main-menu li{
  13. position: relative;
  14. }
  15. #main-menu li ul{
  16. position: absolute;
  17. }
  18. #main-menu li ul li{
  19. display: block;
  20. }
  21. #main-menu li ul li a{
  22. display: block;
  23. }
  24. /* DYNAMIC-MENU CLASSES */
  25. .hiden{
  26. display: none;
  27. }
  28. .over ul{
  29. display: block;
  30. clear: both;
  31. }
[HTML] pobierz, plaintext


Pozdrawiam!
kantek
10.04.2009, 10:06:30
Proszę rozwiązanie: samym CSSem się nie da bo najedziesz na element
i ma się pokazać inny element natomiast możesz to zrobić bardzo łatwą funkcją js
napisałem ją kiedy zmęczyło mnie szukanie na necie rozsuwanych menu, których kod zajmował setki linijek
(zasada działania oparta na stylu a dokładniej na wartości visibility)

oto ona i twój przykład:
oczywiście styl wrzuć sobie do osobnego pliu css

UWAGA DAJE W PHP BO W HTML nie pokazuje mi wcięć exclamation.gif! (pomiń u siebie znaczniki php)
[PHP] pobierz, plaintext 
  1. <?php
  2. <html>  
  3. <head>  
  4.      
  5. <script LANGUAGE="JavaScript">  
  6. var refer=true;  
  7. function showHide(id) {  
  8.     var box = document.getElementById(id);  
  9.     if (refer) {  
  10.         box.style.visibility="visible";  
  11.         refer=false;  
  12.     }  
  13.     else {  
  14.         box.style.visibility="hidden";  
  15.         refer=true;  
  16.     }  
  17. }  
  18. </script>
  19.  
  20. <style type="text/css">
  21. ul
  22. {
  23. padding:0px;
  24. margin:0px;
  25. list-style-type:none;
  26. display:inline;
  27. }
  28. li
  29. {
  30. float:left;
  31. }
  32. li:hover
  33. {
  34. background:red;
  35. }
  36. .section
  37. {
  38. display:block;
  39. width:120px;
  40. visibility:hidden;
  41. }
  42. a
  43. {
  44. display:block;
  45. width:100%;
  46. background:red;
  47. }
  48. a:hover
  49. {
  50. display:block;
  51. width:100%;
  52. background:yellow;
  53. }
  54. </style>  
  55. </head>  
  56.  
  57. <body>  
  58.         <ul id="menu1">  
  59.             <li class="item_box" onmouseout="showHide('menu1-1-section');" onmouseover="showHide('menu1-1-section');">  
  60.                 <div id="menu1-1">Tytul</div>  
  61.                 <div id="menu1-1-section" class="section">  
  62.                     <a id="menu1-1-0" href="index.php">rozsuwane 1</a>  
  63.                     <a id="menu1-1-1" href="index.php">rozsuwane 2</a>  
  64.                 </div>  
  65.             </li>
  66.             <li class="item_box" onmouseout="showHide('menu1-2-section');" onmouseover="showHide('menu1-2-section');">  
  67.                 <div id="menu1-2">tytlulik</div>  
  68.                 <div id="menu1-2-section" class="section">  
  69.                     <a id="menu1-2-0" href="index.php">rozsuwane 3</a>  
  70.                     <a id="menu1-2-1" href="index.php">rozsuwane4</a>  
  71.                 </div>  
  72.             </li>
  73.         </ul>
  74. </body>
  75. </html>
  76. ?>
[PHP] pobierz, plaintext


Pozdrawiam
kamil4u
10.04.2009, 10:20:23
Cytat
samym CSSem się nie da

Nie opowiadaj bzdur (pseudo klasa: hover)

Jedynie czego w CSS nie zrobisz to płynne wysuwanie się podmenu, a jedynie gwałtowne pokazanie się go:
Cytat
i rozsunie menu


Reszta tak jak napisał ~albrzykowski, a JS potrzebny tylko po to żeby w 6-letnim IE6 działało smile.gif
thomson89
10.04.2009, 10:59:34
http://www.cssmenumaker.com/
O takie coś mi chodziło, a dokładnie: dropdown menu.

Cytat(albrzykowski @ 10.04.2009, 10:02:23 ) *
Podaje Ci mój kod, może Ci się przyda:

Przydał się smile.gif

Dziękuję wszystkim za pomoc! Teraz mogę brać się za swój szablonik.
kantek
10.04.2009, 13:05:42
Cytat(kamil4u @ 10.04.2009, 11:20:23 ) *
Nie opowiadaj bzdur (pseudo klasa: hover)

Jedynie czego w CSS nie zrobisz to płynne wysuwanie się podmenu, a jedynie gwałtowne pokazanie się go:


Reszta tak jak napisał ~albrzykowski, a JS potrzebny tylko po to żeby w 6-letnim IE6 działało smile.gif


zobacz cały mój post exclamation.gif ! tam używam hover
pokaż mi menu (funkcjonalne) i rozsuwane na samym css (bez js) bo takie było pytanie to przyznam się że nie mam racji !
takie że najade na 1 element, a pokaże się drugi


Pozdrawiam
phpion
10.04.2009, 13:09:41
Cytat(kantek @ 10.04.2009, 14:05:42 ) *
pokaż mi menu (funkcjonalne) na samym css bez js bo takie było pytanie to przyznam się że nie mam racji !


Cytat(thomson89 @ 10.04.2009, 11:59:34 ) *
http://www.cssmenumaker.com/
kantek
10.04.2009, 13:13:30
Cytat(phpion @ 10.04.2009, 14:09:41 ) *

gdzie tu się coś rozsuwa bo o to się rozchodzi questionmark.gif

Pozdrawiam
phpion
10.04.2009, 13:17:38
Hmmm... blinksmiley.gif
http://www.cssmenumaker.com/builder/menu_info.php?menu=001
kantek
10.04.2009, 13:18:55
Przyznaję że nie miałem racji exclamation.gif

i że nie dowierzałem też smile.gif

Pozdrawiam
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.