Blog
Teknoloji
Tasarım
Güvenlik
İnfografikler
CSS sitelerimizi oluştururken kullandığımız vazgeçilmez bir yapıdır. Bu konuda sizlere basit uygulayabileceğiniz bir örnek sunuyorum. Umarım faydalı olur.
1- İşte başlıyoruz önce cssmenu.html adında bir html dosyası oluşturalım. tek dosyada hem html hemde css kısmını ele alıcaz.
2- Menumüzü listeleme komutu olan <ul> komutunu kullanarak oluşturucağız işte menumuzun html kod yapısı:
[syntax type=”html”]
<ul>
<li><a href=”#”>Css</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>ActionScript</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>SQL Server </a></li>
<li><a href=”#”>PHP</a></li>
</ul>
[/syntax]
3- Sıra geldi css yapısını oluşturmaya :
[syntax type=”css”]
<style type=”text/css”>
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>
[/syntax]
4- Alttaki sayfada css olarak istediğiniz değişikliği yapabilirsiniz. işte cssmenu.html full yapısı;
[syntax type=”html”]
<html>
<head>
<style type=”text/css”>
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
border-right:1px solid #FFFFFF;
background-color: #FF3300;
}
a:hover{
background:#CCCC00;
}
</style>
<meta HTTP-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS yatay menu</title>
</head>
<body>
<ul>
<li><a href=”#”>Css</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>ActionScript</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>SQL Server </a></li>
<li><a href=”#”>PHP</a></li>
</ul>
</body>
</html>
[/syntax]
CSS Menuyu önizlemek için tıklayınız.
Paylaşım için teşekkürler.
Bu menüyü nasıl dikey menü yapabilirim. Display:block; yapıyorum ama olmuyor.
Yusuf bey inceleyebileceğiniz iki tane adres vereceğim.
http://www.dynamicdrive.com/ ve http://www.exploding-boy.com/
dikey menu konusunda bunlardan faydalanabilirsiniz.
Eğer yetmezse “CSS Vertical Menu” diye googledan arattırabilirsiniz.
@yusuf “display:inline” kodunu kaldırman yeterli.menu otomatik olarak dikey olacaktır.
dostum teşekkurler dertten kurtardın benı
Merhaba:
yaptığınız bilmeyenler için güzel bi kaynak hemde hoş bi tasarım olmuş
paylaştığınız kodları verdiğiniz için teşekkürler.
Benim sorum ise bu menüyü sayfamda nasıl ortalayabilirim
yardımcı olursanız sevinirim…
3. kısımdaki css bölümüne bu kodu ekleyin.
.ortala{
margin-left: auto;
margin-right: auto;
width: 50em;
}
4.kısımda bulunan <ul> kodunun üstüne;
<div class="ortala">ve </ul> kısmının altınada
</div>ekleyin.
çok teşekkür ederim sizin sayenizde çok güzel bir menü yaptım emeğinize sağlık……
Güzel anlatım , yeni başlayanlar için böyle anlaşılır ve yapılması gayet basit konular paylaşmanızı istiyorum….
teşekkürler faydalı bir yazı olmuş ben sürekli listelemelerde sorun yaşıyordum
hocam menü butonları içindeki yazıyı nasıl ortalarız?
yanlış: [anasayfa ] doğru:[ anasayfa ] gibi..
.ortala{ text-align:center} kodu kendi kendime buldum ve paylaşayım dedim 🙂
teşekkürler örnek için peki araya ayırıcı koymak için ne yapabilirim
Doğukn arada ayırıcı zaten mevcut :
border-right:1px solid #FFFFFF;
peki bu ayırıcı resim olarak olsa
Doğukan bu ileri düzey bir menü değil. Basit bir menü taslağı. Bunu geliştirmek sana kalmış 🙂 İleride bir başka menü taslağı verebilirim ancak bu konuda pek yardımcı olamam..
tamam yaptım sonunda teşekkürler herşey için
Basitçe ve temizce örneklemişsiniz. Teşekkürler.
Çok işime yaradı teşekkürler.
Ortamak için kısa ve kolay bir etiket olan …… i öneririm noktalı yere ne yazarsanız onu ortalayacak ve işinizi kolaylatıracaktır.
Ortamak için kısa ve kolay bir etiket olan <!– …… –> i öneririm noktalı yere ne yazarsanız onu ortalayacak ve işinizi kolaylatıracaktır.