سعید شعبانی

راهنمایی برای ساخت منو ناوبری Off-Canvas برای قالب ریسپانسیو

8 پست در این موضوع قرار دارد

دوستان سلام

در سایت smashing magazine مقاله ای در مورد منو های ناوبری ریسپانسیو نوشته بودند. من می خواهم آخرین نوع آن منو یعنی منو ریسپانسیو با استفاده از Transitioning سی اس اس را در سایتم قرار بدم. ولی در این مطلب به صورت کامل روش ساخت این منو را نگفته بود لطف می کنید روش ساخت این منو را بفرمایید.

به اشتراک گذاری این پست


لینک به پست

کدهاش توی دوم هست:

http://dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html

از روی همین استفاده کنید

به اشتراک گذاری این پست


لینک به پست

این منو و منو های مشابه تمام صفحه رو به راست یا چپ انتقال می دهند ولی من می خواهم مثلا فقط بخش سایدبار پنهان بشه و با کلیک روی دکمه مثلا "نمایش سایدبار" سایدبار به نمایش در بیاد. دقیقا مثل سایت 1پزشک که عکسش رو اینجا می گذارم

post-412-0-02550900-1372687747_thumb.jpg

ویرایش شده در توسط سعید شعبانی

به اشتراک گذاری این پست


لینک به پست

شما از مدیا کوئری استفاده کردید؟

به اشتراک گذاری این پست


لینک به پست

شما از مدیا کوئری استفاده کردید؟

مدیا کوئری چی هست؟ و برای چه بخشی؟

به اشتراک گذاری این پست


لینک به پست

شما از مدیا کوئری استفاده کردید؟

بله از مدیا کوئری استفاده کردم.

به اشتراک گذاری این پست


لینک به پست

خوب شما توی بخش مدیا کوئری تعریف میکنید که برای مثلا فلان سایز این سایدبار نمایش داده نشه. همون مخفی کنید.

بعد یک دکمه تعریف می کنید که با زدن اون (مثلا با جی کوئری) دئباره سایدبار نمایش داده بشه

به اشتراک گذاری این پست


لینک به پست

خوب شما توی بخش مدیا کوئری تعریف میکنید که برای مثلا فلان سایز این سایدبار نمایش داده نشه. همون مخفی کنید.

بعد یک دکمه تعریف می کنید که با زدن اون (مثلا با جی کوئری) دئباره سایدبار نمایش داده بشه

