امکان حرکت بین صفحات با جی کوئری در دروپال

smooth-scrolling-navigation-with-jquery-in-drupal

جابه جایی بین صفحات با جی کوئری و حرکت اسکرول امکان زیبایی رو میتونه به ظاهر سایت بده ، استفاده از این نوع تکنیک در قالب های تک صفحه ای بسیار کاربرد داره که از بخش قالب های دروپال ، قالب هایی با این تکنیک قابل دانلود هستش.

برای اجرای این تکنیک ، نیاز به 3 مرحله داریم : 

مرحله اول : کد html زیر رو باید پیاده سازی کنیم.کاری به بخش head نداریم ، و در این مرحله منو و کد بخش های (section) خودمون که در اصل صفحات ما محسوب می شوند رو درست میکنیم.

<html>
<body>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='main.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <nav>
        <ul>
            <li><a class="nav" href="#page1">1</a></li>
            <li><a class="nav" href="#page2">2</a></li>
            <li><a class="nav" href="#page3">3</a></li>
            <li><a class="nav" href="#page4">4</a></li>
            <li><a class="nav" href="#page5">5</a></li>
        </ul>
    </nav>
    
    <section id="page1"></section>
    <section id="page2"></section>
    <section id="page3"></section>
    <section id="page4"></section>
    <section id="page5"></section>
</body>
</html>

فایل page.tpl.php رو باز میکنیم و  برای ایجاد منو از این کد استفاده میکنیم :

<?php if ($main_menu): ?>
      <nav id="main-menu" class="navigation">
        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu-links',
            'class' => array('links', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>
      </nav> <!-- /#main-menu -->
    <?php endif; ?>

نکته :  این کد ، منوی اصلی (main menu) رو برای ما در هرکجا که این کد رو قرار بدیم نمایش خواهد داد.

خوب تا اینجا منوی ما به خوبی ایجاد شد ، اما دو مورد رو باید بهش توجه کنیم :

  1. کلاس nav که به تگ a ما اضافه شده
  2. Id که به جای مسیر در تگ a قرار گرفته

برای انجام این موارد باید از دوماژول void_menu  و menu_attributes استفاده بشه.
menu_attributes : ماژولی هست که امکان اضافه کردن برخی کلاس ها ، آی دی ها و سایر امکانات رو به تگ li  و a  منوی  ما میده.

void_menu : از این ماژول برای اضافه کردن مسیرهای خاص به جای مسیر لینک منو استفاده میشه.

 با نصب ماژول های گفته شده و انجام تنظیمات اونها که بسیار ساده هستند ، پیوند های خودمون رو در منو ایجاد می کنیم. بعد از کد ناحیه منو باید کد بخش ها یا sections ها رو قرار بدیم.عینا این کد ها رو در فایل page.tpl.php کپی میکنیم.
پس نمای کلی فایل ما بصورت زیر ایجاد شده :

<?php if ($main_menu): ?>
      <nav id="main-menu" class="navigation">
        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu-links',
            'class' => array('links', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>
      </nav> <!-- /#main-menu -->
    <?php endif; ?>
    <section id="page1"></section>
    <section id="page2"></section>
    <section id="page3"></section>
    <section id="page4"></section>
    <section id="page5"></section>

نکته : در بین <div> های مربوط به بخش ها ، هر ناحیه ای که دوست داشته باشیم رو میتونیم تعریف کنیم و اون رو قرار بدیم.

مرحله دوم : کدهای css زیر رو در قالب فایل style.css به فایل info   اضافه میکنیم.

nav{
	position:relative;
}

ul{
	background-color:#666;
	position: fixed;
	top: 50%;
	left: 10px;
	transform: translate(0%, -50%);
	border-radius: 55px;
	padding:20px;
}

li.active{
	background-color:#ccc;		
}

li {
	list-style:none;
	background-color:#f1f1f1;
	border-radius: 100px;
	width:20px;
	height:20px;
	margin-bottom:10px;
	position:relative;
		
}
li a{
	text-decoration:none;
	position:absolute;
	color:#000;
	top: 50%;
	left: 50%;
	padding:10px;
	transform: translate(-50%, -50%);
	
}

li:last-child {
	margin-bottom:0px;
}

header {
	position:absolute;	
}

section{
	width:100%;
	height:100%;
}
#page1{
	background-color:#4a7c59;	
}

#page2{
	background-color:#68b0ab;
}

#page3{
	background-color:#8fc0a9;
}

#page4{
	background-color:#c8d5b9;
}

#page5{
	background-color:#faf3dd;
}

نکته : خالی کردن کش بعد از تغییر در فایل info اجباری هستش.

مرحله سوم :  مرحله آخر ما اضافه کردن کدهای jquery به قالب هستش ، برای این کار ابتدا فایل jquery-2.1.4.min.js  رو دانلود و در فولد js مربوط به تم قرار میدهیم و بعد در فایل info به صورت زیر فرخوانی میکنیم :

scripts[] = 'js/jquery-2.1.4.min.js'

کد زیر رو هم در فایل html.tpl.php که از مسیر module/systems در دسترس هستش ، طبق کد html که در ابتدا دیدیم بعد از تگ head  قرار می دهیم.

$(function() {
	$('.nav').click(function(){
		$('li').removeClass("active");	
		var link = $(this).attr('href');
		$(this).parent().addClass("active");
		var posi = $(link).offset().top;
		$('body,html').animate({scrollTop:posi},700);
	})
});

کار به پایان رسید ، درانتها فقط نیاز به کمی خلاقیت و سلیقه هست تا بخش هایی که مورد نیاز هستند رو به قالب خودمون اضافه کنیم و از داشتن یک تم جذاب لذت ببریم.

 

لینک  دمو

خبرنامه دروپال تم

باعضویت در خبرنامه هوشمند دروپال تم از جدیدترین قالب های دروپالی مطلع شوید.

افزودن دیدگاه جدید