hosseinsh22
دوشنبه 08 دی 1393, 11:57 صبح
امید وارم جواب سوال شما باشه . اخه من اینجوری متوجه شدم... موفق باشید
در بخش اول:
کدهای html زیر را در مکانی که میخواهید منو اصلی به نمایش در بیاید قرار دهید (مثلا در بخش header).
<div class="nav-container">
<div class="nav">
<ul>
<li><a href="">خانه</a></li>
<li><a href="">وردپرس</a></li>
<li><a href="">برنامه نویسی</a></li>
<li><a href="">دانلود</a></li>
<li><a href="">تماس با ما</a></li>
<li><a href="">درباره ما</a></li>
<li><a href="">ورود به سایت</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
در بخش دوم:
نوبت به استایل دهی می رسد، بنابراین قطعه کد زیر را در شیوه نامه قالب خود قرار دهید (البته در این منو بر زیباسازی تأکید چندانی نشده و شما می توانید هر نوع استایلی را که خواستید به آن بدهید).
* سلکتور f-nav، نام کلاسی است که در بخش جی کوئری ساخته خواهد شد.
body {
height: 2000px;
direction:rtl;
font-family:Tahoma;
background: #F3F3F3;
}
.nav-container {
background-color: #3c404b;
background: -webkit-linear-gradient(#56585D, #2F3034);
background: -moz-linear-gradient(#56585D, #2F3034);
background: linear-gradient(#56585D, #2F3034);
}
.f-nav {
z-index: 9999;
position: fixed;
right: 0;
top: 0;
width: 100%;
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
} /* this make our menu fixed top */
.nav {
height: 42px;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: right;
margin-top: 6px;
padding:6px;
border-left: 1px solid #ACACAC;
}
.nav ul li:first-child {
padding-left: 0;
}
.nav ul li a {
text-decoration:none;
padding:10px;
color:#fff;
}
.nav ul li a:hover {
text-decoration: underline;
}
و در بخش آخر:
به مرحله اصلی کار می رسیم، یعنی قرار دادن یک شرط جهت بررسی فاصله اسکرولر از بالا و تعریف یک کلاس جدید (با کمک دستور addClass) جهت استایل دهی به آن.
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 186) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
و کار تمام است.126992