منو جی کوئری شناور

در این ساعت قصد داریم از سایت آموزش برنامه نویسی سورس باران آموزش ساخت منو شناور جی کوئری را به دوستان عزیز برنامه نویسی ارائه دهیم.  برای آموزش ساخت منو شناور جی کوئری به ادامه مطلب مراجعه نمایید.

 

 

 

قبل از تگ <head/> کد زیر را قرار بدید

<script language="javascript" src="jquery_mini.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
    var name = "#floatMenu";
    var menuYloc = null;
 
        $(document).ready(function(){
            menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
            $(window).scroll(function () {
                offset = menuYloc+$(document).scrollTop()+"px";
                $(name).animate({top:offset},{duration:500,queue:false});
            });
        });
     </script>
 
<link href="page.css" rel="stylesheet" type="text/css" />
 
<style type="text/css">
body {
    background-color:#000;
    height:2000px;
    color:#ccc;
    font:12px Tahoma, Arial;
}
    #floatMenu {
        position:absolute;
        top:150px;
        left:50%;
        margin-left:235px;
        width:200px;
        }
        #floatMenu ul {
            margin-bottom:20px;
            }
            #floatMenu ul li a {
                display:block;
                border:1px solid #999;
                background-color:#222;
                border-left:6px solid #999;
                text-decoration:none;
                color:#ccc;
                padding:5px 5px 5px 25px;
            }
            #floatMenu ul li a:hover {
                color:#fff;
                background-color:#333333;
            }
            #floatMenu ul.menu1 li a:hover {
                border-color:#09f;
            }
            #floatMenu ul.menu2 li a:hover {
                border-color:#9f0;
            }
            #floatMenu ul.menu3 li a:hover {
                border-color:#f09;
            }
.style1 {
    text-align: right;
}
</style>

 

و بعد از تگ <body> نیز کد زیر را

<div id="floatMenu" style="left: 50%; top: 150px; width: 198px">
  <ul class="menu1">
    <li class="style1"><a href="#" onclick="return false;">منو1 </a></li>
  </ul>
  <ul class="menu2">
    <li class="style1"><a href="#" onclick="return false;"> منو2 </a></li>
    <li class="style1"><a href="#" onclick="return false;"> منو3</a></li>
    <li class="style1"><a href="#" onclick="return false;"> منو4 </a></li>
  </ul>
  <ul class="menu3">
    <li class="style1"><a href="#" onclick="return false;"> منو5 </a></li>
  </ul>
</div>

برای تازه شدن دیر نیست.

موفق باشید

به این مطلب امتیاز دهید post

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج آموزش صفر تا صد طراحی فروشگاه اینترنتی بدون کدنویسی
  • انتشار: ۱۱ شهریور ۱۳۹۳

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

  1. من منوی سمت راست ک گذاشتم بخاطر اینکه فوتر با ارتفاع زیادی دارم وقتی ارتفاع مرورگر رو کم میکنم منو میره روی فوتر .. چطور جلوی این کارو بگیرم ؟

  2. خیلی مسخره و داغون بود . واقعا ک

  3. امیرحسین
    14 شهریور 1393

    خوبه

  4. با عرض سلام
    واقعا خسته نباشید وب سایت خیلی خوبی دارید واقعا به وظیفه دونستم که از شما تشکر کنم چون من خیلی از برنامه هاتون رو گرفتم و استفاده کردم

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.