Keresés az erőforrások között
Stílusos menü

Stílusos menü

A menü nem annyira modern, de egyes weboldalak esetében jól nézhet ki.
bigblog2013-10-22 14:16:33 333

A menü nem annyira modern, de egyes weboldalak esetében jól nézhet ki.

A Stílusok táblázata (CSS) sablonba illeszd be a következő kódot:

Kód
ul#menu {list-style-type:none; margin:0; padding:0;}  
   
  ul#menu li a{  
  color:#909090;  
  background: url(http://ucoztaska.ucoz.hu/src/menu1/vert_menu2.png) no-repeat 0 0;  
  text-decoration:none;  
  width: 200px;  
  height: 55px;  
  display:block;  
  border:none;  
  text-shadow: #ddd 2px 2px 0;  
  }  
   
  ul#menu li a:hover{  
  background-position: 50% 100%;  
  width: 200px;  
  height: 55px;  
  display:block;  
  color:#fff;  
  text-shadow: #000 2px 2px 0;  
  }  
   
  ul#menu li a span{  
  font-family:sans-serif;  
  font-size:18px;  
  padding:17px 0 0 20px;  
  display:block;  
  }


Ahol a menüt látni szeretnéd, a következő kódot használd:

Kód
<ul id="menu">  
  <li><a href="#"><span>Főoldal</span></a></li>  
  <li><a href="#"><span>Hírek</span></a></li>  
  <li><a href="#"><span>Szabályok</span></a></li>  
  <li><a href="#"><span>Fórum</span></a></li>  
  <li><a href="#"><span>...</span></a></li>  
  </ul>


Ahol persze módosítanod kell a linkeket és azok szövegét.

Hozzászólások (0)

A hozzászólási lehetőség ideiglenesen kikapcsolva