Sag Kutuya Menu

Sağ Kutuya Menü
Sitene Giriş ► Tasarım Ayarları ► Gelişmiş Ayarlar ► 1.Ekstra Kutunun İçeriği ► Kaydet

<ul class="menu">
<li class="link"> <a href="LINK 1">Yazı 1</a> </li>
<li class="link"> <a href="LINK 2">Yaı 2</a> </li>
<li class="link"> <a href="LINK 3">Yazı 3</a> </li>
<li class="link"> <a href="LINK 4">Yazı 4</a> </li>
<li class="link"> <a href="LINK 5">Yazı 5</a> </li>
</ul>

Sitene Giriş ► Tasarım Ayarları ► Gelişmiş Ayarlar ► Tasarımın Üzerindeki Yazı ► Kaydet

Örnek 1: Basit Menü

<style type="text/css">
 ul.menu {
  list-style-type: square;
  padding-left: 25px; }

ul.menu li.link a {
  font-size: 14px;
  color: #343434;
  text-decoration: none;
  line-height: 30px; }

ul.menu li.link a:hover { color: chocolate; }
</style>

Örnek 2: Grafik Menü

<style type="text/css">
 ul.menu {
  list-style-image: url(GrafikURL);
  padding-left: 25px; }

/* Aufzählungspunkte entfernt */
ul.menu li {list-style-type: none;}

ul.menu li.link a {
  font-size: 14px;
  color: #343434;
  text-decoration: none;
  line-height: 30px; }

ul.menu li.link a:hover { color: navy; }
</style>

Örnek 3: Hoverlı Menü

<style type="text/css">
 ul.menu {
  list-style-type: none !important; 
  margin-left: 25px; }

 ul.menu li.link {
  background-image: url(GrafikURL);
  background-repeat: no-repeat;
  padding-left: 30px;
  height:40px; }

ul.menu li.link:hover {
  background-image: url(Hover GrafikURL); }

ul.menu li.link a {
  font-size: 14px;
  color: #343434;
  text-decoration: none; }

ul.menu li.link a:hover { color: navy; }
</style>