resimli üst menü kodu
Resimli sol tarafta en üstte sabit kalan menü kodu
önizleme
önizleme
Aşağıdaki kodları tema>yerleşim dedikten sonra add gadget seğeneği(gadged ekle) diyoruz gadget'lerden html ve kaydet.
<title>resimli üst menü örneği</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="KODLANACAKLAR/FixedNavigationTutorial2/css/style.css" type="text/css" charset="utf-8" /> <style type="text/css"> body{ font-family:Arial; height:2000px; } .header { width:600px; height:56px; position:absolute; top:50%; left:10px; } a.back{ width:256px; height:73px; position:absolute; bottom:15px; right:15px; } a.dry{ position:absolute; bottom:15px; left:15px; text-align:left; font-size:12px; color:#ccc; text-transform:uppercase; text-decoration:none; } ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; } ul#navigation .ana_sayfa a{ background-image: url(http://img.webme.com/pic/f/frmbestlive/ana_sayfa01.png); } ul#navigation .hakkimda a { background-image: url(http://img.webme.com/pic/f/frmbestlive/hakkimda01.png); } ul#navigation .arama a { background-image: url(http://img.webme.com/pic/f/frmbestlive/arama01.png); } ul#navigation .galeri a { background-image: url(http://img.webme.com/pic/f/frmbestlive/galeri01.png); } ul#navigation .destek a { background-image: url(http://img.webme.com/pic/f/frmbestlive/destek01.png); } ul#navigation .istatistikler a { background-image: url(http://img.webme.com/pic/f/frmbestlive/istatistikler01.png); } ul#navigation .iletisim a { background-image: url(http://img.webme.com/pic/f/frmbestlive/iletisim01.png); } </style> <div class="header"> </div> <ul id="navigation"> <li class="ana_sayfa"><a href=""><span>Ana Sayfa</span></a></li> <li class="hakkimda"><a href=""><span>Hakkımda</span></a></li> <li class="arama"><a href=""><span>Arama</span></a></li> <li class="galeri"><a href=""><span>Galeri</span></a></li> <li class="destek"><a href=""><span>Online Destek</span></a></li> <li class="istatistikler"><a href=""><span>İstatistikler</span></a></li> <li class="iletisim"><a href=""><span>İletişim</span></a></li> </ul> </meta>
Join the conversation