Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [js/css]problem z menu rozwijanym w gore
qoob
post
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 27.06.2007

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

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!

Ten post edytował qoob 9.09.2007, 13:27:23
Go to the top of the page
+Quote Post
Cysiaczek
post
Post #2





Grupa: Moderatorzy
Postów: 4 465
Pomógł: 137
Dołączył: 26.03.2004
Skąd: Gorzów Wlkp.
Popraw proszę tytuł topiku na zgodny z zasadami forum Przedszkole

Pozdrawiam.


--------------------
To think for yourself you must question authority and
learn how to put yourself in a state of vulnerable, open-mindedness;
chaotic, confused, vulnerability, to inform yourself.
Think for yourself. Question authority.
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 Aktualny czas: 22.08.2025 - 00:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn