دانلود منو ساید بار زیبا با css , jquery همراه با دمو

نوشتن رسپانسیو منو برای سایت های مگا، کار ساده ای نیست. اگر شما در حال کار بر روی یک پنل مدیریت هستید، احتمالا شما باید یک منوی عمودی را طراحی و توسعه دهید، با مقدار زیادی زیر مجموعه ها. به همین دلیل تصمیم گرفتیم قطعه امروز را به اشتراک بگذاریم! ناوبری نوار ابزار ما می تواند زندگی شما را ساده تر با ارائه یک قالب شروع ساده برای پروژه بعدی خود؛)

آیکون: کتابخانه هسته ای .

ایجاد ساختار

ساختار HTML توسط 2 عناصر اصلی تشکیل شده است: <header>عنصر، شامل آرم وب سایت، فرم جستجو، ماشه ناوبری ( .cd-nav-trigger- تنها نسخه تلفن همراه) و ناوبری بالا، و یک <main>عنصر حاوی محتوای اصلی صفحه ( div.content-wrapper) و ناوبری نوار کناری ( nav.cd-side-nav)

<header class="cd-main-header">
   <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
	
   <div class="cd-search">
      <form action="#0">
         <input type="search" placeholder="Search...">
      </form>
   </div> <!-- cd-search -->

   <a href="#0" class="cd-nav-trigger">Menu<span></span></a>

   <nav class="cd-nav">
      <ul class="cd-top-nav">
         <li><a href="#0">Tour</a></li>
         <li><a href="#0">Support</a></li>
         <li class="has-children account">
            <a href="#0">
               <img src="img/cd-avatar.png" alt="avatar">
               Account
            </a>

            <ul>
               <li><a href="#0">My Account</a></li>
               <!-- other list items here -->
            </ul>
         </li>
      </ul>
   </nav>
</header> <!-- .cd-main-header -->

<main class="cd-main-content">
   <nav class="cd-side-nav">
      <ul>
         <li class="cd-label">Main</li>
         <li class="has-children overview">
            <a href="#0">Overview</a>

            <ul>
               <li><a href="#0">All Data</a></li>
               <!-- other list items here -->
            </ul>
         </li>
         <li class="has-children notifications active">
            <a href="#0">Notifications<span class="count">3</span></a>

            <ul>
               <li><a href="#0">All Notifications</a></li>
               <!-- other list items here -->
            </ul>
         </li>

         <!-- other list items here -->
      </ul>

      <!-- other unordered lists here -->
   </nav>

   <div class="content-wrapper">
      <!-- main content here -->
   </div> <!-- .content-wrapper -->
</main> <!-- .cd-main-content -->

در ساختار HTML اولیه ، عناصر .cd-searchو .cd-top-navدر داخل آن <header>، در حالی که در دستگاه های تلفن همراه آنها در داخل .cd-side-navعنصر نقل مکان (بیشتر در بخش رویداد دست زدن).

افزودن سبک

با توجه به اندازه صفحه نمایش، ما 3 تنظیم مختلف نوار کناری ایجاد کردیم. 
در دستگاه های کوچک، نوار کناری دارای عرض 100٪ است، در موقعیت مطلق قرار دارد و به صورت پیش فرض پنهان است ( visibility: hidden). هنگامی که کاربر با کلیک بر روی / ضربه تند وشدید زدن .cd-nav-trigger، نمایش نوار کناری به قابل مشاهده (با استفاده از .nav-is-visible کلاس) تغییر یافته است.

.cd-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

در دستگاه های متوسط ​​اندازه (عرض نمایش بیش از 768 پیکسل)، نسخه منحصر به فرد نوار جانبی به طور پیش فرض قابل مشاهده است: در موقعیت نسبی است، دارای عرض ثابت (110px) و به float: leftطوری که آن را در سمت چپ <main>عنصر است.

@media only screen and (min-width: 768px) {
  .cd-side-nav {
    position: relative;
    float: left;
    width: 110px;
    /* reset style */
    visibility: visible;
    opacity: 1;
  }
}

@media only screen and (min-width: 768px) { 
 .cd-main-content .content-wrapper { 
 margin-left: 110px; 
 } 
}

در دستگاه های بزرگتر (عرض نمایش بیش از 1170 پیکسل)، نسخه گسترش نوار کناری نشان داده شده است.

مدیریت رویدادها

در ساختار HTML اولیه، عناصر .cd-searchو .cd-top-navعناصر درون آن قرار دارند  <header>. 
در دستگاه های کوچک (عرض نمایش کمتر از 1170 پیکسل)، ما این عناصر را در داخل .cd-side-navناوبری حرکت می دهیم .

var resizing = false;
moveNavigation();
$(window).on('resize', function(){
   if( !resizing ) {
      window.requestAnimationFrame(moveNavigation);
      resizing = true;
   }
});

function moveNavigation(){
   var mq = checkMQ(); //this function returns mobile,tablet or desktop 

   if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) { //topNavigation = $('.cd-top-nav')
      detachElements();
      topNavigation.appendTo(sidebar); //sidebar = $('.cd-side-nav')
      searchForm.prependTo(sidebar);
   } else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
      detachElements();
      searchForm.insertAfter(header.find('.cd-logo')); //header = $('.cd-main-header')
      topNavigation.appendTo(header.find('.cd-nav'));
   }
   resizing = false;
}

function detachElements() {
   topNavigation.detach();//topNavigation = $('.cd-top-nav')
   searchForm.detach();//searchForm = $('.cd-search')
}

علاوه بر این، پلاگین جی کوئری منو هدف را یکپارچه کردیم  تا بین کاربرانی که سعی در شنا کردن بر روی یک آیتم نوار کناری و کاربر سعی در حرکت به محتویات زیر منو (فقط نسخه دسکتاپ) داشته باشند، تمایز قائل شوند.