CSS3 webshop menü készítése 1

Az első példában:

- A HTML kódot kiegészítjük egy újabb lista szinttel.

A második példában:

- Beállítjuk menüdoboz jellemzőit, és eltüntetjük a listajeleket.

A harmadik példában:

- Menüdobozunkat a sarkak lekerekítésével és árnyékolással tesszük egy kicsit érdekesebbé.

1. példa:

Forráskód


....
<div id="balmenu"> 
  <ul> 
    <li><a href="#">Vásárlás</a>
      <ul> 
         <li><a href="#">Kosár</a></li>
         <li><a href="#">Megrendelés</a></li>     
         <li><a href="#">ÁSZF</a></li>     
       </ul>
    </li>
    <li><a href="#">Termékek</a>
      <ul> 
         <li><a href="#">Kategória 1</a>
            <ul>
               <li><a href="#">Alkat 2.1 </a></li>
               <li><a href="#">Alkat 2.2 </a></li>
               <li><a href="#">Alkat 2.3 </a></li>
            </ul>
         </li>
         <li><a href="#">Kategória 1</a></li>     
         <li><a href="#">Kategória 1</a></li>     
       </ul>
    </li>
  </ul><br>
</div> ...

Eredmény*

2. példa:

Forráskód


<style type="text/css"> 
  .....
  #balmenu {position:absolute; display:block; 
     top:80px; left:0; width:100px;  
     background-color:#662210; color:#ffddcc;} 
  #balmenu ul {list-style-type: none; margin:0; 
     padding:0px;}
  #balmenu li {list-style-type: none; 
     padding:0px;}
</style>   
...

Eredmény*

3. példa:

Forráskód


<style type="text/css"> 
....
#balmenu {border-radius: 1px  15px 1px 15px; 
          box-shadow: 3px 3px 5px 0px #441108; 
          text-align:center;}
</style>   
...

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_fmenu_1_OK.html