CSS ile Menü Yapmak I – Dikey Menüler
Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler(<ul>)ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir.
Sırasız listeler(<ul>) ilk olarak listeleme işlemleri için kullanılsa da CSS’in yükselişi ile birlikte menü oluşturmak için kullanılmaya başlandı. Aslında menülerde bir bakıma link listeleri olduğu düşünülürse işlevinin dışında kullanılmadığı da doğru bir tespittir. Kodumuzu yazmaya başlayalım:
<ul class="menu">
<li><a href="index.html">Ana Sayfa </a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="urunler.html">Ürünler</a></li>
</ul>
Kodlama sonucu görüntü aşağıdaki gibi olacaktır.
Her linkin başındaki imgeleri kaldırmak için:
ul.menu {
list-style-type: none;
}
Bir çok web tarayıcısı sırasız listeleri(<ul>) yorumlarken yukarıda görüldüğü gibi otomatik olarak soldan bir padding/margin(bazı tarayıcılarda padding uygularken bazılarında margin uygular) mesafesi uygular bu mesafeyi sıfırlamak için:
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
Bu bölüme kadar yazılan kodlamalar hem dikey menüler hem de yatay menüler içinde aynıdır. Ancak bundan sonra dikey menü ve yatay menü için kodlar değişecektir.
Dikey Menüler
Dikey menülerde linkler yukarıdan aşağı doğru sıralanmıştır. Link elementi(a) inline-elementtir, her linke rollover özelliği kazandırmak için:
ul.menu a {
display: block;
}
Biraz görselliği arttırırsak:
ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
}
Linkler web tarayıcısının genişliği kadar uzayacaktır, kendi istediğimiz genişliğe sahip olmak için:
ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
}
Linkler arasına biraz boşluk verelim:
ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
}
Linklerin altındaki çizgileri kaldıralım:
ul.menu a {
display: block;
color: #1B1B1B;
background-color: #E2E2E2;
width:8em;
padding: .2em .8em;
text-decoration: none;
}
şimdi linklerimize rollover efekti vermek için a:hover kullanacağız:
ul.menu a:hover
{
background-color: #999;
}
son olarak linklerin arasını ayıralım:
ul.menu li {
margin: 0 0 .2em 0;
}
İşte menümüzün son hali
bunu .aktif diye bir sınıf oluşturup. javascript ile seçili olan linke bu aktif class ını uygularsak olacaktır
Merhaba,
Ben bu menüyü kullanıcam ama bir şeyi yapamadım. Yardımcı olurmusunuz?
Bu menude “hover” olarak kullanılan kodu aynı zamanda “active” olarak kullanmak istiyorum… Yani menudeki mesela 2. linke tıklandığında sayfa refresh olacak ama 2 link üzerindeki tablo rengi “hover” daki gibi olacak.. Açılan sayfada hangi linke tıkladıysak o sayfanın linki “active” belirttiğimiz gibi olmasını nasıl sağlarım ?
Ben active kodu tanımlıyorum ama sadece tıkladığımda tablo rengi değişiyor, sayfa açıldığında yine mouseout şeklinde tanımlı kodu çekiyor..
Yardımcı olabilirmisiniz?
#menu {
float:left;
}
#menu li, #menu ul {
padding:0px;
margin:0px;
list-style:none;
}
#menu li a {
padding:10px 0px 0px 45px;
font-family:”Comic Sans MS”;
font-size:13px;
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
background:url(../image/buttona.gif) no-repeat;
width:99px;
height:27px;
display:block;
}
#menu li a:hover {
background:url(../image/buttonahover.gif) no-repeat;
}
Anasayfa
Forum
Müzik
Video
Bunu Kendim Yaptım Biraz acemilimik Var tabi Sormak istediğim Burda Gereksiz Kodlama Yapıp yapmadığım Cevap Yazarsanız Sevinirim…Siteniz Bu Arada Çok ii Anlatımı Var..Elinize sağlık.. Herşey İçin Teşekkürler
ikinci kolono geçecek(3. 4. linkten sonrası) listeye bir sınıf atarsanız ve bu sınafa ikinci kolonun konumunu yazarsanız olur.
diyelimki 10-15 adet link için bu menüden yapacağız. Bunaları elle girmek yerine veritabanından çekeceğiz.
Fakat alt alta uzunca listelemek yerine her 3-4 linkte ikinci sutuna geçmesini istiyoruz.
Bunu sadece Css ile yapmak mümkünmü veya bu nasıl mümkün olabilir?
merhaba ben css ile menu yaptım fakat bi turlu ie6 acılmıyor herseyi denedim acaba kodlarda bi yanlışlik mı var
AnasayfaÇelik yapılar
Güçlendirme
Güçlendirme nedir?
Kolonu Güçlendirme
Kirişi Güçlendirme
Kolon-Kiriş Bölgesi
Döşemeyi Güçlendirme
Perdeyi Güçlendirme
Temeli Güçlendirme
Onarım
Onarım Nedir?
Çatlakların Onarımı
Püskürtme Beton
Epoksi Reçinesi
Hasar tespit
İnşaat Teknik Terimleri
Beton nedir?
Deprem
Firma ekle
İnşaatta işçi güvenliği
Yalıtım
Linkler
Anket
Fuar takvimi
Ben Kimim?
ve style ise
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 203px; /*For KHTML*/
list-style: none;
}
ul#navmenu:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 2px/0px serif;
content: “.”;
height: 0;
visibility: hidden;
}
ul#navmenu li {
float: left; /*For IE 7 lack of compliance*/
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #90B4CF;
border-bottom-color: #90B4CF;
padding: 0 6px;
display: block;
background: #90B4CF;
color: #ffffff;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
ul#navmenu li:hover ul { display: block; }
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #9EC630;
color: #ffffff;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #90B4CF;
color: #ffffff;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #9EC630;
color: #ffffff;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #90B4CF;
color: #ffffff;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #9EC630;
color: #ffffff;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #90B4CF;
color: #ffffff;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #9EC630;
color: #ffffff;
}
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 204px;
}
/* Do Not Move – Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById(“navmenu”);
for (i=0; i
display:none;
görünmez yapacaktır.
abi ben bu kodları yazıyorum fakat sadece bastakı alt alta olan bolum
.Anasayfa
.İletişim
şeklınde kalıyo butonlar ve hover background sayfada cıkmıyor bunun nedenı nedır.
Eğer kodların tamamını alırsanız ve onun üzerinden giderseniz olacaktır. Sizin yazdığını kodları görebilirsek belki daha çok yardımcı olabiliriz belki
Acaba menüyü- kökten kaldırmam için bir kod varmı?
tüm sayfalarda aynı css dosyasına link verip değişikliklerinizi de bu css dosyasında yaparsanız. Menü için css de yatığınız değişiklikler otomatik olarak tüm sayfalarda olacaktır.
merhaba paylaşımınız için teşekkür ederim.cssyi sizden öğreniyorum,html ve diğer dilleride yeni öğreniyorum.Css kullanarak bir menü oluşturduğumda ve üzerinde değişiklik yaptığımda bütün sayfalara bü menüyü nasıl entegre edebilirim? yardımınız için şimdiden teşekkürler.