ساخت منو ثابت با انیمیشن در دروپال

build-animated-fixed-menu-for-drupal

ساخت منو دروپالی  زیبا و کاربرپسند یکی از مواردی هست که باید در سایت رعایت بشه ، منویی که همیشه در دسترس کاربران باشه و به راحتی بتونن ازش استفاده کنند.در این آموزش در 3 مرحله میخواهیم یک منوی ثابت دروپالی که با حرکت اسکرول نمایش داده میشه رو طراحی کنیم.
مرحله اول : به بخش منو میریم و یک منو با لینک های دلخواه ایجاد میکنیم. مانند درباره ما ، تماس با ما و....

مرحله دوم : کد زیر رو به بخشی که می خواهیم منوی اصلی (main menu) در اون قرار بگیره اضافه میکنیم :

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

همون طور که در کد مشاهده میکنید ، یک id به نام #main-menu برای ناحیه در نظر میگیرم ، و به ul  منو هم کلاس و آی دی به صورت زیر اضافه شده است :

'id' => 'main-menu-links',
'class' => array('menu links', 'clearfix'),

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

مرحله سوم : فایل  html.tpl.php  رو از مسیر modules/system کپی و در کنار فایل قالب قرار می دهیم.
کد زیر رو انتهای تگ head وارد میکنیم.

<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script>
$(document).ready(function() {
         $window = $(window);
    $(window).scroll(function(){

        if($window.scrollTop() > 100)
            $("#main-menu").addClass("active");
        else    
            $("#main-menu").removeClass("active");
            
        if($window.scrollTop() > 300)
            $("#main-menu").addClass("active_more");
        else    
            $("#main-menu").removeClass("active_more");
    });


});
</script>

نکته : کد بالا کلاس های , active_more  active رو بعد از اسکرول کردن به منو اضافه میکنه .

آموزش ما در سه مرحله به پایان رسید ، تنها کاری که نیاز هست کمی تمیزکاری و اضافه کردن css های مورد نیاز هستش.

امیدوارم آموزش ساخت منو ثابت در دروپال رو بتونید به راحتی در سایت های دروپالی خودتون اضافه کنید.

 

لینک دمو

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

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

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