5 1 1 1 1 1 1 1 1 1 1 رتبه 5.00 (2 رای)
ما در امسپاد کاری را می کنیم که شاید هر کس دیگری بتواند. اما ما آن را متفاوت انجام می دهیم.
منوی شناور؟ تا به حال فکر کرده اید که چقدر ساده می توان منویی را شناور کرد!
به پایین بروید تا رفتار منو را مشاهده کنید.
Amaspad Floating Menu
کد و ما در تعاملی هستیم که خود نیز آن را تعجب بر انگیز می دانیم.
کد های ما مانند فرزندان ما هستند. با اهمیت بالایی آن را ایجاد می کنیم و در اختیار شما می گذاریم.
شما آزادید که از این کد ها هر جایی استفاده کنید.
منوی شناور شما تنها با مطالعه دقیق همین چند خط آماده می شود.
در ادامه کد html نمونه را مشاهده می کنید.
کد HTML زیر نمونه کد یک منوی ساده است. البته منو ها می توانند از این نیز پیچیده تر باشند.
						<div class="menu-containter">
						<ul class="menu">
							<li class="menu-item">
								<a href="#aboutus" class="menu-link">درباره امسپاد</a>
							</li>
							<li class="menu-item">
								<a href="#uscode" class="menu-link">کد و ما</a>
							</li>
							<li class="menu-item">
								<a href="#floatmenu" class="menu-link">منوی شناور چیست؟</a>
							</li>
							<li class="menu-item">
								<a href="#htmlcode" class="menu-link">کد HTML</a>
							</li>
							<li class="menu-item">
								<a href="#csscode" class="menu-link">کد CSS</a>
							</li>
							<li class="menu-item">
								<a href="#jsscode" class="menu-link">کد JS</a>
							</li>
						</ul>
						</div>
CSS های به کار رفته در این نمونه هم موارد زیر است.
						*{
							transition-duration: 250ms;
							-webkit-transition-duration: 250ms;
							-moz-transition-duration: 250ms;
							-o-transition-duration: 250ms;
						}
						.menu-containter {
							display: inline-block;
							width: 100%;
							height: auto;
							margin: 0 auto;
						}
						.menu-containter > ul{
							margin:0px !important;
							padding: 0px !important;
							
						}
						.menu-containter > ul.menu li {
							min-width: 16%;
							width:auto;
							float: right;
							list-style-type: none !important;
							font-family: tahoma;
							font-size: 13px;
							text-align: center;
							margin-left: 1px;
						}
						.menu-containter > ul.menu li:last-child {
							margin-left: 0px;
						}
						.menu-link {
							display: inline-block;
							width: 100%;
							max-height: 100px;
							text-decoration:none;
							color:white;
							padding-top: 10px;
							padding-bottom: 10px;
							background-color:#181818;
						}
						.menu-link:hover{
							background-color:whitesmoke;
							color:#484848;
							box-shadow:0px 0px 5px 0px gray;
						}
کد های جاوا اسکریپت به کار رفته از قرار زیر می باشد که می توانید آنها را مشاهده کنید.
						jQuery("document").ready(function($){
						$( '.menu-link' ).on('click', function(event) {
							event.preventDefault();
							var target = "#" + $(this).data('target');
							$('html, body').animate({
								scrollTop: $(target).offset().top - 50
							}, 300);
						});
						$( '.sidemenu-link' ).on('click', function(event) {
							event.preventDefault();
							var target = "#" + $(this).data('target');
							$('html, body').animate({
								scrollTop: $(target).offset().top - 50
							}, 300);
						});
						
						$(document).ready(function(){
							var menu = document.querySelector('ul.menu');
							var origOffsetY = menu.offsetTop;
							var yver = origOffsetY - 36;
							var sidemenu = document.querySelector('ul.sidemenu');
							var sorigOffsetY = sidemenu.offsetTop;
							var syver = origOffsetY;
							var maxsyver = syver - 86;
							function scroll () {
							if ($(window).scrollTop() >= yver) {
								$('ul.menu').addClass('f-nav');
							} else {
								$('ul.menu').removeClass('f-nav');
							}  
							if ($(window).scrollTop() >= syver) {
								$('ul.sidemenu').addClass('f-side');
							} else {
								$('ul.sidemenu').removeClass('f-side');
							}  
							
							}
							document.onscroll = scroll;
						});
						
						});

نظر خود را اضافه کنید.

ارسال نظر به عنوان مهمان

0
http://amaspad.com/index.php?option=com_komento&controller=captcha&captcha-id=67648&tmpl=component
نظر شما به دست مدیر خواهد رسید
  • هیچ نظری یافت نشد