css-miniMerhaba arkadaslar, bugun css kullanarak cok basit bir sekilde hos menuler yapmak nasil oluyor, kodlar ne ise yariyor, ne nerde kullanilmali hepsini anlatacagim..

ornek bir kac sayfa hazirliyorum arkadaslar, genelde her yazimi yazarken mutlaka ornek bir sayfa yada resim kullanirim, buda kullaniciya daha guzel gorsel bir gozlem secenegi sunar ki cogu site buna dikkat etmez :) kuru kuru yazilan anlatimlar genelde bir sey anlasilmaz, ornek yada demo yoktur, olan demolarda ya sayfa silinmistir yada link sorunludur.. iste kaliteli bir menu yapmak icin bize gerekenler..

  1. Bilgisayar :)

bildiginiz gibi html calistirmak icin illa bir hosta gerek yoktur, ama ilerde tum dunyada gosterilmesi icin bir site yaparsaniz, bunun icin araci bir firma ile dosyalarinizi host etmeli, domain ile isim vererek internete sitenizi kazandirabilirsiniz :)

Baslamadan once kendimize 2 tane dosya hazirlayalim bunlarin birisinin uzantisi .html olsun, digerisnin ise .css

ben ornek 2 dosya hazirladim bunlarin ismi :

  1. cssmenu.html
  2. css.css

css dosyasini ayri olarak vermemizin sebebi ilerleyen zamanlarda, artan css dosyalarini kullandigimiz kodlama ekranina yazarsak bu buyuk dosyalarda sorun cikartabilir, ayrica daha pratik olmasi ve istedigimiz zaman kodlarla oynama sansi veriri..

oncelikle cssmenu.html dosyamizi olusturalim ve aciklayalim, ne nedir, ne degildir..

cssmenu.html

<HTML>
<HEAD>
<TITLE>Makaleci.com css menu ornegi..</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-9″>
<META name=”description” content=””>
<META name=”keywords” content=””>
<META name=”generator” content=”CuteHTML”>
<link rel=”stylesheet” href=”./css.css” type=”text/css” />

</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<div><ul id=”menu”>
<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li>
<li><a href=”http://www.makaleci.com/iletisim”>iletiþim</a></li>
<li><a href=”http://www.makaleci.com/makale-nasil-eklenir/makale-nedir”>Makale Nedir?</a></li>
<li><a href=”http://www.kuaza.com/”>Resim Yükle</a></li>
<li><a href=”http://www.kuaza.org/”>Kuaza La</a></li>
</ul></div><br /><br />
</BODY>
</HTML>

Not: konumuz css ancak arada kullandigim kodlarinda ne ise yaradigini yazacagim..

bu kod ile css dosyamizi  sayfa daki css class larini alacagi dosyayi ekliyoruz..

<link rel=”stylesheet” href=”./css.css” type=”text/css” />

yukaridaki kodlardan :

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-9″>

kodlarindaki ISO-8859-9 bolumu kullanacagimiz menudeki turkce karakterlerin duzgun sekilde gorunmesini saglayacak..

yukaridaki kodlardan

<ul id=”menu”>
<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li>
<li><a href=”http://www.makaleci.com/iletisim”>iletiþim</a></li>
<li><a href=”http://www.makaleci.com/makale-nasil-eklenir/makale-nedir”>Makale Nedir?</a></li>
<li><a href=”http://www.kuaza.com/”>Resim Yükle</a></li>
<li><a href=”http://www.kuaza.org/”>Kuaza La</a></li>
</ul>

<ul id=”nav”> kodu ile css de tanimlayacagimiz menu ozelliginin ve siralama icin gerekli olan kod bolumu

<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li> seklinde de linklerimizi siralayarak menumuzu olusturmak icin gerek olan bolum

sonraki bolumlerdede acilan tag lari kapatiyoruz :)

Sira geldi css kodumuzu olusturmaya: css.css

