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);
}






 

About the author

Benan DİNDAR

Leave a Comment

Powered by themekiller.com anime4online.com animextoon.com