Webshop menünk formázása - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Az első példában:

- Beállítjuk menülista felső szintjén található link elemek tulajdonságait.

A második példában:

- Beállítjuk menülista középső szintjén található link elemek tulajdonságait.

A harmadik példában:

- Beállítjuk menülista alsó szintjén található link elemek tulajdonságait.

1. példa:

Forráskód


<style type="text/css"> 
  .....
#balmenu > ul > li > a:link, 
#balmenu > ul > li > a:visited {
  background-color:#662210; color:#ffddcc;  
  font: italic 14px/38px Verdana, Geneva, sans-serif;}
#balmenu > ul > li > a:hover{
  font:15px/38px Verdana, Geneva, sans-serif;
  color:#ffffff; }
#balmenu > ul > li > a:active {
  color:#ffffff; 
  font-size:13px;  border-bottom:2px; 
  border-top:2px; padding-bottom:4px;}
</style>   
...

Eredmény*

2. példa:

Forráskód


<style type="text/css"> 
  .....
#balmenu > ul > li > ul > li > a { 
  display: block;
  background-color:#662210; 
  width: 110px; 
  height: 24px; border-radius: 1px  5px 5px 1px; 
  text-align:right; padding-right:10px; padding-bottom:2px;
  border-right:1px solid #ccbbaa; border-bottom:1px solid #ffaaaa; 
  border-top:1px solid #bb8866; 
  box-shadow: 3px 3px 5px 0px #441108; }
#balmenu > ul > li > ul > li > a:link, 
#balmenu > ul > li > ul > li > a:visited  {
  background-color:#ffddcc; color:#662210; text-decoration:none; 
  font-size:14px;}
#balmenu  ul > li > ul > li >  a:hover {
  background-color:#ffffff; color:#441106; 
  padding-right:12px; padding-left:2px;}
#balmenu  ul > li > ul > li >  a:active  {
  background-color:#ffddcc; color:#441106; font-size:13px;  
  border-bottom:2px; border-top:2px; padding-bottom:4px;}
</style>   
...

Eredmény*

3. példa:

Forráskód


<style type="text/css"> 
....
#balmenu > ul > li > ul > li > ul > li > a{ 
   display: block;
   background-color:#662210; 
   width: 110px; 
   height: 24px; 
   border-radius: 1px  5px 5px 1px; 
   text-align:right; padding-right:2px; padding-bottom:2px;
   border-right:1px solid #ccbbaa; 
   border-bottom:1px solid #ffaaaa; border-top:1px solid #bb8866; 
   box-shadow: 3px 3px 5px 0px #441108;}
#balmenu > ul > li > ul > li > ul > li > a:link, 
#balmenu > ul > li > ul > li > ul > li > a:visited {
   background-color:#ffddcc; color:#662210; text-decoration:none; 
   font-size:13px; font-style: italic;}
#balmenu  ul > li > ul > li > ul > li >  a:hover  {
   background-color:#ffffff; color:#441106; 
   padding-right:4px; padding-left:2px;}
#balmenu  ul > li > ul > li > ul > li >  a:active {
   background-color:#ffddcc; color:#441106; font-size:13px;  
   border-bottom:2px; border-top:2px; padding-bottom:4px;}
</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