آموزش ساخت منو شناور جی کوئری

4 دیدگاه

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

قبل از تگ <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>

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>

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>

</ul>

</ul>

</ul>

</div>

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

موفق باشید

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

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

نظرات

برچسب ها: آموزش برنامه نویسی

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۱۱ شهریور ۱۳۹۳

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

mohammad
پاسخ

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

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

خوبه
reza
پاسخ

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

آموزش ساخت منو شناور جی کوئری

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط