دانلود سورس js , css جستجو پیشرفته با انیمیشن زیبا

بدست آوردن تجربه جستجو به راستی کار ساده ای نیست. نقطه شروع همیشه فرم جستجو است که در اکثر موارد تنها شامل یک فیلد ورودی و یک دکمه ارسال است. صفحه نتایج جستجو برای طراحی بسیار مشکل است، مخصوصا اگر شما دارای دسته های مختلف محتوا باشید.

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

در اینجا یک انیمیشن سریع است که فرم جستجوی پیشرفته ما را در عمل نشان می دهد:

ایجاد ساختار

ساختار HTML توسط سه عنصر اصلی تشکیل شده است: <header>عنصر، بسته بندی ناوبری اصلی، یک div.cd-main-searchبرای فرم جستجو و main.cd-main-contentبرای محتوای اصلی صفحه.

<header class="cd-main-header animate-search">
   <div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>

   <nav class="cd-main-nav-wrapper">
      <a href="#search" class="cd-search-trigger cd-text-replace">Search</a>
    
      <ul class="cd-main-nav">
         <li><a href="#0">Products</a></li>
         <!-- additional navigation items -->
      </ul>
   </nav>

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

<main class="cd-main-content">
   <!-- your content here -->
</main>

<div id="search" class="cd-main-search">
   <form>
      <input type="search" placeholder="Search...">

      <div class="cd-select">
         <span>in</span>
         <select name="select-category">
            <option value="all-categories">all Categories</option>
            <!-- additional options here -->
         </select>
         <span class="selected-value">all Categories</span>
      </div>
   </form>

   <div class="cd-search-suggestions">
      <div class="news">
         <h3>News</h3>
         <ul>
            <li>
               <a class="image-wrapper" href="#0"><img src="img/placeholder.png" alt="News image"></a>
               <h4><a class="cd-nowrap" href="#0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></h4>
               <time datetime="2016-01-12">Feb 03, 2016</time>
            </li>

            <!-- additional news here -->
         </ul>
      </div> <!-- .news -->

      <div class="quick-links">
         <h3>Quick Links</h3>
         <ul>
            <li><a href="#0">Find a store</a></li>
            <!-- additional quick links here -->
         </ul>
      </div>
   </div> <!-- .cd-search-suggestions -->

   <a href="#0" class="close cd-text-replace">Close Form</a>
</div> <!-- .cd-main-search -->

افزودن سبک

در دستگاه های کوچک (عرض نمایش دهی کوچکتر از 1024 پیکسل)، ناوبری اصلی و فرم جستجو در سمت راست هستند، به طور پیش فرض پنهان شده اند. هنگامی که یک کاربر روی آیکون منو کلیک کند، عناصر <main>و <header>عناصر به سمت چپ ترجمه می شوند ( nav-is-visibleکلاس اعمال می شود) برای نشان دادن ناوبری.

.cd-main-header, .cd-main-content {
  position: relative;
  transition: transform 0.3s;
}
.cd-main-header.nav-is-visible, .cd-main-content.nav-is-visible {
  transform: translateX(-260px);
}

در دستگاه های بزرگتر، فرم جستجو در بالای ناوبری اصلی است که به طور پیش فرض پنهان است. هنگامی که یک کاربر.cd-search-triggerعنصر را کلیک کند ، .is-visibleکلاس برای نشان دادن فرم استفاده می شود.

@media only screen and (min-width: 1024px) {
  .cd-main-search {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .cd-main-search.is-visible {
    /* search form open */
    opacity: 1;
    visibility: visible;
  }
}

برای حرکت دادن انیمیشن فرم جستجو، ما از  .animate-searchکلاس اضافه شده به <header>عنصر استفاده می کنیم. این کلاس دو انیمیشن مختلف CSS3 را فعال می کند : cd-slide-in(برای فرم جستجو) و cd-3d-rotation(برای کشویی پیشنهادات).

@media only screen and (min-width: 1024px) {
  .animate-search .cd-main-search.is-visible {
    /* trigger search form animation if <header> has the .animate-search class */
    animation: cd-slide-in 0.3s;
  }
  .animate-search .is-visible .cd-search-suggestions {
    /* trigger the dropdown animation if <header> has the .animate-search class */
    transform-origin: center top;
    animation: cd-3d-rotation 0.5s 0.3s;
    animation-fill-mode: backwards;
  }
}
@keyframes cd-slide-in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes cd-3d-rotation {
  0% {
    transform: perspective(1000px) rotateX(-90deg);
  }
  100% {
    transform: perspective(1000px) translateY(0);
  }
}

اگر شما ترجیح می دهید یک اثر محو شدن پایه (به جای انیمیشن سازی فرم جستجو)، شما می توانید .animate-search کلاس را از <header>عنصر حذف کنید .

درباره انتخاب گروه: برای اطمینان از اینکه div.cd-selectعرض را با توجه به گزینه ای که کاربر انتخاب می کند تغییر می دهد، <select>عنصر در موقعیت مطلق قرار دارد (بنابراین فضای مورد نظر را نمی گیرد)، در حالی span.selected-valueکه برای نشان دادن گزینه انتخاب شده (متن آن زمانی تغییر می کند که کاربر انتخاب یک گزینه جدید با استفاده از jQuery).

@media only screen and (min-width: 1024px) {
  .cd-main-search .cd-select {
    position: absolute;
    right: 0;
    overflow: hidden;
  }
  .cd-main-search select {
    /* the <select> element is not visible - it is covered by the .selected-value element */
    position: absolute;
    right: 0;
    opacity: 0;
    color: transparent;
  }
  .cd-main-search .selected-value {
    color: #ffffff;
    pointer-events: none;
  }
  .cd-main-search select, .cd-main-search .selected-value {
    padding: 0.5em 1.7em 0.5em .3em;
    font-size: 1.4rem;
    border-radius: 3px;
  }
}

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

در ساختار HTML اولیه ، ناوبری در داخل است <header>. در دستگاه های کوچک، ما می خواستیم که ناوبری در سمت راست باشد، به طور پیش فرض پنهان شده، و ما برای آن آسان تر از خارج از آن بود <header>. بنابراین ما از jQuery برای انجام این کار استفاده می کنیم. 
ما برای موارد مشابه هم همین کار را انجام می دهیم div.cd-main-search: به طور پیش فرض، آن را خارج از ناوبری اصلی، در حالی که در دستگاه های کوچک ما آن را در داخل nav.cd-main-nav-wrapperعنصر حرکت می دهیم .

var navigationWrapper = $('.cd-main-nav-wrapper'),
    navigation = navigationWrapper.children('.cd-main-nav'),
    searchForm = $('.cd-main-search'),
    navigationTrigger = $('.cd-nav-trigger'),
    mainHeader = $('.cd-main-header');

function moveNavigation(){
   var screenSize = checkWindowWidth(); //returns 'mobile' or 'desktop'
   if ( screenSize == 'desktop' && (navigationTrigger.siblings('.cd-main-search').length == 0) ) {
      //desktop screen - insert navigation and search form inside <header>
      searchForm.detach().insertBefore(navigationTrigger);
      navigationWrapper.detach().insertBefore(searchForm).find('.cd-serch-wrapper').remove();
   } else if( screenSize == 'mobile' && !(mainHeader.children('.cd-main-nav-wrapper').length == 0)) {
      //mobile screen - move navigation and search form after .cd-main-content element
      navigationWrapper.detach().insertAfter('.cd-main-content');
      var newListItem = $('<li class="cd-serch-wrapper"></li>');
      searchForm.detach().appendTo(newListItem);
      newListItem.appendTo(navigation);
   }
}

علاوه بر این، ما از jQuery برای تشخیص رویدادهای کلیک و اضافه کردن / حذف کلاسها استفاده کردیم و span.selected-valueمتن را تغییر دادیم، هنگامی که کاربر یک گزینه دیگر را از <select>منوی کشویی انتخاب می کند .