Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js/css]problem z menu rozwijanym w gore
Forum PHP.pl > Forum > Przedszkole
qoob
9.09.2007, 11:18:03
wzorujac sie na http://www.alistapart.com/articles/horizdropdowns chcialem stworzyc menu rozwijane w gore. moj pomysl to obliczenie ile submenu ma pozycji, przemnozenie przez ich wysokosc i bede mial o ile musze przesunac submenu w gore. jednak FF i opera podwyzszaja mi dwa razy za wysoko niz powinno byc (IE dobrze o dziwo podnosi). ponad to miedzy FF i opera jest male przesuniecie, ktore powoduje ze jak na FF jest dobrze to opera jest o pixel zawysoko i sie nie chce otworzyc menu.

ready to roll?
Kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  7.    <script type="text/javascript">
  8. function loadscript() {
  9. navRoot = document.getElementById("menu");
  10.    for (i=0; i<navRoot.childNodes.length; i++) {
  11.    node = navRoot.childNodes[i];
  12.       if (node.nodeName=="LI") {
  13.          node.onmouseover=function() {
  14.          this.className="over";
  15.          }
  16.  
  17.          node.onmouseout=function() {
  18.          this.className=this.className.replace("over", "");
  19.          }
  20.  
  21.          for (j=0; j<node.childNodes.length; j++) {
  22.             if(node.childNodes[j].nodeName=='UL') {
  23.             t = (node.childNodes[j].childNodes.length*13)-15; // proba oszacowania przesuniecia submenu
  24.  
  25.             node.childNodes[j].style.top= '-'+t+'px';
  26.             }
  27.          }
  28.       }
  29.    }
  30. }
  31. window.onload=loadscript;
  32. </script>
  33. <style>
  34. ul {
  35.    margin: 0;
  36.    padding: 0;
  37.    list-style-type: none;
  38. }
  39.  
  40. div#menubar {
  41.    padding: 230px 0 30px 0;
  42.  
  43. }
  44.  
  45.  
  46. div#menubar ul {
  47.    width: 100%;
  48. }
  49.  
  50. div#menubar ul li {
  51.    position: relative;
  52.    float: left;
  53.    width: 113px;
  54.    padding: 0 10px 0 10px;
  55. }
  56.  
  57.  
  58. div#menubar ul li ul {
  59.    position: absolute;
  60.    display: none;
  61.    left: 0;
  62. }
  63.  
  64. div#menubar ul li a {
  65.    display: block;
  66.    background: #3C3634;
  67.    text-decoration: none;
  68.    color: #ED8A9E;
  69.    font-style: italic;
  70.    border: 1px solid #fff;
  71. }
  72.  
  73. /* Fix IE. Hide from IE Mac \*/
  74. * html div#menubar ul li { float: left; height: 1%; }
  75. * html div#menubar ul li a { height: 1%; }
  76. /* End */
  77.  
  78. div#menubar ul li a:hover {
  79.    color: #fff;
  80.    background: #ED8A9E;
  81. }   
  82.  
  83. div#menubar li ul li a {
  84.    padding: 2px 5px;
  85. }
  86.  
  87. div#menubar li:hover ul, div#menubar li.over ul {
  88.    display: block;
  89. }</style>
  90. </head>
  91.  
  92.  
  93. <body>
  94.       <div id='menubar'>
  95.          <ul id='menu'>
  96.             <li><a href="#">historia</a></li>
  97.             <li><a href="#">cos tam</a>
  98.                <ul>
  99.                <li><a href="#">cos nr.1</a></li>
  100.                <li><a href="#">cos nr.2</a></li>
  101.                </ul>
  102.             </li>
  103.  
  104.             <li><a href="#">produkty</a>
  105.                <ul>
  106.                <li><a href="#">produkt 1</a></li>
  107.                <li><a href="#">produkt 2</a></li>
  108.                <li><a href="#">produkt 3</a></li>
  109.                <li><a href="#">produkt 4</a></li>
  110.                <li><a href="#">produkt 5</a></li>
  111.                <li><a href="#">produkt 6</a></li>
  112.                <li><a href="#">produkt 7</a></li>
  113.                <li><a href="#">produkt 8</a></li>
  114.                </ul>
  115.             </li>
  116.  
  117.             <li><a href="#">kontakt</a></li>    
  118.          </ul>
  119.       </div>
  120.  
  121.  
  122. </body>
  123. </html>
[HTML] pobierz, plaintext


pozdrawiam i prosze o pomoc!
Cysiaczek
9.09.2007, 11:27:02
Popraw proszę tytuł topiku na zgodny z zasadami forum Przedszkole

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.