Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][html] Menu rozsuwane
thomson89
post 9.04.2009, 22:16:40
Post #1





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

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

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>


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
thekoks
post 10.04.2009, 08:09:50
Post #2





Grupa: Zablokowani
Postów: 64
Pomógł: 1
Dołączył: 31.03.2009

Ostrzeżenie: (60%)
XXX--

takie http://www.kurshtml.boo.pl/skrypty/menu_wy..._rozwijane.html questionmark.gif
Go to the top of the page
+Quote Post
albrzykowski
post 10.04.2009, 09:02:23
Post #3





Grupa: Zarejestrowani
Postów: 40
Pomógł: 3
Dołączył: 5.02.2007

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

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!


--------------------
Debian Etch, MySQL 5, PHP 5, Apache 2, Eclipse PDT
Go to the top of the page
+Quote Post
kantek
post 10.04.2009, 10:06:30
Post #4





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

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

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


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
kamil4u
post 10.04.2009, 10:20:23
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
thomson89
post 10.04.2009, 10:59:34
Post #6





Grupa: Zarejestrowani
Postów: 1 178
Pomógł: 51
Dołączył: 7.01.2009
Skąd: Gdańsk

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

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.


--------------------
Sklep 70%
Go to the top of the page
+Quote Post
kantek
post 10.04.2009, 13:05:42
Post #7





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

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

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

Ten post edytował kantek 10.04.2009, 13:09:46


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
phpion
post 10.04.2009, 13:09:41
Post #8





Grupa: Moderatorzy
Postów: 6 070
Pomógł: 860
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
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/
Go to the top of the page
+Quote Post
kantek
post 10.04.2009, 13:13:30
Post #9





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

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

Cytat(phpion @ 10.04.2009, 14:09:41 ) *

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

Pozdrawiam


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
phpion
post 10.04.2009, 13:17:38
Post #10





Grupa: Moderatorzy
Postów: 6 070
Pomógł: 860
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
Hmmm... blinksmiley.gif
http://www.cssmenumaker.com/builder/menu_info.php?menu=001
Go to the top of the page
+Quote Post
kantek
post 10.04.2009, 13:18:55
Post #11





Grupa: Zarejestrowani
Postów: 73
Pomógł: 15
Dołączył: 2.04.2009
Skąd: koszalin

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

Przyznaję że nie miałem racji exclamation.gif

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

Pozdrawiam


--------------------
kantek.com.pl
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 23.04.2024 - 16:57
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn