ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد
فروش محصولات
فروش محصولات شما

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

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

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

دسته بندی :
دانلود منو ساید بار زیبا با 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')
}

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

حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 562
تعداد دانلود : 89
تاریخ 1397-3-16
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد