HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Többszintű CSS3 legördülő menü elkészítése



Három lépésben végezzük el az átalakítást.

Az első példában:


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

A második példában:


- Az újonnan beágyazott listát most nem függőleges irányban tóluk el, hanem vízszintesen, a magasabb szintű menüpontok mellé.

A harmadik példában:


- Az alsó szintű link elemeket, a jobb áttekinthetőség érdekében a többihez képest átszínezzük.

1. példa:

Forráskód



....
 <ul id="menusor">
     <li><a href="#">Termékek</a>
        <ul>
	  <li><a href="#">Kategória 1</a>
            <ul>
	      <li><a href="#">Alkat 1.1</a></li>
	      <li><a href="#">Alkat 1.2</a></li>
	      <li><a href="#">Alkat 1.3</a></li>
	    </ul>
          </li>
	  <li><a href="#">Kategória 2</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 3</a></li>
	</ul>
     </li>
     <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="#">Kapcsolatok</a></li>
  </ul>
... 

Eredmény*


2. példa:

Forráskód



<style type="text/css"> 
  .....
#menusor ul ul {
    left: 110px;
    top: 0px;
}
</style>   
...
 

Eredmény*


3. példa:

Forráskód



<style type="text/css"> 
....
#menusor ul ul li a:link, 
#menusor ul ul li a:visited
 {background-color:#ffddcc; color:#662210;}
#menusor ul ul li a:hover
 {background-color:#ffffff; color:#441106;}
#menusor ul ul li a:active 
 {background-color:#ffddcc; color:#441106; 
  font-size:13px;  
  border-bottom:2px; border-top:2px;}
</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_mmsmenu_1_OK.html