سعید شعبانی

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

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

دوستان سلام

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

0

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


لینک به پست

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

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

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

2

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


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

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


لینک به پست

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

0

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


لینک به پست

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

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

0

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


لینک به پست

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

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

0

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


لینک به پست

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

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

0

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


لینک به پست

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

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

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

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط j1989m
      سلام
      لطفا اسلایدر این سایتو ببینید: https://beyamooz.com
      میخوام یه اسلایدر مثل لینک بالا داشته باشم: بطوریکه داخل هراسلاید چند تا عنصر مختلف (آیکون و متن) باشه که با اومدن هراسلاید، هریک از عناصر داخلش با انیمیشن خاصی ظاهر بشن، و با رفتن هراسلاید، عناصر داخلش هم با انیمیشن ناپدید بشن...ضمن اینکه ریسپانسیو و لمسی هم باشه...  ؟ ؟ ؟ ؟ ؟ ؟
      در حال حاضر اسلایدر زیر رو با کاروسل ساختم:
      https://codepen.io/j1989mah/pen/VzoOmY
      جمعا 3 تا اسلاید هست: داخل اسلاید دوم و سوم المان هایی رو قرار دادم... اما میخوام با اومدن و رفتن هراسلاید المان های داخلش با انیمیشن ظاهر و ناپدید بشن...
      ؟ ؟ ؟ ؟ ؟ ؟
       
    • توسط farzadnoruzi
      سلام.
      دوستان من قالب zerif-lite رو روش کار کردم و کلی تغییرات دادم ولی بیشتر روی css ها کار کردم. الان منو واکنش گراش کار نمیکنه . لطفا بررسی کنید و راهنمایی کنید که مشکل از چیه
      منو باز نمیشه . البته باز میشه و خودکار بسته میشه . ثابت نمیمونه ... لطفا راهنمایییییی
      http://new.hofmannprofile.com
    • توسط 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 استفاده کردم و بعضی جاها هم دستی.
      ممنون میشم راهنماییم کنید!
      بد جوری اعصابمو خورد کرده