منو افقی افکت دار
آموزش استفاده
- قبل از تگ <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>
- بعد از تگ <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>
بسیار عالی بود
aminnetwork.orq.ir
سپاس امین جان
سلام من یه مشکلی با اینمنو دارم هستین که پاسخ بدین؟؟