Resim üzerinde css ile menü oluşturmak

ranuna · 02.11.2007

bayağı gezindim ama merak ettiğim unsur ile ilgili bir çözüme denk gelmedim malesef, bir fikri olan arkadaşlar yardımcı olursa çok sevinirim.

Ekte bir resim var, ben bu resimi menü olarak kullanmak istiyorum, sol taraftaki kısım görünür olacak ilk açılışta ilgili kısımın üzerine gelince üzerine gelinen kısmın sağ taraftaki ilgili kısımı görünür olacak. nasıl yapabilirim, buna benzer bir örnek bildiğiniz varmı inceleyebileceğim şimdidedn teşekkürler.

erturkerdal · 03.11.2007

Resim mi olacak illa?

ranuna · 04.11.2007

evet, aslında sol taraftaki yuvarlak butonlar birer resim olacak onların değişimi kolay olsun diye böyle bir şey araştırmaya başlamıştım. textte olabilir tabi.

Haydar · 05.11.2007

Bunu CSS ile hover kullanarak yapabilirsin. Burada şirket sayfamızda kullandığımız örnek var. index.HTML içinde aşağıdaki gibi bir menü var.
<div id="menu"> <ul>
<li class="first"><a href="index.HTML" title="" class="menu1" accesskey="1">Anasayfa</a></li>
... </ul></div>

Aynı dizinde default.CSS dosyasında da da hover ile üzerine gelince bu kısmın nasıl değişeceğini belirtiyoruz:

#menu ul li a.menu1{
background:url('images/menudugme1.jpg') no-repeat center bottom; border-color: #F07242; color: #C4856D
}
#menu ul li a.menu1:hover{
background:url('images/menudugmesi.gif') no-repeat center bottom; border-color: #F07242; color: #ffffff
}

ranuna · 27.11.2007

sevgili haydar cevabınız için çok teşekür ederim. tam istediğim olmasada bu yöntemi kullandım şimdilik.

yunus::t · 27.11.2007

4 menü elemanı için normal ve over hallerini birleşik tek imaj yaptıktan sonra boyutlandırmaya ve isteğine göre bunları butonlarına yarısı görünecek şekilde verirsen, ardında :hover 'a da background-position: bottom veya right şeklinde default değerin tersini vererek görselin görünmeyen kısmını aktif hale getirebilirsin. Bir çeşit maske operasyonu aslında bu.

#menu li a { display:block; width: 130px; height: 48px; background-position:top; text-indent: -1000px;}
#menu li a:hover { background-position:bottom; }

gibi..

Örnek istersen, yukarıdaki kod www.eurekosigorta.com.tr sitesinde üst menü için kullanılmıiştır.

03.11.2007	#2 (permalink)
erturkerdal Üyelik Tarihi: 23.08.2007 Yer: Bilecik Yaş: 20 Mesaj: 96	Re: Resim üzerinde css ile menü oluşturmak Resim mi olacak illa? __________________ Damacana.org

04.11.2007	#3 (permalink)
ranuna Üyelik Tarihi: 11.09.2007 Yer: Ankara Mesaj: 20	Re: Resim üzerinde css ile menü oluşturmak evet, aslında sol taraftaki yuvarlak butonlar birer resim olacak onların değişimi kolay olsun diye böyle bir şey araştırmaya başlamıştım. textte olabilir tabi.

05.11.2007	#4 (permalink)
Haydar Üyelik Tarihi: 06.09.2007 Yer: İstanbul Yaş: 28 Mesaj: 57	Re: Resim üzerinde css ile menü oluşturmak Bunu CSS ile hover kullanarak yapabilirsin. Burada şirket sayfamızda kullandığımız örnek var. index.HTML içinde aşağıdaki gibi bir menü var. <div id="menu"> <ul> <li class="first"><a href="index.HTML" title="" class="menu1" accesskey="1">Anasayfa</a></li> ... </ul></div> Aynı dizinde default.CSS dosyasında da da hover ile üzerine gelince bu kısmın nasıl değişeceğini belirtiyoruz: #menu ul li a.menu1{ background:url('images/menudugme1.jpg') no-repeat center bottom; border-color: #F07242; color: #C4856D } #menu ul li a.menu1:hover{ background:url('images/menudugmesi.gif') no-repeat center bottom; border-color: #F07242; color: #ffffff } __________________ En uzak mesafe iki kafa arasındaki mesafedir Birbirini anlamayan... CAN YÜCEL

27.11.2007	#5 (permalink)
ranuna Üyelik Tarihi: 11.09.2007 Yer: Ankara Mesaj: 20	Re: Resim üzerinde css ile menü oluşturmak sevgili haydar cevabınız için çok teşekür ederim. tam istediğim olmasada bu yöntemi kullandım şimdilik.

27.11.2007	#6 (permalink)
yunus::t Üyelik Tarihi: 23.07.2002 Yer: İstanbul Yaş: 30 Mesaj: 685	Re: Resim üzerinde css ile menü oluşturmak 4 menü elemanı için normal ve over hallerini birleşik tek imaj yaptıktan sonra boyutlandırmaya ve isteğine göre bunları butonlarına yarısı görünecek şekilde verirsen, ardında :hover 'a da background-position: bottom veya right şeklinde default değerin tersini vererek görselin görünmeyen kısmını aktif hale getirebilirsin. Bir çeşit maske operasyonu aslında bu. #menu li a { display:block; width: 130px; height: 48px; background-position:top; text-indent: -1000px;} #menu li a:hover { background-position:bottom; } gibi.. Örnek istersen, yukarıdaki kod www.eurekosigorta.com.tr sitesinde üst menü için kullanılmıiştır.