Kapat

merhaba arkadaşlar.
css ile hazırlamış olduğumuz güzel bir animasyonlu menü örneğini sizlerin beğenisine sunmak istedim.
oldukça sade ve şık bir tasarımı olan bu menümüzde tek bir menü oluşturduk ve 4 tane link ekledik.
sizler bu menüyü referans alarak geliştirebilir ve kendi tasarımlarınızı oluşturabilirsiniz.
ben sizler için en basit haliyle sunuyorum sizlere.
şimdi yapmamız gerekenlere bakalım birlikte:
images adında bir klasör oluşturalım.
style.css dosyamızı oluşturalım.
daha sonra index.html dosyamızı oluşturalım.
evet bizim için gerekli olanlar bunlardı şimdide kodlarımızı yazalım.

öncelikle style dosyamızı hazırlayalım.

kod:

.outer a, .outer div, .outer li, .outer ul, .outer body{
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
div.menu{
width: 193px;
}
div.menu ul{
list-style: none;
text-indent: 0px;
}
div.menu li{
margin-top: 3px;
}
div.menu a{
font: 12px Verdana;
padding: 4px;
color: #646464;
display:block;
padding: 6px 30px;
height: 20px;
text-decoration: none;
background: url('images/background.gif');
}
div.menu a:hover{
background: url('images/highlight.gif') no-repeat right;
padding: 6px 40px;
}:148px;background:url(images/nav_active.jpg) no-repeat;color:#b18211;}

evet style tanımlamalarımızı yaptık.
şimdi ise html kodlarımızın bulunacağı index.html dosyamızın kodlarını yazalım.

kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> animasyonlu menü </title>
<link rel="stylesheet" type="text/css" href="menu_style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
</head>
<body>
<div class="outer">
<div class="menu">
<ul>
<li><a href="http://sadikozdogan.com">Ana Sayfa</a></li>
<li><a href="https://sadikozdogan.com">Hakkımızda</a></li>
<li><a href="https://sadikozdogan.com">web tasarım</a></li>
<li><a href="https://sadikozdogan.com">İletişim</a></li>
</ul>
</div>
</div>
</body>
</html>

evet kodlarımızı oluşturduk menümüz hazır artık.
resimleride buraya koyuyorum buradan edinebilirsiniz.

Bir önceki yazımız olan div etiketi ile basit bir tasarım başlıklı makalemizde css, css örnekleri ve div hakkında bilgiler verilmektedir.

Bir cevap yazın

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

*

code


Kapat