Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [wolontariat] Menu css wielopoziomowe, Menu css wielopoziomowe jak przerobić
czarek070488
post 12.02.2010, 23:56:50
Post #1





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 12.02.2010

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

Witam!
Mam taki mały kłopot mam menu w css i chciałbym przerobić je na Menu wielopoziomowe czyli np.po najechaniu myszą na Programowanie - PHP-( i żeby po najechaniu mysza na PHP wysuneła sie druga lista np Kurs php ) Mam wielką prośbę żeby mi pomóc bo nie mam zielonego pojęcia jak to zrobić ponizej jest te menu

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Menu na CSS</title>
    <style type="text/css">
body, td, th, input, textarea, option, optgroup {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Helvetica, Verdana, sans-serif;
    font-size: 13px;
}
ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.menu li {
        background: #577F7A;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
        color: #FFF;
        float: left;
        padding: 6px 10px;
        position: relative;
    }

ul.submenu {
    background: #577F7A;
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    position: absolute;
    padding: 0;
    top: 28px;
}

    ul.submenu li {
        border: 0;
        float: none;
        padding: 0;
        width: 200px;
    }

ul.menu li:hover ul, ul.menu li.over ul {
    display: block;
}

ul.submenu a {
    color: #FFF;
    display: block;
    padding: 3px 10px;
    text-decoration: none;
}

    ul.submenu a:hover {
        background: #78AFA7;
    }
</style>
    <script type="text/javascript">
    function menu() {
  if (document.all) {
    /* Znajdujemy w dokumencie wszystkie listy */
    var lists = document.getElementsByTagName("ul");
    
    for (var i = 0; i < lists.length; i++) {
      /* Wybieramy listy z przypisana klasa 'menu' */
      if (lists[i].className == "menu") {
        var menu = lists[i];
        
        /* Przeszukujemy elementy podrzedne, odnajdujac elementy list */
        for (var j = 0; j < menu.childNodes.length; j++) {
          var submenu = menu.childNodes[j];
          
          /* Ustawiamy zachowanie przy umieszczeniu nad elementem wskaznika */
          if (submenu.nodeName == "LI") {
            submenu.onmouseover = function() {
              this.className += " over";
            }
            submenu.onmouseout = function() {
              this.className = this.className.replace(" over", "");
            }
          }
        }
      }
    }
  }
}

window.onload = function()
{
  menu();
}
    </script>
</head>

<body>

<ul class="menu">
    <li>Projekt i multimedia
        <ul class="submenu">
            <li><a href=#">Zasady</a></li>
            <li><a href=#">Prakyka</a></li>
            <li><a href=#">Architektura informacji</a></li>
        </ul>
    </li>
    <li>Programowanie
        <ul class="submenu">
            <li><a href=#">HTML i XHTML</a></li>
            <li><a href=#">PHP</a></li>
            <li><a href=#">JavaScript</a></li>
        </ul>
    </li>
    <li>Marketing
        <ul class="submenu">
            <li><a href=#">Wyszukiwarki</a></li>
            <li><a href=#">Reklama</a></li>
            <li><a href=#">Promocja alternatywna</a></li>
        </ul>
    </li>
</ul>

</body>
</html>


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. 	"http://www.w3.org/TR/xhtml10/DTD/xhtml10.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5.  
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title>Menu na CSS</title>
  9.     <style type="text/css">
  10.  body, td, th, input, textarea, option, optgroup {
  11.     font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Helvetica, Verdana, sans-serif;
  12. 	font-size: 13px;
  13. }
  14.  ul.menu {
  15.     list-style: none;
  16.     margin: 0;
  17.     padding: 0;
  18. }
  19.  
  20.     ul.menu li {
  21.         background: #577F7A;
  22.         border-left: 1px solid #FFF;
  23.         border-right: 1px solid #FFF;
  24.         color: #FFF;
  25.         float: left;
  26.         padding: 6px 10px;
  27.         position: relative;
  28.     }
  29.  
  30. ul.submenu {
  31.     background: #577F7A;
  32.     display: none;
  33.     left: 0;
  34.     list-style: none;
  35.     margin: 0;
  36.     position: absolute;
  37.     padding: 0;
  38.     top: 28px;
  39. }
  40.  
  41.     ul.submenu li {
  42.         border: 0;
  43.         float: none;
  44.         padding: 0;
  45.         width: 200px;
  46.     }
  47.  
  48. ul.menu li:hover ul, ul.menu li.over ul {
  49.     display: block;
  50. }
  51.  
  52. ul.submenu a {
  53.     color: #FFF;
  54.     display: block;
  55.     padding: 3px 10px;
  56.     text-decoration: none;
  57. }
  58.  
  59.     ul.submenu a:hover {
  60.         background: #78AFA7;
  61.     }
  62. </style>
  63.     <script type="text/javascript">
  64.     function menu() {
  65.   if (document.all) {
  66.     /* Znajdujemy w dokumencie wszystkie listy */
  67.     var lists = document.getElementsByTagName("ul");
  68.  
  69.     for (var i = 0; i < lists.length; i++) {
  70.       /* Wybieramy listy z przypisana klasa 'menu' */
  71.       if (lists[i].className == "menu") {
  72.         var menu = lists[i];
  73.  
  74.         /* Przeszukujemy elementy podrzedne, odnajdujac elementy list */
  75.         for (var j = 0; j < menu.childNodes.length; j++) {
  76.           var submenu = menu.childNodes[j];
  77.  
  78.           /* Ustawiamy zachowanie przy umieszczeniu nad elementem wskaznika */
  79.           if (submenu.nodeName == "LI") {
  80.             submenu.onmouseover = function() {
  81.               this.className += " over";
  82.             }
  83.             submenu.onmouseout = function() {
  84.               this.className = this.className.replace(" over", "");
  85.             }
  86.           }
  87.         }
  88.       }
  89.     }
  90.   }
  91. }
  92.  
  93. window.onload = function()
  94. {
  95.   menu();
  96. }
  97.     </script> 
  98. </head>
  99.  
  100. <body>
  101.  
  102. <ul class="menu">
  103.     <li>Projekt i multimedia
  104.         <ul class="submenu">
  105.             <li><a href=#">Zasady</a></li>
  106.             <li><a href=#">Prakyka</a></li>
  107.             <li><a href=#">Architektura informacji</a></li>
  108.         </ul>
  109.     </li>
  110.     <li>Programowanie
  111.         <ul class="submenu">
  112.             <li><a href=#">HTML i XHTML</a></li>
  113.             <li><a href=#">PHP</a></li>
  114.             <li><a href=#">JavaScript</a></li>
  115.         </ul>
  116.     </li>
  117.     <li>Marketing
  118.         <ul class="submenu">
  119.             <li><a href=#">Wyszukiwarki</a></li>
  120.             <li><a href=#">Reklama</a></li>
  121.             <li><a href=#">Promocja alternatywna</a></li>
  122.         </ul>
  123.     </li>
  124. </ul>
  125.  
  126. </body>
  127. </html>
[HTML] pobierz, plaintext


Ten post edytował erix 13.02.2010, 11:48:15
Powód edycji: [erix]: przeniosłem
Go to the top of the page
+Quote Post
« Następny starszy · Poszukuję · 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: 31.07.2025 - 07:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn