logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.