Soldan sadece belirlediğimiz bir kısmı gözükecek üzerine geldigimizde açılacak ve menü, hakkımızda veya sosyal medya ikonlarının olabileceği bir alan olusturmuş olacağız.
DEMO
Bir index.html ve style.css dosyası açıyoruz.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Benan DİNDAR </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> </head> <body> <ul id="navigation"> <li class="home"><a href="" title="Home"></a></li> </ul> <script type="text/javascript"> $(function() { $('#navigation a').hide() $('#navigation a').stop().animate({'marginLeft':'-255px'},1000); $('#navigation a').show(1000) $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-255px'},200); } ); }); </script> </body> </html>
style.css
ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { display: block; margin-left: -2px; width: 300px; height: 900px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation .home a{ background-image: url(../images/hakkimda.jpg); } ul#navigation .about a { background-image: url(../images/img1.jpg); } ul#navigation .search a { background-image: url(../images/search.png); } ul#navigation .podcasts a { background-image: url(../images/ipod.png); } ul#navigation .rssfeed a { background-image: url(../images/rss.png); } ul#navigation .photos a { background-image: url(../images/camera.png); } ul#navigation .contact a { background-image: url(../images/mail.png); }