تخفیف

سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

مبلغ کل
0
تسویه حساب
سبد خرید خالی می باشد

دانلود منو ساید بار زیبا با css , jquery همراه با دمو
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 734434
تعداد کل مطالب : 1351

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

تعداد دانلود:
508
تعداد بازدید:
5038
تاریخ:

هشتگ ها :

#منو رسپانسیو

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

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

ایجاد ساختار

ساختار 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')
}

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

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

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

  • logo-samandehi