ijquery

منو افقی افکت دار

screenshot

منو افقی افکت دار

آموزش استفاده

  1. قبل از تگ <head/>
    <style type="text/css">
    html {
    	background: #eee;
    }
    body {
    	margin: 0;
    	padding: 0;
    	font: 10px Tahoma, Geneva, sans-serif;
    	background: #1d1d1d;
    }
    .container {
    	width: 520px;
    	height: 330px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin: -165px 0 0 -210px;
    	overflow: hidden;
    }
    img {
    	border: none;
    }
    ul#topnav {
    	margin: 10px 0 20px;
    	padding: 0;
    	list-style: none;
    	font-size: 1.1em;
    	clear: both;
    	float: left;
    	width: 520px;
    }
    ul#topnav li {
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	float: left;
    	height:40px;
    }
    ul#topnav a, ul#topnav span {
    	padding: 10px 20px;
    	float: left;
    	text-decoration: none;
    	color: #fff;
    	text-transform: uppercase;
    	clear: both;
    	height: 20px;
    	line-height: 20px;
    	background: #1d1d1d;
    }
    ul#topnav a {
    	color: #7bc441;
    }
    ul#topnav span {
    	display: none;
    }
    ul#topnav.v2 span {
    	background: url("files/a_bg.gif") repeat-x left top;
    }
    ul#topnav.v2 a {
    	color: #555;
    	background: url("files/a_bg.gif") repeat-x left bottom;
    }
    </style>
    <script type="text/javascript" src="files/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$("#topnav li").prepend("<span></span>");
    	$("#topnav li").each(function() {
    		var linkText = $(this).find("a").html();
    		$(this).find("span").show().html(linkText);
    	}); 
    	$("#topnav li").hover(function() {
    		$(this).find("span").stop().animate({ 
    			marginTop: "-40"
    		}, 250);
    	} , function() {
    		$(this).find("span").stop().animate({
    			marginTop: "0"
    		}, 250);
    	});
    });
    </script>

     

  2. بعد از تگ <body>
    <div class="container">
      <ul id="topnav" class="v2">
        <li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a 
    href="#">منو آزمایشی</a></li>
        <li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a
     href="#">منو آزمایشی</a></li>
        <li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a 
    href="#">منو آزمایشی</a></li>
        <li><span style="display: inline; margin-top: 0px;">منو آزمایشی</span><a 
    href="#">منو آزمایشی</a></li>
        <li><span style="display: inline; margin-top: 0px;">منو</span><a 
    href="#">منو </a></li>
        <li><span style="display: inline; margin-top: 0px;">منو </span><a 
    href="#">منو </a></li>
      </ul>
    </div>

     


پیش نمایش دانلود فایل پلاگین

3 دیدگاه دربارهٔ «منو افقی افکت دار»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *