sweet

Buna benzer  olan bir çok web tasarım örneği bulunuyor ama genel olarak sosyal medya ikonları için kullanılır. Bu tarz bir çalışma için eklenti yapmak gerekir miydi hala düşünüyorum. Aslında kodlara bakılınca gereksiz de değil hani. Javascript kodlar içinde alt alta ikonlarımızı sıralıyoruz ve html li etiketlerine sırasına göre ikonlar yerleşiyor. Sadece Css kullanılmadan yapılabilecek bir tasarım örneği olsa bile bilmeyenler için işi en kolay seviyesine indirgemiş olan bir uygulama. Bu yüzden hakkını yememek lazım. Hem kodlardan tasarruf hem de kafa yormaktan tasarruf edilmiş.

Css ile bu şekilde sırasına göre ikonları yerleştirmek mümkün :nth-child(1) şeklinde kullanarak. Hem bu işi öğrenmeye çalışan kaç kişi   :nth-child(1)  özelliğini ezbere yazabilir yada biliyor olabilir ki ? Bu yüzden web tasarım işi ile uğraşan kişiler herzaman geliştiricilere ihtiyaç duyarlar. Bu tarz çalışmaları yapıp ücretsiz dağıtan geliştiriciler olmasaydı inanın bu günkü bildiğimiz internet bu seviyede olmazdı. Bu yüzden SweetMenu uygulamasının hakkını da yememek lazım.

Adam Becker yapmış bu eklenti ile oluşturacağımız menüler web sitenin en solunda sabit bir şekilde duruyorlar. Mouse ile ikonların üzerine geldiğinizde link butonu sağa doğru kayıyor. Bu kayma işleminde easeOutBounce kullanıldığı için geri tepme gibi bir animasyona sahip.

Kullanım : 

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

Js dosya 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>

Stil : 

        <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>

 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>
  •  Body etiketleri arasına eklenmesi gereken bölüm.
Html : 
		<ul id="backMenu">
        </ul>
		<ul id="exampleMenu">
            <li><a href="https://www.mintik.com/?p=8992">Home</a></li>
            <li><a href="https://www.mintik.com/?p=8992">Blog</a></li>
            <li><a href="https://www.mintik.com/?p=8992">Portfolio</a></li>
            <li><a href="https://www.mintik.com/?p=8992">Hire Me</a></li>
            <li><a href="https://www.mintik.com/?p=8992">Contact</a></li>
            <li><a href="https://www.mintik.com/?p=8992">My Apps</a></li>
        </ul>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz