2. Start
  3. Nauka
  4. Materiały dodatkowe
  5. CSS
  6. 13. Menu pionowe
Materiały dodatkowe
CSS

13. Menu pionowe

HTML i CSS Wynik
Struktura startowa 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>
etap pierwszy - ukrycie podmenu 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>

<style>
   ul > li > ul {display:none}
</style>
etap drugi - ukrycie kropek i wyłączenie marginesów i dopełnień (padding) 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>

<style>

ul > li > ul {
    display:none
}
ul {
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}
</style>
etap trzeci - ostylowanie menu pierwszego poziomu 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>

<style>
ul > li > ul {
    display:none
}
ul {
    list-style:none;
    padding:0;
    margin:0;
    border:3px solid grey;
    position:relative;
}
ul > li {
    background:yellow;
    border-bottom:3px solid grey;
    margin:0;
    padding:0;
}    
ul > li:last-child {
    border-bottom:none;
}
</style>
etap czwarty - ostylowanie hiperłączy pierwszego poziomu 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>

<style>
ul > li > ul {
    display:none
}
ul {
    list-style:none;
    padding:0;
    margin:0;
    border:3px solid grey;
    position:relative;
}
ul > li {
    background:yellow;
    border-bottom:3px solid grey;
    margin:0;
    padding:0;
}    
ul > li:last-child {
    border-bottom:none;
}
ul > li > a{
        color:grey;
        text-decoration:none;
        text-transform:uppercase;
        font-size:18px;
        padding:10px;
        display:block;
    }
ul > li > a:hover{
    color:yellow;
    background:grey;
}
</style>
etap piąty - pokazanie drugiego poziomu menu 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>

<style>
ul > li > ul {
    display:none
}
ul {
    list-style:none;
    padding:0;
    margin:0;
    border:3px solid grey;
    position:relative;
}
ul > li {
    background:yellow;
    border-bottom:3px solid grey;
    margin:0;
    padding:0;
}    
ul > li:last-child {
    border-bottom:none;
}
ul > li > a{
        color:grey;
        text-decoration:none;
        text-transform:uppercase;
        font-size:18px;
        padding:10px;
        display:block;
    }
ul > li > a:hover{
    color:yellow;
    background:grey;
}
ul > li:hover > ul {
    display:block;
    position:absolute;
    left:80px;
    bottom:0;
    width:200px;
}
</style>
etap szósty - ostylowanie drugiego poziomu menu 
<ul>
   <li><a href="#">Opcja 1</a></li>
   <li>
      <a href="#">Opcja 2</a>
      <ul>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
         <li><a href="#">Opcja 2.1</a></li>
      </ul>
   <li><a href="#">Opcja 2</a></li>
</ul>

<style>
ul > li > ul {
    display:none
}
ul {
    list-style:none;
    padding:0;
    margin:0;
    border:3px solid grey;
    position:relative;
}
ul > li {
    background:yellow;
    border-bottom:3px solid grey;
    margin:0;
    padding:0;
}    
ul > li:last-child {
    border-bottom:none;
}
ul > li > a{
        color:grey;
        text-decoration:none;
        text-transform:uppercase;
        font-size:18px;
        padding:10px;
        display:block;
    }
ul > li > a:hover{
    color:yellow;
    background:grey;
}
ul > li:hover > ul {
    display:block;
    position:absolute;
    left:80px;
    bottom:0;
    width:200px;
}
ul > li:hover > ul > li{
    background:grey;
}
ul > li:hover > ul > li > a{
    color: yellow;
    padding:10px;
    display:block;
    text-decoration:none;
    text-transform:uppercase;
}
ul > li:hover > ul > li > a:hover{
    color: grey;
    background:yellow;
}
</style>
Rating:
( 0 Rating )

Menu