Kapat

css ile basit olarak hazırladığım bir menü paylaşmak istedim sizler için.

menümüz yatay bir menü arkadaşlar.

ben css kodlarımı head etiketi içerisine yazdım. sizler geliştirip bağlantılı css olarak kullanabilirsiniz.

dilerseniz fazla sözü uzatmayayım bu bilgileri verdikten sonra kodları sizlere yazayım.

 

öncelikle css kodlarını yazayım.

 

menu.html dosyamızı oluşturalım.

 

<html>

<head>

<title> css yatay menü </title>

<style type="text/css">

body { margin:0px; padding:0px; }

#menum ul {

list-style:none;

margin:0px; padding:0px; }

#menum li {

float:left; position:relative; width:150px; }

#menum li ul {

display:none; left:0; position:absolute; top:21px; }

#menum ul li a{

background:#EFEFEF;

border-color:#CCCCCC #888888 #555555 #BBBBBB;

border-style:solid;

color:#000;

display:block;

font:bold 12px Arial, Helvetica, Sans-serif;

margin:0px;

padding:2px 3px;

text-decoration:none;

line-height:16px; }

#menum ul li a:hover {

background-color:#FFF; color:#FF0000; }

#menum li:hover ul { display:block; }

</style>

</head>

style kısmımız oluşturduktan sonra body kısmını yazalım.

 

 

<body>

<div id="menum">

<ul>

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Hakkımızda</a></li>

<ul>

<li><a href="#">öz geçmiş</a></li>

<li><a href="#">Yöneticilerimiz</a></li>

<li><a href="#">ürünlerimiz</a></li>

<li><a href="#">Faaliyetlerimiz</a></li>

</ul>

<li><a href="#">Hizmetlerimiz</a>

<ul>

<li><a href="#">Web Tasarım</a></li>

<li><a href="#">Hosting</a></li>

<li><a href="#">grafik Tasarım</a></li>

<li><a href="#">sss</a></li>

</ul>

<li><a href="#">Referanslarımız</a></li>

<li><a href="#">İletişim</a></li>

</ul>

</div>

</body>
</html>

 

evet css ve html kodlarımızı yazdık menümüzü bitirmiş olduk arkadaşlar.

başka bir yazıda görüşmek üzre.

iyi bloglamalar herkese.

Bir önceki yazımız olan sitenin sol tarafına sosyal bağlantılar ekleme başlıklı makalemizde css, css ile sosyal buton ekleme ve siteye sosyal buton ekleme hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat