Sweet Menu – jQuery Menü Eklentisi

17 Ekim 2012 | Kategori: jQuery,Webmaster | Yazar: mintik

Adam Becker Tarafından hazırlanmış olan Sweet Menu eklentisi çok kolay bir şekilde animasyon menü oluşturmanıza olanak sağlıyor. Gerçi bana kalırsa hiç değiştirmeden kullanmak en doğrusu olabilir. İcon tasarımları menü ile çok uyumlu görünüyor ve ayrıca sayfanın sağ tarafında sabit olarak durabilen bir özelliğe sahip. Sayfada scroll aşağı yada yukarı kaydırılsa dahi menünün bulunduğu yer değişmiyor.

Daha önceleri yayınlamış olduğumuz bir menü örneğine benzettim bu eklentiyi. Böyle bir örnek için eklentiye ihtiyaç var mıdır yok mudur ona da siz karar verin. Bahsettiğim menü örneğine buradan bakabilirsiniz.

Kullanım :

Head etiketleri arasına eklenmesi gereken bölümler.

jQuery, jQuery easing ve Sweet plugin eklentisinin url adresleri :

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jquery.sweet-menu-1.0.js"></script>

Css :

        <style type="text/css">
			body
			{
				background: #000000 url('images/bg.jpg') top center no-repeat;
			}

            .sweetMenuAnchor{
                border-top: 1px solid #ffffff;
                border-right: 1px solid #ffffff;
                border-bottom: 1px solid #ffffff;
				border-top-right-radius: 4px;
				-moz-border-radius-topright: 4px;
				border-bottom-right-radius: 4px;
				-moz-border-radius-bottomright: 4px;
				color: #0071bb;
				font-size: 24px;
				font-weight: bold;
				text-align: right;
				text-transform: uppercase;
				font-family: arial;
				text-decoration: none;
				background-color: #888888;
				opacity: 0.6;
			}

			.sweetMenuAnchor span{
				display: block;
				padding-top: 10px;
			}

			h1
			{
				display: block;
				text-align: center;
				font-size: 48px;
				color: #ffffff;
				text-shadow: 0px 0px 12px #000000;
				font-family: "Trebuchet MS";
			}
        </style>

body

{

background: #000000 url('images/bg.jpg') top center no-repeat;

}

.sweetMenuAnchor{

border-top: 1px solid #ffffff;

border-right: 1px solid #ffffff;

border-bottom: 1px solid #ffffff;

border-top-right-radius: 4px;

-moz-border-radius-topright: 4px;

border-bottom-right-radius: 4px;

-moz-border-radius-bottomright: 4px;

color: #0071bb;

font-size: 24px;

font-weight: bold;

text-align: right;

text-transform: uppercase;

font-family: arial;

text-decoration: none;

background-color: #888888;

opacity: 0.6;

}

.sweetMenuAnchor span{

display: block;

padding-top: 10px;

}

{

display: block;

text-align: center;

font-size: 48px;

color: #ffffff;

text-shadow: 0px 0px 12px #000000;

font-family: "Trebuchet MS";

}

</style>

JavaScript :

		<script type="text/javascript"> 
			$(document).ready(function(){ 

                $('#backMenu').sweetMenu({
					top: 40,
					padding: 8,
					iconSize: 48,
					easing: 'easeOutBounce',
					duration: 500,
					icons: [
						'images/back.png'
					]
				});

				$('#exampleMenu').sweetMenu({
					top: 200,
					padding: 8,
					iconSize: 48,
					easing: 'easeOutBounce',
					duration: 500,
					icons: [
						'images/home.png',
						'images/comments.png',
						'images/red_heart.png',
						'images/male_user.png',
						'images/yellow_mail.png',
						'images/computer.png'
					]
				});
			});
		</script>

$(document).ready(function(){

$('#backMenu').sweetMenu({

top: 40,

padding: 8,

iconSize: 48,

easing: 'easeOutBounce',

duration: 500,

icons: [

'images/back.png'

]

});

$('#exampleMenu').sweetMenu({

top: 200,

padding: 8,

iconSize: 48,

easing: 'easeOutBounce',

duration: 500,

icons: [

'images/home.png',

'images/comments.png',

'images/red_heart.png',

'images/male_user.png',

'images/yellow_mail.png',

'images/computer.png'

]

});

</script>

Body etiketleri arasına eklenmesi gereken bölüm.

Html :

		<ul id="backMenu">
        </ul>
		<ul id="exampleMenu">
            <li><a href="http://mintik.com/upload/demolar/2012/10/Sweet-Menu/#">Home</a></li>
            <li><a href="http://mintik.com/upload/demolar/2012/10/Sweet-Menu/#">Blog</a></li>
            <li><a href="http://mintik.com/upload/demolar/2012/10/Sweet-Menu/#">Portfolio</a></li>
            <li><a href="http://mintik.com/upload/demolar/2012/10/Sweet-Menu/#">Hire Me</a></li>
            <li><a href="http://mintik.com/upload/demolar/2012/10/Sweet-Menu/#">Contact</a></li>
            <li><a href="http://mintik.com/upload/demolar/2012/10/Sweet-Menu/#">My Apps</a></li>
        </ul>