Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css] Menu Rozwijane
Forum PHP.pl > Forum > Przedszkole
poxrimex
Chciałbym się dowiedzieć jak można zrobić menu gdzie po kliknięciu jednego z głownych menów pojawiają się w postaci listy wychodzącej z tego menu różne inne linki do podstron?
em-ba
nie wiem, czy o coś takiego Ci chodzi ale proszę... biggrin.gif

pionowe:
  1. <div id="navcontainer">
  2. <ul id="navlist">
  3. <li><a href="coscoscos" title="coscos">cos</a></li>
  4. <li><a href="" title=""></a></li>
  5. <li><a href="" title=""></a></li>
  6. <li><a href="" title=""></a></li>
  7. <li><a href="" title=""></a></li>
  8. </ul>
  9. </div>


Kod
   #navcontainer
   {
   width: 12em;
   border-right: 1px solid #000;
   padding: 0 0 1em 0;
   margin-bottom: 1em;
   font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
   background-color: #90bade;
   color: #333;
   }
  
   #navcontainer ul
   {
   list-style: none;
   margin: 0;
   padding: 0;
   border: none;
   }
  
   #navcontainer li
   {
   border-bottom: 1px solid #90bade;
   margin: 0;
   }
  
   #navcontainer li a
   {
   display: block;
   padding: 5px 5px 5px 0.5em;
   border-left: 10px solid #1958b7;
   border-right: 10px solid #508fc4;
   background-color: #2175bc;
   color: #fff;
   text-decoration: none;
   width: 100%;
   }
  
   html>body #navcontainer li a { width: auto; }
  
   #navcontainer li a:hover
   {
   border-left: 10px solid #1c64d1;
   border-right: 10px solid #5ba3e0;
   background-color: #2586d7;
   color: #fff;
   }


poziome:
  1. <div id="navcontainer">
  2. <ul id="navlist">
  3. <li id="active"><a href="#" id="current">Item one</a></li>
  4. <li><a href="#">Item two</a></li>
  5. <li><a href="#">Item three</a></li>
  6. <li><a href="#">Item four</a></li>
  7. <li><a href="#">Item five</a></li>
  8. </ul>
  9. </div>


Kod
         #navcontainer ul
         {
         padding: .2em 0;
         margin: 0;
         list-style-type: none;
         background-color: #036;
         color: #FFF;
         width: 100%;
         font: normal 90% arial, helvetica, sans-serif;
         text-align: center;
         }
         
         li { display: inline; }
         
         li a
         {
         text-decoration: none;
         background-color: #036;
         color: #FFF;
         padding: .2em 1em;
         border-right: 1px solid #fff;
         }
         
         li a:hover
         {
         background-color: #369;
         color: #fff;
         }


rozwijane poziome:

  1. <div id="navcontainer">
  2. <ul id="navlist">
  3. <li id="active"><a href="#" id="current">Item one</a>
  4. <ul id="subnavlist">
  5. <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
  6. <li><a href="#">Subitem two</a></li>
  7. <li><a href="#">Subitem three</a></li>
  8. <li><a href="#">Subitem four</a></li>
  9. </ul>
  10.  
  11. </li>
  12. <li><a href="#">Item two</a></li>
  13. <li><a href="#">Item three</a></li>
  14. <li><a href="#">Item four</a></li>
  15. </ul>
  16. </div>


Kod
ul#navlist { font-family: sans-serif; }
    
    ul#navlist a
    {
    font-weight: bold;
    text-decoration: none;
    }
    
    ul#navlist, ul#navlist ul, ul#navlist li
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    
    ul#navlist li { float: left; }
    
    ul#navlist li a
    {
    color: #ffffff;
    background-color: #003366;
    padding: 3px;
    border: 1px #ffffff outset;
    }
    
    ul#navlist li a:hover
    {
    color: #ffff00;
    background-color: #003366;
    }
    
    ul#navlist li a:active
    {
    color: #cccccc;
    background-color: #003366;
    border: 1px #ffffff inset;
    }
    
    ul#subnavlist { display: none; }
    ul#subnavlist li { float: none; }
    
    ul#subnavlist li a
    {
    padding: 0px;
    margin: 0px;
    }
    
    ul#navlist li:hover ul#subnavlist
    {
    display: block;
    position: absolute;
    font-size: 8pt;
    padding-top: 5px;
    }
    
    ul#navlist li:hover ul#subnavlist li a
    {
    display: block;
    width: 10em;
    border: none;
    padding: 2px;
    }
    
    ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
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.