css.css dosyasmi da asagidaki gibi olmali :

/* makaleci menu css alani*/
#menu {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:130;
}
#menu li {
display:block;
margin: 0 0 0 4px;
padding:0;
float:left;
}
#menu li a{
text-decoration:none;
text-align:center;
font-size:13px;
color:#CBE1ED;
display:block;
width:96px;
height:21px;
background: #383840;
border:0;
padding:5px 0 0 0;
font-weight:bold;
line-height:21px;
margin-top:-5px;
}
#menu li a:hover{
text-decoration:none;
color:#0099CC;
width:96px;
height:26px;
border:0;
}

html dosyasinda actigimiz menu clasinin icerigini buradaki css dosyasinda veriyoruz..

#menu {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:130;
}

yukaridaki kod ile menu bolumunun nerelerde ve pozisyonlarini belirtiyoruz

#menu li {
display:block;
margin: 0 0 0 4px;
padding:0;
float:left;
}

yukaridaki css kodlari ilede menumuzu siraliyoruz ve maus ile uzerine geldigimiz <li> ekiti ile belirttigimiz linklerin seklini ve semalini ayarliyoruz..

asagidaki kod ile menunun duragan halini yansitiyoruz, yani maus ile menunun uzerine gelmeden default hali..

#menu li a{

bu alandaki ayarlarla oynayarak menunuzu istediginiz sekilde degistirebilirsiniz..

sira geldi menumuze biraz gorsellik katmaya, maus ile menude bir linkin uzerine geldigimizde bulundugu alan birazcik asagi dogru uzasin, bunun icinde bu alani kullanacagiz..

#menu li a:hover{

bildiginiz gibi a:hover etiketi linkler icin kullanir burada da listeledigimiz menuye maus ile geldigimizde yazi rengini degistirecegiz ve menunun biraz asagi dogru uzanmasini saglayacagiz..

DEMO bakabilirsiniz : http://www.makaleci.com/dersler/css-menu/cssmenu.html

arkadaslar ben aciklamalari ile anlattim, direkt aciklamalari gecip kaynak kodlarini isteyen arkadaslar asagidaki alandan 2 dosyanin kodlarini alabilirler..

cssmenu.html

<HTML>
<HEAD>
<TITLE>Makaleci.com css menu ornegi..</TITLE>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-9″>
<META name=”description” content=””>
<META name=”keywords” content=””>
<META name=”generator” content=”CuteHTML”>
<link rel=”stylesheet” href=”./css.css” type=”text/css” />

</HEAD>
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″>
<div><ul id=”menu”>
<li><a href=”http://www.makaleci.com/”>Ana Sayfa</a></li>
<li><a href=”http://www.makaleci.com/iletisim”>iletiþim</a></li>
<li><a href=”http://www.makaleci.com/makale-nasil-eklenir/makale-nedir”>Makale Nedir?</a></li>
<li><a href=”http://www.kuaza.com/”>Resim Yükle</a></li>
<li><a href=”http://www.kuaza.org/”>Kuaza La</a></li>
</ul></div><br /><br />
</BODY>
</HTML>

css.css

/* makaleci menu css alani*/
#menu {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:130;
}
#menu li {
display:block;
margin: 0 0 0 4px;
padding:0;
float:left;
}
#menu li a{
text-decoration:none;
text-align:center;
font-size:13px;
color:#CBE1ED;
display:block;
width:96px;
height:21px;
background: #383840;
border:0;
padding:5px 0 0 0;
font-weight:bold;
line-height:21px;
margin-top:-5px;
}
#menu li a:hover{
text-decoration:none;
color:#0099CC;
width:96px;
height:26px;
border:0;
}

arkadaslar biraz olsun aciklamaya calistim, anlasilir degilse ve eksiklikleri varsa yorumlarla belirtin dokumani en kisa zamanda guncelleyecegim..

2 YORUMLAR

Bir Cevap Yazın