خوب درسته من هم دنبال همون دکمه و یک حالت نرم ولی نه سنگین برای جی کوئری هستم

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط alibashiri
      سلام دوستان
      لطفا در مورد آبشاری کردن این قالب کمک کنید
      برنامه هدر اینه
      <?php
      /**
       * The Header for our theme.
       * Displays all of the <head> section and everything up till <div id="content">
       */
      ?><!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
      <?php zerif_top_head_trigger(); ?>
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="profile" href="http://gmpg.org/xfn/11">
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
      <?php wp_head(); ?>
      <?php zerif_bottom_head_trigger(); ?>
      </head>
      <?php if(isset($_POST['scrollPosition'])): ?>
          <body <?php body_class(); ?> onLoad="window.scrollTo(0,<?php echo intval($_POST['scrollPosition']); ?>)">
      <?php else: ?>
          <body <?php body_class(); ?> >
      <?php endif;
          zerif_top_body_trigger();
          
          /* Preloader */
          if(is_front_page() && !is_customize_preview() && get_option( 'show_on_front' ) != 'page' ):
       
              $zerif_disable_preloader = get_theme_mod('zerif_disable_preloader');
              
              if( isset($zerif_disable_preloader) && ($zerif_disable_preloader != 1)):
                  echo '<div class="preloader">';
                      echo '<div class="status">&nbsp;</div>';
                  echo '</div>';
              endif;    
          endif; ?>

      <div id="mobilebgfix">
          <div class="mobile-bg-fix-img-wrap">
              <div class="mobile-bg-fix-img"></div>
          </div>
          <div class="mobile-bg-fix-whole-site">

      <header id="home" class="header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
          <div id="main-nav" class="navbar navbar-inverse bs-docs-nav" role="banner">
              <div class="container">
                  <?php zerif_before_navbar_trigger(); ?>
                  <div class="navbar-header responsive-logo">
                      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                      <span class="sr-only"><?php _e('Toggle navigation','zerif-lite'); ?></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      </button>
                          <div class="navbar-brand" itemscope itemtype="http://schema.org/Organization">
                              <?php
                              if( has_custom_logo() ) {
                                  the_custom_logo();
                              } else {
                              ?>
                                  <div class="site-title-tagline-wrapper">
                                      <h1 class="site-title">
                                          <a href=" <?php echo esc_url( home_url( '/' ) ) ?> ">
                                              <?php bloginfo( 'title' ) ?>
                                          </a>
                                      </h1>
                                      <?php
                                      $description = get_bloginfo( 'description', 'display' );
                                      if ( ! empty( $description ) ) : ?>
                                          <p class="site-description">
                                              <?php echo $description; ?>
                                          </p> <!-- /.site-description -->
                                      <?php elseif( is_customize_preview() ): ?>
                                      <p class="site-description"></p>
                                      <?php endif; ?>
                                  </div> <!-- /.site-title-tagline-wrapper -->
                              <?php } ?>
                          </div> <!-- /.navbar-brand -->
                      </div> <!-- /.navbar-header -->
                  <?php zerif_primary_navigation_trigger(); ?>
              </div> <!-- /.container -->
              <?php zerif_after_header_container_trigger(); ?>
          </div> <!-- /#main-nav -->
          <!-- / END TOP BAR -->
    • توسط vahidlb
      سلام و وقت بخیر خدمت مخاطبان عزیز.
      ابتدا خواهش می کنم این لینک رو ملاحظه بفرمایید.
      منظورم بخش "من متقاضی ... انتخاب کنید ...." هست.
      دوستان می تونید چنین افزونه ای و حتی مشابه اینو به من معرفی بفرمایید.. نیاز بسیار مبرم و حیاتی به این منو دارم
      از دوستانی که می تونن زحمت نوشتن و تولید این افزونه رو بکشن هم لطفاً پیام بدن...
      البته سال گذشته یکی از دوستان این کد را به صورت افزونه تولید کردند و الان هم کار می کنه ولی یکسری تغییرات لازم داره و به مراحلش اضافه شده،
      لذا خواهشمندم اگر ممکنه در این خصوص اعلام نظر بفرماییدو اگر پیشنهادی دارید یا افزونه مشابه اینو می شناسید خیلی ازتون ممنون خواهم شد اگر لطف کنید و راهنماییم کنید.
      با احترام و تشکر
    • توسط Fast-Learn
      سلام.
      من دارم یه قالب برای سایتم مینویسم، که طبعیتاً روی لوکالم بود. قالب کاملا توی پی سی ریسپانسیوه! یعنی وقتی صفحه ی مرورگر رو کوچیک میکنی، قالب خاصیت ریسپانسیویش کاملا صحیحه. یا وقتی از ابزار inspect element گوگل کروم قسمت تست ریسپانسیو بودنش استفاده میکنم، یا از سایتای تست ریسپانسیو بودن استفاده میکنم، باز هم کاملا سایت ریسپانسیوه!
      حالا اومدم شکل واقعیش رو توی گوشی ببینم، برای همین قالب رو روی هاست آپلود کردم، باز هم وقتی توی پی سی ریسپانسیو بودنش رو چک میکنم درسته، ولی وقتی توی موبایل نگاه میکنم اصلا ریسپانسیو نیست!
      توی چند تا موبایل تست کردم توی هیچکدوم ریسپانسیو نبود!
      برای ریسپانسیو کردن هم بیشتر جاها از قابلیتای فریم ورک materilize استفاده کردم و بعضی جاها هم دستی.
      ممنون میشم راهنماییم کنید!
      بد جوری اعصابمو خورد کرده
    • توسط PejmanDesigner
      با عرض سلام و خسته نباشید خدمت دوستانم .
      من مشکلی دارم که با جستجو نتونستم به جواب برسم شاید مواردی که جستجو می کردم اشتباه بوده .
      من می خوام در قسمت منو ها لینکی بزارم که صفحه جدیدی رو باز نکنه و به قسمت های مختلف در همون صفحه بره .
      من یک وب سایت تک صفحه دارم و برگه جدیدی ندارم . ولی می خوام با کلیک بر روی قسمت های مختلف منو بازدید کننده مستقیم اسکرول بشه به همون موقعیت .
      حالا دو سوال دارم در این رابطه
      اول اینکه ایا افزونه ای هست که این کار رو انجام بده ؟ یا اینکه باید کدی رو وارد کنم ؟ (لطفا در صورت داشتن کد ، علاوه بر کد نحوه قرار گیری هم توضیح داده شود)
      دوم اینکه اون طوری که من خیلی وقت پیش ها شنیدم مقدار پیکسل میگیره این کد که کجا اسکرول بشه ، حالا سوالم اینجاست که ما پیکسل بدیم داخل این کد ها یا افزونه آیا درحالت رسپانسیو مشکل ایجاد میشه یا نه ؟
    • توسط MahTV
      سلام دوستان و اساتید عزیز
      اگه بخوایم به صورت شرطی (کوچک بودن صفحه نمایش ) تو موبایل یک باکس رو (مثل باکس دانلود) به کاربر در حالت چرخش صفحه نشون بدیم 
      و به کاربر بگیم که برا دیدن لینک ها باید گوشی موبایلت رو بچرخونی باید چیکار کنیم ؟
       
      من این کد رو از سایتی برداشتم ولی نمیدونم چطور باید ازش استفاده کنم 
      <div class="alerta"><b class="icon-screen-rotation"></b><p style="text-align: center;"><span style="font-family: tahoma,arial,helvetica,sans-serif;">برای دیدن لینکهای دانلود ، موبایل خود را بچرخانید . دقت کنید گزینه اسکرین روتیشن یا چرخش صفحه در دستگاه شما روشن باشد </span></p></div>