АккордСон jquery: АккордСон Π²ΠΊΠ»Π°Π΄ΠΊΠΈ (Ρ‚Π°Π±Ρ‹) Π½Π° jQuery

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

АккордСон мСню Π½Π° jQuery | Frontips.ru

НапишСм простоС ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ мСню Π½Π° jQuery

extension

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.

Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.

fingerprint

Rerum necessitatibus

Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° Codepen

Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ HTML основу

ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ мСню Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ <div></div>

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню <div></div> ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ <div></div> ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° <div></div>

<section>
  <div> <!-- Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ -->
    <div> <!-- Π±Π»ΠΎΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню -->
      <div> <!-- Π±Π»ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° -->
        <div><span>extension</span></div>
        <div>Lorem ipsum dolor sit amet.</div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div> <!-- Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° -->
    </div>
    <div>
      <div>
        <div><span>eco</span></div>
        <div>Dolor sit amet.</div>
      </div>
      <div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi, minima iste libero impedit natus maxime fugit totam! Expedita, rerum necessitatibus sint adipisci architecto harum, sequi perferendis voluptatum temporibus ipsa nam dignissimos iure minus.</div>
    </div>
    <div>
      <div>
        <div><span>fingerprint</span></div>
        <div>Rerum necessitatibus</div>
      </div>
      <div>Consectetur blanditiis doloribus odio, voluptas vero perferendis assumenda quaerat rem quibusdam repudiandae eaque sed sapiente officia expedita eligendi</div>
    </div>
  </div>
</section>

ОпишСм стили CSS

ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ класса .about-item_active Π±Π»ΠΎΠΊΡƒ .about-item Π·Π°Π΄Π°Π΄ΠΈΠΌ стили для Π΅Π³ΠΎ элСмСнтов .about-item__head ΠΈ .about-item__icon

.about {
  padding: 60px 0;
}
.about__item:not(:last-child) {
  margin-bottom: 15px;
}
.about-item__head {
  background: #283845;
  padding: 15px 30px;
  color: #fff;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; /* ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ тСкста ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π±Π»ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
  display: flex;
  align-items: center;
  transition: 0.3s ease;
}
.about-item__head:hover {
  background: #24323e;
}
.about-item__title {
  font-weight: 700;
}
.about-item__icon {
  margin-right: 15px;
  line-height: 1;
  transition: 0.3s ease;
}
.about-item__body {
  padding: 30px;
  font-size: 16px;
  background: #fff;
  border-radius: 8px;
  color: #283845;
  display: none;
  margin-top: 10px;
}
.about-item_active .about-item__head {
  background: #22303b; /* Π² Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ состоянии Π±Π»ΠΎΠΊΠ° .about__item Ρ„ΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° .about-item__head мСняСт Ρ†Π²Π΅Ρ‚ */
}
.about-item_active .about-item__icon {
  color: #8cb369; /* Π² Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ состоянии Π±Π»ΠΎΠΊΠ° .about__item ΠΈΠΊΠΎΠ½ΠΊΠ° .about-item__icon мСняСт Ρ†Π²Π΅Ρ‚ */
}

ПишСм jQuery код

jQuery ΠΊΠΎΠ΄ с коммСнтариями

$(document).ready(function(){ // DOM Π³ΠΎΡ‚ΠΎΠ² для взаимодСйствия с Π½ΠΈΠΌ

  function accordion(parentSelector, itemSelector, itemActiveClass, headSelector, contentSelector, duration) { // объявляСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹

    let locked = false // объявляСм ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ для Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΊΠ»ΠΈΠΊΠ° ΠΏΡ€ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

    $(parentSelector).click(function(e){ // ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ, сСлСктор ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ (parentSelector)

      const target = $(e.target) // записываСм Π² константу элСмСнт, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ
      const item = target.closest(itemSelector) // ΠΈΡ‰Π΅ΠΌ блиТайший Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ, ΠΏΠΎ сСлСктору, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ (itemSelector)
      const itemHead = item.find(headSelector) // ΠΈΡ‰Π΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (4ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€) Π² Π±Π»ΠΎΠΊΠ΅, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ
      const itemContent = item.find(contentSelector) // ΠΈΡ‰Π΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Π±Π»ΠΎΠΊΠ΅ (5ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€), Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ

      const siblings = item.siblings() // ΠΈΡ‰Π΅ΠΌ сосСдниС Π±Π»ΠΎΠΊΠΈ, располоТСнныС Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ ΡƒΡ€ΠΎΠ²Π½Π΅, Ρ‡Ρ‚ΠΎ ΠΈ Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ
      const siblingsContent = siblings.find(contentSelector) // ΠΈΡ‰Π΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°(5ΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€) Ρƒ сосСдских Π±Π»ΠΎΠΊΠΎΠ²

      if (!target.closest(headSelector).length) return // Ссли ΠΊΠ»ΠΈΠΊ Π±Ρ‹Π» Π½Π΅ Π½Π° Π±Π»ΠΎΠΊΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°Π΅ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π΅Π»Π°Π΅ΠΌ

      if (locked) return // Ссли ΠΊΠ»ΠΈΠΊ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½, Ρ‚ΠΎΠΆΠ΅ ΠΏΡ€Π΅Ρ€Ρ‹Π²Π°Π΅ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ

      if (!item.hasClass(itemActiveClass)) { // Ссли Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ класса
        locked = true // Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ»ΠΈΠΊ
        siblings.removeClass(itemActiveClass) // удаляСм Ρƒ сосСдских Π±Π»ΠΎΠΊΠΎΠ² Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ класс
        siblingsContent.slideUp(duration) // сворачиваСм Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Ρƒ сосСдских Π±Π»ΠΎΠΊΠΎΠ² (6 ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ - duration - ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΡΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ)
        item.addClass(itemActiveClass) // добавляСм Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ класс Π±Π»ΠΎΠΊΡƒ, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ
        itemContent.slideDown(duration, function(){ // Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Ρƒ Π±Π»ΠΎΠΊΠ°, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ, послС окончания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ запускаСм Π΄Ρ€ΡƒΠ³ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ½ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΊΠ»ΠΈΠΊΠ°
          locked = false
        })
      } else { // Ссли Π±Π»ΠΎΠΊ, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ, ΠΈΠΌΠ΅Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ класс
        locked = true // Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ»ΠΈΠΊ
        item.removeClass(itemActiveClass) // удаляСм Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ класс Π±Π»ΠΎΠΊΡƒ, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ
        itemContent.slideUp(duration, function(){ // сворачиваСм Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Ρƒ Π±Π»ΠΎΠΊΠ°, Π³Π΄Π΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ, послС окончания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ запускаСм Π΄Ρ€ΡƒΠ³ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ½ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΊΠ»ΠΈΠΊΠ°
          locked = false
        })
      }
    })
  }

  accordion('.about-items', '.about-item', 'about-item_active', '.about-item__head', '.about-item__body', 300) // запускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ

  accordion('.briefly-cards', '.briefly-card', 'briefly-card_active', '.briefly-card__head', '.briefly-card__text', 600) // Ссли Π±ΡƒΠ΄ΡƒΡ‚ Π΅Ρ‰Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ мСню, Π½ΠΎ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ названиями классов, Ρ‚ΠΎ запускаСм эту ΠΆΠ΅ ΡΠ°ΠΌΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, пСрСдавая Π΅ΠΉ просто Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹

})

ΠŸΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹
  1. parentSelector — сСлСктор Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° — '.about-items'
  2. itemSelector — сСлСктор Π±Π»ΠΎΠΊΠ° ΠΏΡƒΠ½ΠΊΡ‚Π° мСню — '.about-item'
  3. itemActiveClass — Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ класс Π±Π»ΠΎΠΊΠ° ΠΏΡƒΠ½ΠΊΡ‚Π° мСню — 'about-item_active'
  4. headSelector — сСлСктор Π±Π»ΠΎΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° — '.about-item__head'
  5. contentSelector — сСлСктор Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° — '.about-item__body'
  6. duration — ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ разворачивания/сворачивания Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° — 300
ОписаниС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… нюансов
  1. Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΊΠ»ΠΈΠΊΠ° Π½ΡƒΠΆΠ½Π° для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ анимация Π½Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°Π»Π°ΡΡŒ нСсколько Ρ€Π°Π·. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация запускаСтся, Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ»ΠΈΠΊ, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация заканчиваСтся, снимаСм Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ
  2. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ Π² Ρ‚ΠΎΠΌ порядкС Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ записаны. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ строками Π² ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠ°Ρ…. Если это сСлСктор, Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΡƒ ('.about-item'). Если это Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π±Π΅Π· Ρ‚ΠΎΡ‡ΠΊΠΈ ('about-item_active')
  3. ПослСдним ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅ΠΌ число Π±Π΅Π· ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ — ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ разворачивания/сворачивания Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ готовности Π΄Π΅Ρ€Π΅Π²Π° DOM — .ready()

ΠžΠ±ΡŠΠ΅ΠΊΡ‚ event — function(e){}

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΈ константы — let ΠΈ const

Π‘Π»ΠΈΠΆΠ°ΠΉΡˆΠΈΠΉ подходящий ΠΏΡ€Π΅Π΄ΠΎΠΊ — .closest()

Поиск элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… — .find()

Поиск элСмСнтов Π»Π΅ΠΆΠ°Ρ‰ΠΈΡ… Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ — .siblings()

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ класса — .addClass()

Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ класса — .removeClass()

Π Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ сворачиваниС элСмСнтов — .slideDown() .slideUp()

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ для сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery

Π”ΡƒΠΌΠ°ΡŽ Π½Π΅ Ρ€Π°Π· Π’Ρ‹ встрСчали ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ эффСкт Π½Π° сайтах, это вСсьма ΡƒΠ΄ΠΎΠ±Π½ΠΎ, вСдь позволяСт Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ мСсто, ΠΏΡ€ΠΈ этом Π½Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ посСтитСля Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, которая Π΅ΠΌΡƒ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ пригодится. Π’ Π΄Π°Π½Π½ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ рассмотрим ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ достаточно простой эффСкт Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° для сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ собран ΠΈ скрыт, Π½ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΈ нСсти ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ Ρ†Π΅Π»Π΅Π²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Π’Π°ΠΊΠΈΠ΅ спойлСры Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ Π½Π° сайтах, Π³Π΄Π΅ ΠΌΠ½ΠΎΠ³ΠΎ тСкстовой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ.

Β 

Много Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ бСсплатных шаблонов Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π½Π° сайтС Π½Π°ΡˆΠΈΡ… ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ ΠΈ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ с круглосуточной Ρ‚Π΅Ρ…ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π² настройкС:

Π£ нас Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π±Π»ΠΎΠΊΠ°, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… стилизован Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ плюсом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас скрыта нСкая информация, ΠΏΡ€ΠΈ наТатии курсором, мСню Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ, ΠΏΡ€ΠΈ это Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ, ΠΈ Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ приступим.

Π¨Π°Π³ 1.Β HTML

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ проста, Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‰ΠΈΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ вся наша Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, для дСмонстрации ΠΌΡ‹ устанавливаСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ нашСй Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<div>

<h3>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ</h3>

<div>

<a href=»#»>

ВСкст

<i></i>

</a>

<div>

<p>ВСкст</p>

</div>

</div>

<div>

<a href=»#»>

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

<i></i>

</a>

<div>

<p> ВСкст.</p>

</div>

</div>

<div>

<a href=»#»>

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

<i></i>

</a>

</div>

Π—Π°Ρ‚Π΅ΠΌ Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ класс setΒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ наш ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄Π²ΠΈΠ΄ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π² Π½Π΅Π³ΠΎ ΠΌΡ‹ ΠΏΠΎΠ³Ρ€ΡƒΠΆΠ°Π΅ΠΌ класс contentΒ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ всС описаниС Π² Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π΅.

Π¨Π°Π³ 2.Β CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ всС это Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, для этого Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ нСсколько достаточно простых ΠΏΡ€Π°Π²ΠΈΠ», Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ стилизуСм ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€-Β accordion-container, Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ нас Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ h3:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

.accordion-container{

position: relative;

width: 500px;

height: auto;

margin: 20px auto;

}

.accordion-container > h3{

text-align: center;

color: #fff;

padding-bottom: 5px;

margin-bottom: 30px;

border-bottom: 1px solid #ddd;

}

.set{

position: relative;

width: 100%;

height: auto;

background-color: #f5f5f5;

}

.set > a{

display: block;

padding: 10px 15px;

text-decoration: none;

color: #555;

font-weight: 600;

border-bottom: 1px solid #ddd;

-webkit-transition:all 0.2s linear;

-moz-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.set > a i{

position:relative;

float: right;

margin-top:4px;

color: #666;

}

.set > a.active{

background-color:#3399cc;

color: #fff;

}

.set > a.active i{

color: #fff;

}

.content{

position:relative;

width: 100%;

height: auto;

background-color: #fff;

border-bottom: 1px solid #ddd;

display:none;

}

.content p{

padding: 10px 15px;

margin: 0;

color: #333;

}

Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ стилизуСм сам Π±Π»ΠΎΠΊ, ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ содСрТаниС нашСго Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ для класса setΒ Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΈ пассивноС состояниС, это ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π°ΠΌ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Π½Π°ΠΌΠΈ ΠΏΡƒΠ½ΠΊΡ‚.

Π¨Π°Π³ 3. JS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ всю Π½Π°ΡˆΡƒ Π·Π°Π΄ΡƒΠΌΠΊΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ, для этого ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ нСсколько строчСк скрипта, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ обСспСчим Ρ€Π°Π±ΠΎΡ‚ΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈ пассивных Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠΊΠΎΠ½ΠΊΡƒ «плюс» ΠΈ «минус»:

$(document).ready(function(){

$(«.set > a»).on(«click», function(){

if($(this).hasClass(‘active’)){

$(this).removeClass(«active»);

$(this).siblings(‘.content’).slideUp(200);

$(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»);

}else{

$(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»);

$(this).find(«i»).removeClass(«fa-plus»).addClass(«fa-minus»);

$(«.set > a»).removeClass(«active»);

$(this).addClass(«active»);

$(‘.content’).slideUp(200);

$(this).siblings(‘.content’).slideDown(200);

}

});

});

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΎ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ Π½Π° сайт ΠΈ достаточно просто ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ свой Π΄ΠΈΠ·Π°ΠΉΠ½ сайта.

Π’ΠΎΡ‚ ΠΈ всС. Π“ΠΎΡ‚ΠΎΠ²ΠΎ!

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

АккордСон jquery Β· GitHub

АккордСон jquery Β· GitHub

Instantly share code, notes, and snippets.

АккордСон jquery

// Accordeon jquery
$(«.js-faq-title»).on(«click», function(e) { // .on ΠΏΡ€ΠΈcоСдиняСт для Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° события
e.preventDefault(); // ΠΎΡ‚ΠΌΠ΅Π½Π° стандартных повСдСния ссылок
var $this = $(this); // $this — это пСрмСнная // this — это ссылка Π½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π²Ρ‹Π±Ρ€Π°Π½ -> («.js-faq-title»)
if (!$this.hasClass(«active»)) {
$(«.js-faq-content»).slideUp(); // .slideUp() ΠΏΠ»Π°Π²Π½ΠΎ скрываСт Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты
$(«.js-faq-title»).removeClass(«active»); // .removeClass() удаляСт ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько ΠΈΠΌΠ΅Π½ классов для Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… элСмСнтов
}
$this.toggleClass(«active»); // .toggleClass() добавляСт ΠΈΠ»ΠΈ удаляСт ΠΎΠ΄ΠΈΠ½, ΠΈΠ»ΠΈ нСсколько классов ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ элСмСнту
$this.next().slideToggle(); // .slideToggle() позволяСт ΠΏΠ»Π°Π²Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ
});
// Accordeon Pug
.faq__item
a(href=’#’).faq-title.js-faq-title Question 1 // .js-faq-title для отлавлывания ΠΊΠ»ΠΈΠΊΠΎΠ²
.faq-content.js-faq-content // .js-faq-content для отлавлывания ΠΊΠ»ΠΈΠΊΠΎΠ²
p Lorem ipsum dolor sit amet
// Accordeon sass
.js-faq-content
display: none

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Β» Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ для сайтов

13 586
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ accordion мСню

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню Ρ‚ΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° стрСлкС. Β 

5 038
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Flat accordion menu — Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Ρ‚ΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π² стилС flat design. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ стилизации.

4 586
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Akordeon — ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°

Akordeon — jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ Π½Π° страницу ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½. ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ настраиваСмый с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ отобраТСния большого объСма ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌ пространствС.

5 036
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

МСню Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π½Π° CSS3

МСню Π² стилС Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° сдСланноС Π½Π° CSS3 с использованиСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

5 419
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

АккордСон Π½Π° CSS3

Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, Π½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3 свойств.

6 667
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Π‘ΠΏΠΎΠΉΠ»Π΅Ρ€ — spoiler

Рассмотрим toggleClass Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ jquery для создания спойлСра ΠΈΠ»ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°.

3 506
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Π“ΠΈΠ±ΠΊΠΈΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ простой Π±Ρ‹ΡΡ‚Ρ€ΠΎΡ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈ раскрытии Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ области просмотра. Π’Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ нСсколько ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS3 для стрСлки. Π“ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана.

2 629
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Slider

Slidorion — слайдСр ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π² ΠΎΠ΄Π½ΠΎΠΌ

Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для jquery совмСщаСт Π² сСбС ΠΈ слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΈΠ· описания ΠΊ Π½ΠΈΠΌ.

4 302
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… ΡˆΡ‚ΠΎΡ€ΠΎΠΊ

ΠŸΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ — ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ происходит, ΠΊΠ°ΠΊ Π±Ρ‹ Ρ€Π°Π·Π΄Π²ΠΈΠ³Π°Π½ΠΈΠ΅ ΡˆΡ‚ΠΎΡ€ΠΎΠΊ ΠΈ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

2 232
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Slider

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½ΠΎΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π’ этой ΡƒΡ€ΠΎΠΊΠ΅ Ρ€Π΅Ρ‡ΡŒ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π΅ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ слайдСра Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π½Π° jQuery. ΠšΡƒΡΠΎΡ‡Π΅ΠΊ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° раздвигаСтся ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ тСкст, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ кусочки станут ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Π΅Π΅ ΠΈ соТмутся. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ слайду производится с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стрСлочСк ΠΈΠ»ΠΈ ΠΆΠ΅ колСсиком ΠΌΡ‹ΡˆΠΊΠΈ (ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Mousewheel ΠΎΡ‚ Brandon Aaron).

3 164
Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Плагин zAccordion — слайдСр

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ zAccordion — слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π² любой Π΄ΠΈΠ·Π°ΠΉΠ½ сайта.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ элСгантный Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ с JQUERY ΠΈ CSS3

БСгодня ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСгантный Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ИдСя состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ нСсколько Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Π²ΠΊΠ»Π°Π΄ΠΎΠΊ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Ρ€Π°Π·Π΄Π²ΠΈΠ³Π°Π»ΠΈΡΡŒ Π² стороны ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ·Β Π½ΠΈΡ… курсором ΠΌΡ‹ΡˆΠΈ. Для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ внСшнСго Π²ΠΈΠ΄Π° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ свойства CSS3. ДавайтС приступим!

Β 

Β 

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ссылку ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ для просмотра Π΄Π΅ΠΌΠΎΒ ΠΈΠ»ΠΈ ΠΆΠ΅ для скачивания исходных докумСнтов.

Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β  Β Β Π”Π΅ΠΌΠΎΒ  Β  Β  Β  Β  Β Β Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹

НачнСм Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ с размСтки.

Π ΠΠ—ΠœΠ•Π’ΠšΠ

HTML Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· списка, Π³Π΄Π΅ каТдая Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°Β β€” это элСмСнт списка. Π’Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта списка Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ исчСзаСт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ элСмСнт для Ρ„ΠΎΠ½Π° с Π±Π΅Π»Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ ΠΈ Π±Π»ΠΎΠΊ для описания.

<ul>
    <li>
        <div>Heading</div>
        <div></div>
        <div>
            <h3>Heading</h3>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>

ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ классы bg2, bg3 ΠΈΒ bg4. НСупорядочСнный список ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ класс ΠΈ id, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊΒ ΠΌΡ‹ Π±ΡƒΠ΄Π΅Ρ‚ Π² дальнСйшСм ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½Π΅ΠΌΡƒ Π²Β JavaScript.

CSS

Π‘Ρ‚ΠΈΠ»ΠΈ для списка Π±ΡƒΠ΄ΡƒΡ‚Β ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

ВсС элСмСнты списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΎΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ поэтому Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±Ρ‰ΠΈΠ΅ свойства стиля для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта списка:

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ box shadow Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π²Β IE.

ΠΠ°Ρ‡Π°Π»ΡŒΠ½Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ 115 пиксСлСй. Π’ JavaScript это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄ΠΎΒ 480px.

Π“Ρ€Π°Π½ΠΈΡ†Π° Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ΄Π½ΠΎΠΉ стороны элСмСнта, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Ρƒ нас бы ΠΏΠΎΠ»ΡƒΡ‡Π°Π»Π°ΡΡŒ двойная Ρ€Π°ΠΌΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ ΠΈ одинарная Ρ€Π°ΠΌΠΊΠ° Π½Π° Π²Π½Π΅ΡˆΠ½ΠΈΡ… Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ…. НуТно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ класс для Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ для послСднСго элСмСнта списка (Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ элСмСнты ΠΏΠ»Π°Π²Π°ΡŽΡ‚ справа, поэтому ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ стили Π±ΡƒΠ΄Π΅ΠΌ Π² обратном порядкС):

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ с Π±Π΅Π»Ρ‹ΠΌ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта списка ΠΏΡ€ΠΈ Β«Π·Π°ΠΌΠΊΠ½ΡƒΡ‚ΠΎΠΌΒ» состоянии аккордСона:

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

Π‘Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит описаниС, Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΒ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

Π‘Π½Π°Ρ‡Π°Π»Π° установим display:none, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊΒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ± элСмСнт появлялся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π’ΠΎΡ‚ стили других элСмСнтов:

ul.accordion li .description h3{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

Π‘Ρ‚ΠΈΠ»ΡŒ для градиСнта:

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}Β 

JAVASCRIPT

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery ΠΏΠ΅Ρ€Π΅Π΄ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ΠΌ Ρ‚Π΅Π³Π°Β body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, которая заставляСт список Ρ€Π°Π·Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΌΡ‹ΡˆΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достигнуто ΠΏΡƒΡ‚Π΅ΠΌ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² 480 пиксСлСй. ΠŸΡ€ΠΈ этом Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΡ‡Π΅Π·Π°Ρ‚ΡŒ ΠΈΒ Π΅Π³ΠΎ мСсто Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ (CSS класс Β«bgDescriptionΒ») с описаниСм:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

ΠŸΠ΅Ρ€Π²Π°Ρ функция Π²Π½ΡƒΡ‚Ρ€ΠΈ Β«$(β€˜#accordion > li’).hoverΒ» срабатываСт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π°Β Π½Π΅Π΅ курсора. Вторая функция — ΠΊΠΎΠ³Π΄Π° курсор отводится Π² сторону. Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ осущСствлялся плавно.

Π­Ρ‚ΠΎ всС! НадССмся, Ρ‡Ρ‚ΠΎ ΡƒΡ€ΠΎΠΊ Π±Ρ‹Π» интСрСсным ΠΈΒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ!Β 

Автор —Β MARYΒ LOU.

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄Β β€”Β Π”Π΅ΠΆΡƒΡ€ΠΊΠ°.

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅Β Ρ‚Π°ΠΊΠΆΠ΅:

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ для сайта | XoZblog

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ XoZbloga! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ 3 способа создания Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° для сайта:

  • с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery;
  • с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3;
  • с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML5.

Если Π’Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с Ρ‚Π°ΠΊΠΈΠΌ элСмСнтом Π½Π° сайтС, Ρ‚ΠΎ это ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ Ρ€Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ. На самом Π΄Π΅Π»Π΅ ΠΎΡ‡Π΅Π½ΡŒ простая концСпция, которая Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ нСбольшого скрипта для функционирования. АккордСоны, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΊΠ°ΠΊ:

  • мСню с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ;
  • ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° вопросы (FAQ страницу).

На самом Π΄Π΅Π»Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρ†Π΅Π»ΡŒ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚Ρ€ΠΈ способа создания Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. НачнСм с самого Π²Π΅Ρ€Π½ΠΎΠ³ΠΎ способа, Π²Π΅Ρ€Π½ΠΎΠ³ΠΎ Π² Ρ‚ΠΎΠΌ смыслС, Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π΄Π΅ΠΌΠΎ страницы ΠΈ скачиваниС исходников Π½Π΅ доступно

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ, XoZblog сущСствуСт ΠΈ развиваСтся Π·Π° счёт Π΄ΠΎΡ…ΠΎΠ΄ΠΎΠ² ΠΎΡ‚ нСнавязчивой Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹. Если Π½Π΅ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ этот сайт Π² ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ AdBlock. Бпасибо Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!

Бпособ 1: jQuery

Базовая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML ΠΈ CSS стили

1
2
3
4
5
6
7
8
9
10
11

<div>
Β  Β <h3>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1</h3>
Β  Β <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚…</p>
Β  Β <h3>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</h3>
Β  Β <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚…</h3>
Β  Β <h3>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 3</h3>
Β  Β <div>
Β  Β  Β  <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚…</p>
Β  Β  Β  <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚…</p>
Β  Β </div>
</div>

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ h3 Π±ΡƒΠ΄Π΅Ρ‚ Β«ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉΒ» для Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ происходит Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅, ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ скрытый ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ВмСсто h3 ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ p, ссылка, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ div ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ это Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эффСктивный способ создания этого Ρ‚ΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°.

Π‘Ρ‚ΠΈΠ»ΠΈ CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

h3 {
color: #002850; font-size: 30px; font-weight: normal;
padding: 45px 0 15px;cursor:pointer;
}
.accordion {
border: 1px solid #ddd; border-top: none; margin: 10px 0;
float: left; width: 470px; position: relative;
}
.accordion a {
display: block; text-decoration: none;
}
.accordion h3, .accordion a{
background-color: #fff;
background-image: url(gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff);
border-top: 1px solid #ddd;
color: #222; font: 14px/30px ‘Verdana’, sans-serif;
height: 30px; margin: 0; padding: 0; text-indent: 10px;
}
p {
color: #555; font: 12px/18px ‘Verdana’, sans-serif;
padding: 20px 10px;
}

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих ΠΏΡ€Π°Π²ΠΈΠ» создаСм ΠΎΠ±Ρ‰ΠΈΠ΅ для всСх способов, основныС стили Β«ΠΊΠ½ΠΎΠΏΠΊΠΈΒ» Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. Π’ качСствС Ρ„ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ CSS3 Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, само собой Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, поэтому ΠΈΠΌΠ΅Π΅Ρ‚ смысл ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°Ρ…ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

jQuery

Π‘Π°ΠΌΡ‹ΠΉ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ β€” jQuery:

1
2
3
4
5

$(document).ready(function(){
Β  Β $(‘#accordion-js’).find(‘h3’).click(function(){
Β  Β  Β  Β $(this).next().stop().slideToggle();
Β  Β }).next().stop().hide();
});

Благодаря сСлСктору Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ ΠΏΠΎ id ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ accordion-js, Π° Π² Π½Π΅ΠΌ элСмСнт h3. ΠžΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅ΠΌ ΠΊΠ»ΠΈΠΊ ΠΏΠΎ этому элСмСнту ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ .next() Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ элСмСнт послС h3, Π² нашСм случаС ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ p, ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΈΠ»ΠΈ скрываСм Π΅Π³ΠΎ послС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ‰Π΅Π»Ρ‡ΠΊΠ°.

Бпособ 2: CSS3

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<div>

Β  Β <a href=»#accordion-1″>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1</a>
Β  Β <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.=Β»#accordionΒ»]+* Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΈ скрываСм элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠ΄Π΅Ρ‚ послС ссылки, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉΡΡ Π½Π° #accordion.

Π§Ρ‚ΠΎ касаСтся псСвдокласса :target. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π² адрСсС ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ символ # ΠΈ указываСтся имя ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π’Ρ‹ Π½Π°ΠΆΠΈΠ²Π°Π΅Ρ‚Π΅ Π½Π° Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1, Π² Π°Π΄Ρ€Π΅ΡΠ½ΡƒΡŽ строку пСрСдаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href ΠΈ ΠΎΠ½Π° ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π²ΠΈΠ΄ index.html#accordion-1, происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ элСмСнту, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π·Π°Π΄Π°Π½ ΠΊΠ°ΠΊ accordion-1. Вакая запись адрСса называСтся Β«Ρ†Π΅Π»Π΅Π²ΠΎΠΉ элСмСнт». ПсСвдокласс :target примСняСтся ΠΊ Ρ†Π΅Π»Π΅Π²ΠΎΠΌΡƒ элСмСнту, ΠΈΠ½Ρ‹ΠΌΠΈ словами, ΠΊ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Π°Π½ Π² адрСсной строкС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Бпособ 3: HTML5

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ это самый простой способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, ΠΈ самый пСрспСктивный Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ. ΠŸΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² WebKit Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π”ΡƒΠΌΠ°ΡŽ Π½Π΅ стоит Ρ‚Π°ΠΊ просто ΡΠ±Ρ€Π°ΡΡ‹Π²Π°Ρ‚ΡŒ со счСтов HTML5, это лишь вопрос Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, вСдь Ρ€Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π° 100% ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

1
2
3
4
5
6
7
8

Β  Β <details>
Β  Β <summary><h3>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1</h3></summary>
Β  Β  Β <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚…</p>
Β  Β </details>
Β  Β <details>
Β  Β  Β <summary><h3>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2</h3></summary>
Β  Β  Β <p>Π—Π΄Π΅ΡΡŒ находится ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚…</p>
Β  Β </details>

Π’Π΅Π³ details ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для хранСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ содСрТимоС Ρ‚Π΅Π³Π° Π½Π΅ отобраТаСтся. А Ρ‚Π΅Π³ summary ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ для Ρ‚Π΅Π³Π° details, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ‰Π΅Π»ΠΊΠ°Ρ‚ΡŒ для разворачивания/сворачивания ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’Π΅Π³ summary Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄Ρ‚ΠΈ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ details.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ добавляСт стрСлку рядом с summary. ИзбавляСмся ΠΎΡ‚ этого Ρ‚Π°ΠΊ:

1

details summary::-webkit-details-marker{display: none;}

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π΄Π΅ΠΌΠΎ страницы ΠΈ скачиваниС исходников Π½Π΅ доступно

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ, XoZblog сущСствуСт ΠΈ развиваСтся Π·Π° счёт Π΄ΠΎΡ…ΠΎΠ΄ΠΎΠ² ΠΎΡ‚ нСнавязчивой Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹. Если Π½Π΅ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ этот сайт Π² ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ AdBlock. Бпасибо Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!

P.S.: Если Π²Ρ‹ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ я Π»ΡŽΠ±ΠΈΡ‚Π΅ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ постоянно ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Ρ‚ΠΎ Π²Π°ΠΌ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ слСдуСт Π·Π°Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° http://webformyself.com/minikurs/webdesign/free.html ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ. Π£Π²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ, интСрСсного ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰Π΅Π³ΠΎ. Π’Π°ΠΊΠΈΠ΅ знания Π²Π΄Π²ΠΎΠΉΠ½Π΅ приятнСС ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΎΡ‚ профСссионалов WebForMySelf.com.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π² курсС свСТих статСй ΠΈ ΡƒΡ€ΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π°Β Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΡƒΡŽ рассылку ΠΈΠ»ΠΈ Π½Π° Π½ΠΎΠ²ΠΎΡΡ‚Π½ΡƒΡŽ Π»Π΅Π½Ρ‚Ρƒ RSS. Бпасибо!

Плагин Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°

jQuery с 7 ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ

Плагин Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π² jQuery UI

Плагин Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° ΠΎΡ‚ jQuery UI ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π½Π° вашСй Π²Π΅Π±-страницС. Плагин Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ длинная информация, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π½Π° Π²Π΅Π±-страницС. АккордСон ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ пространство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π±ΡƒΠ΄Π΅Ρ‚ занято.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery — это просто вопрос Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery UI ΠΈ Π²Ρ‹Π·ΠΎΠ²Π° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ JavaScript, Π³Π΄Π΅ ΠΎΠ½ связан с Ρ‚Π°ΠΊΠΈΠΌ элСмСнтом, ΠΊΠ°ΠΊ div, Π°Π±Π·Π°Ρ† ΠΈ Ρ‚. Π”.ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½.

Π’ этом руководствС я Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€ΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, прСдоставляСмыС ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ jQuery UI accordion. Для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ вмСстС с дСмонстрационным ΠΊΠΎΠ΄ΠΎΠΌ.

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования jQuery accordion

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я создам Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ с трСмя сСкциями. Π₯отя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свой собствСнный ΡΡ‚ΠΈΠ»ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Ρ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ сайта. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, просто Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ выглядит Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery. Π”Π°Π»Π΅Π΅ слСдуСт Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса jQuery. Π₯отя ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ всС ΠΊΠ°ΠΊ использованиС CDN, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» jQuery UI JS Π½Π° основС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.

Π’ этом случаС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ трСбуСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ, Ссли Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, здСсь: http://jqueryui.com/download/

Π“Π»Π°Π²Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ создаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° div.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π³Π΄Π΅ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΈ

. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΌ

h2, h3 ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ‚Π΅Π³ span, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ каТдая панСль являСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ родствСнником послС ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1

Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π» 1.РазмСститС здСсь свой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π°Π±Π·Π°Ρ†Π°Ρ… ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнты div ΠΈ Ρ‚. Π”.

header 2

Π­Ρ‚ΠΎ сСкстСнция 2. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ изобраТСния:

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 3

Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π» 3. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ список Ρ‚Π°ΠΊΠΆΠ΅.

  1. позиция 1
  2. позиция 2
  3. позиция 3

Π Π°Π·Π΄Π΅Π» скрипта просто Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ div с Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠΌ:

$ («#jQuery_accordion»).Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ();

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ jQuery складной Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Β«Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Β» jQuery UI я ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ сворачиваСмой ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Π° ΠΎΠ΄Π½Π° панСль содСрТимого. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠΏΡ†ΠΈΡŽ сворачивания ΠΊΠ°ΠΊ true , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ панСль, щСлкая ΠΏΠΎ Π½Π΅ΠΉ. ΠŸΡ€ΠΈ этом всС ΠΏΠ°Π½Π΅Π»ΠΈ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹.

ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ эту строку Π² Ρ€Π°Π·Π΄Π΅Π» сцСнария ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ:

ΠΈΠ»ΠΈ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² дСйствии, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ссылку Π½ΠΈΠΆΠ΅:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Код jQuery:

CSS для этого Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°:

.ui-accordion .ui-accordion-header {

display: block;

курсор: ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ;

позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;

ΠΏΠΎΠ»Π΅: 2px 0 0 0;

Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: .5em .5em .5em.7em;

ΠΌΠΈΠ½-высота: 0; / * ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°: IE7 * /

font-size: 100%;

Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px # FDF8E4;

Ρ„ΠΎΠ½: # 846733;

Ρ†Π²Π΅Ρ‚: #fff;

}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° с настраиваСмым CSS

ЦвСтовая схСма ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery UI для Accordion — сСроватого Ρ†Π²Π΅Ρ‚Π°. Однако для своих Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ сайта. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ, Ρ†Π²Π΅Ρ‚, Ρ„ΠΎΠ½, тСкст Π² Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классов / ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Π΅Π±-страницы.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы CSS-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° jQuery-UI ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… Π² соотвСтствии с вашСй Ρ‚Π΅ΠΌΠΎΠΉ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ / свойства.

ΠšΠ»Π°ΡΡΡ‹, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для измСнСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ содСрТимого:

.ui-accordion .ui-accordion-header

ui-accordion .ui-accordion-content

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, сюда входят классы, связанныС со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ (Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅).Π­Ρ‚ΠΎ:

ui-accordion .ui-accordion-icons

ui-accordion .ui-accordion-icons .ui-accordion-icons

ui-accordion .ui-accordion-header .ui-accordion-header- Π·Π½Π°Ρ‡ΠΎΠΊ

ВмСсто Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ всСго Ρ„Π°ΠΉΠ»Π° CSS Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ эти классы для использования Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Β«Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Β» jQuery .Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ…, ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ² ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я создал Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ с трСмя панСлями содСрТимого с настроСнным CSS. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит вмСстС с ΠΊΠΎΠ΄ΠΎΠΌ:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

30

34

35

.ui-accordion .ui-accordion-header {

display: block;

курсор: ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ;

позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;

ΠΏΠΎΠ»Π΅: 2px 0 0 0;

Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: .5em .5em .5em .7em;

ΠΌΠΈΠ½-высота: 0; / * ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°: IE7 * /

font-size: 100%;

Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px # FDF8E4;

Ρ„ΠΎΠ½: # 846733;

Ρ†Π²Π΅Ρ‚: #fff;

радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 10 пиксСлСй;

}

.ui-accordion .ui-accordion-icons {

padding-left: 2.2em;

}

.ui-accordion .ui-accordion-icons .ui-accordion-icons {

padding-left: 2.2em;

}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {

позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;

ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ: .5em;

Π²Π΅Ρ€Ρ…: 50%;

margin-top: -8px;

}

.ui-accordion .ui-accordion-content {

padding: 1em 2.2em;

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: Π°Π²Ρ‚ΠΎ;

Ρ„ΠΎΠ½: # FDF8E4;

Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 1 пиксСль;

вСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 0;

радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 8 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 93%;

полС слСва: 10 пиксСлСй;

}

НацСнка:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1

Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π» 1.РазмСститС здСсь свой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π°Π±Π·Π°Ρ†Π°Ρ… ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнты div ΠΈ Ρ‚. Π”.

header 2

Π­Ρ‚ΠΎ сСкстион 2. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ изобраТСния

header 3

Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π» 3. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ список Ρ‚ΠΎΠΆΠ΅.

  1. позиция 1
  2. позиция 2
  3. позиция 3

jQuery

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° с border-radius для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ свСтлый Ρ„ΠΎΠ½ с Ρ€Π°ΠΌΠΊΠΎΠΉ, ΠΊΡ€ΠΎΠΌΠ΅ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹; всС ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… классах CSS.

АккордСон с ΠΎΠΏΡ†ΠΈΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π΅ jQuery.ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ панСль содСрТимого Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΡ‚ΠΈΠ»ΡŒ замСдлСния для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π‘ΠΌ. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с Ρ€Π°Π·Π½ΠΎΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΎΠΉ ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Код jQuery для этой дСмонстрации:

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я использовал ΠΎΠΏΡ†ΠΈΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с Ρ‚ΠΈΠΏΠΎΠΌ плавности easyInOutBounce .

ΠŸΡ€ΠΎΡΡ‚Π°Ρ анимация Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ InOutQuad

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° я Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ easyInOutQuad для ослаблСния. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я использовал Ρ‚Π΅Π³ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² с ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ, Π° Π½Π΅ Ρ‚Π΅Π³ h4.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список доступных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ замСдлСния, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ этой ссылкС: http://api.jqueryui.com/easings/

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° с ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ опция Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ 1500 миллисСкунд. Π­Ρ‚ΠΎ заставит ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ врСмя с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ сортируСмого Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°

ΠŸΡ€ΠΈ использовании Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… сайтах Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.НапримСр, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ управлСния Π²Π΅Π±-сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π² соотвСтствии с прСдпочтСниями. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²ΠΎΠΉΠ΄Π΅Ρ‚Π΅ Π² систСму, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚Π΅ ΠΆΠ΅ настройки, Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€ΠΎΡˆΠ»Ρ‹ΠΉ Ρ€Π°Π·. Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ своСму вкусу Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° jQuery UI.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°Ρ€ΠΌΠΎΡˆΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°, содСрТащСго Ρ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ.

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Код:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

Π“Π°Ρ€ΠΌΠΎΡˆΠΊΠ° Ρ‚ΠΎΠΆΠ΅ остаСтся Ρ€Π°Π·Π±ΠΎΡ€Π½ΠΎΠΉ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΏΠ°Π½Π΅Π»Π΅ΠΉ содСрТимого Π² ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΠΎΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ jQuery UI. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π₯отя классы ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ. Если Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚Π΅ Ρ„Π°ΠΉΠ» CSS jQuery-UI, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС классы CSS с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я создал Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ jQuery UI с настраиваСмыми классами Π·Π½Π°Ρ‡ΠΊΠΎΠ².Один класс ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, панСль содСрТимого ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ открываСтся. Π”Ρ€ΡƒΠ³ΠΎΠΉ — для Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… ΠΏΠ°Π½Π΅Π»Π΅ΠΉ со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ большСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ ссылку ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅:

Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄

Код jQuery:

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

30

34

35

36

37

38

39

40

41

42

43

44

45

.ui-accordion .ui-accordion-header {

display: block;

курсор: ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ;

позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;

ΠΏΠΎΠ»Π΅: 5px 0 0 0;

Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: .5em .5em .5em .7em;

ΠΌΠΈΠ½-высота: 0; / * ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°: IE7 * /

font-size: 100%;

Ρ„ΠΎΠ½: # FDF8E4;

Ρ†Π²Π΅Ρ‚: # 846733;

Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px # 846733;

радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 7 пиксСлСй;

}

.ui-accordion .ui-accordion-icons {

padding-left: 2.2em;

}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {

позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;

ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ: .5em;

Π²Π΅Ρ€Ρ…: 50%;

margin-top: -8px;

}

.ui-icon.PanelOpenicon {

padding-left: 2em;

Ρ„ΠΎΠ½: url (‘jquery.jpg’) Π±Π΅Π· ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π°;

Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: 15 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 20 пиксСлСй;

высота: 20 пиксСлСй;

}

.ui-icon.PanelClosedicon {

padding-left: 2em;

Ρ„ΠΎΠ½: url (‘jquery.jpg ‘) no-repeat -5px;

Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π°: 30 пиксСлСй;

ΡˆΠΈΡ€ΠΈΠ½Π°: 20 пиксСлСй;

высота: 20 пиксСлСй;

}

.ui-accordion .ui-accordion-content {

padding: 1em 2.2em;

вСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 0;

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: Π°Π²Ρ‚ΠΎ;

Ρ„ΠΎΠ½: # FFFF84;

}

НацСнка:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 1

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ 1 — ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°.

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 2

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ 2 — ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°.

Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ 3

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ 3 — ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΆΠΈΠ²ΡƒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ ссылки.

25+ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° JQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ вашСго сайта

Π•ΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ² ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ растСт с Π³ΠΎΠ΄Π°ΠΌΠΈ! Для этого Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠ³ΠΎ ΠΈ насыщСнного тСкстом содСрТания простой ΠΈ эффСктивный способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΌΠ΅Π½Π΅Π΅ скучным — это Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ ΠΈΠ»ΠΈ складныС элСмСнты. По сути, ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ограничивая ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ содСрТимого сворачиваСмыми мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ. Базовая структура ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ / Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ Ρ‚Π΅Π»ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ ΠΏΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π΅.Π­Ρ‚ΠΎ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ шаблон для выдСлСния Π²Π°ΠΆΠ½Ρ‹Ρ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° с использованиСм прогрСссивного раскрытия ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Но ΠΊΡ‚ΠΎ сказал, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ простыми ΠΈ скучными? ИмСя доступ ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ стилизации с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠΎΠ΄ΠΎΠ², Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρ‹ сайтов ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎ ΠΈΠ»ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎ, насколько захотят! И Ссли Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Ρ‚ΠΎΠ»Ρ‡ΠΎΠΊ ΠΊ появлСнию ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈ новаторских ΠΈΠ΄Π΅ΠΉ, Ρ‚ΠΎ этот список сСгодня, бСзусловно, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ мСсто. ОбъСдинив всС бСсплатныС ΠΎΠ½Π»Π°ΠΉΠ½-Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‡Π΅Ρ€ΠΏΠ½ΡƒΡ‚ΡŒ ΠΈΠ΄Π΅ΠΈ для смСлых, ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ выглядящих ΠΈ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², сСгодня Ρƒ нас Π΅ΡΡ‚ΡŒ список Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… jQuery Accordions для вас! Выбирая эти Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ доступ ΠΊ ΠΏΠΎΠ»Π½ΠΎΠΉ структурС кодирования.А Ссли вас интСрСсуСт большС элСмСнтов CSS, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΈ Ρ‚. Π”., Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ нашими сообщСниями Π² Π±Π»ΠΎΠ³Π΅.

JQuery Accordion Navigation

Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части нашСго списка находится простоС ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° jQuery, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ впСчатляСт ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ пСрСмСщаСтся. Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π² этом ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС количСство ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΈ ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ. Π¦Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ схСмы свСдСны ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, поэтому основноС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ здСсь удСляСтся Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ.Если Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ рядом с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΈ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. Π­Π»Π΅Π³Π°Π½Ρ‚Π½Ρ‹ΠΉ, Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ ΠΈ чистый, это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ²Π΅Ρ€Ρ… вашСго сайта. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ сама структура довольно гибкая, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ с этого холста ΠΈ Π² дальнСйшСм Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ своСму ΡƒΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π ΡƒΡ‡ΠΊΠ° Duke

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ΅ с использованиСм jQuery acccordion, — это Ρ€ΡƒΡ‡ΠΊΠ° Duke Π½Π° codepen.Π­Ρ‚ΠΎ довольно Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ здСсь Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ оставил камня Π½Π° ΠΊΠ°ΠΌΠ½Π΅. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΡŒΡŽ ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ Ρ‚Π°ΠΊΠΈΠΌ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ. Он ΠΈΠΌΠ΅Π΅Ρ‚ простоС мСню ΠΈ яркий Ρ†Π²Π΅Ρ‚ для Π΅Π³ΠΎ прСдставлСния. Π”Π°ΠΆΠ΅ Ρ‚Π΅Π½ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ большС рСалистичности. На ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π° для Π²ΠΊΠ»Π°Π΄ΠΎΠΊ с Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠ°ΠΌΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ — Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ с Π»Π΅Π²ΠΎΠΉ стороны. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ вмСстС с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ.ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ проявляСтся. Π’ Ρ†Π΅Π»ΠΎΠΌ довольно Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ простой ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ссли Π²Ρ‹ спроситС нас, ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π΄ΡƒΠΌΠ°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ± этом стоит ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ здСсь.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

jQuery (Π±Π΅Π· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса) Accordion

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π½Π° ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ Ρƒ нас Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½ Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ с простым ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π°ΠΊΡ†Π΅Π½Ρ‚ΠΎΠΌ Π½Π° Π½Π΅Π³ΠΎ. Он Π² основном содСрТит Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ тСксты Π² Π²ΠΈΠ΄Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ раскрытия Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° Π² качСствС содСрТимого Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°.ИспользованиС ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмы с простым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ для тСкстов ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. КаТдая ΠΈΠ· ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Ρ‚Π°ΠΊΠΆΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π° для дСмонстрации ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ ΠΎΠ΄Π½Ρƒ, ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΡƒΠ±ΠΈΡ€Π°ΡŽΡ‚ΡΡ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АккордСон JQuery ΠΎΡ‚ Викаса Π’Π΅Ρ€ΠΌΡ‹

НачнСм наш список с простого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Викаса Π’Π΅Ρ€ΠΌΠ°. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ простоты ΠΈ чистой эстСтики, всС Π² этом нравится ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ.ΠžΡ‚ сСро-Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ ΡƒΠ·ΠΎΡ€Π° Π΄ΠΎ использования ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² — это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ вашСго сайта. HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния структур, содСрТимого ΠΈ Ρ„ΠΎΡ€ΠΌ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ простыС JS ΠΈ CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для добавлСния ΠΏΠ»Π°Π²Π½Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ². Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ наТимаСтся Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, ΠΎΠ½ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. МалСнькиС Π΄Π΅Ρ‚Π°Π»ΠΈ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ„ΠΎΡ€ΠΌΡ‹ Π·Π½Π°Ρ‡ΠΊΠ° — Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΈΠΌ интСрСсным. Π’ΠΎΠ½ΠΊΠΈΠΉ, Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ†Π΅Π»ΡŒ, это Π² Ρ†Π΅Π»ΠΎΠΌ Π΄Π΅Π»Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ чистым.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ SASS jQuery Accordion

Π§Ρ‚ΠΎ касаСтся Π±ΠΎΠ»Π΅Π΅ слоТного Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ, Ρ‚ΠΎ это Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° jQuery. Π­Ρ‚ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½, созданный Π”ΠΆΠΎΠ½ΠΎΠΌ БтуэбС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠΎΠ΄Ρ‹ SASS, Π° Ρ‚Π°ΠΊΠΆΠ΅ JQuery для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΈ размСщСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ начинаСтся со скрытого содСрТимого, Π² этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ эффСкт, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŽ. Если Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ, ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ автоматичСски убСрСтся.ВсС Π² этом Π·Π°Π²ΠΎΡ€Π°ΠΆΠΈΠ²Π°Π΅Ρ‚, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎ отнСсся ΠΊ Ρ‚ΠΎΠ½ΠΊΠΈΠΌ дСталям. Π’ зависимости ΠΎΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ»ΠΈ, мСню пСрСмСщаСтся Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ содСрТимоС. Π—Π½Π°Ρ‡ΠΊΠΈ рядом с Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмой Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ измСнятся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅. Π”Π°ΠΆΠ΅ Ρ‚Π΅Π½ΠΈ ΠΈ освСщСниС ΠΈΠ³Ρ€Π°ΡŽΡ‚ Ρ€ΠΎΠ»ΡŒ Π² создании Π±ΠΎΠ»Π΅Π΅ матСриалистичного ощущСния.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

4Line jQuery Accordion

Π’Π΅ΠΏΠ΅Ρ€ΡŒ это Π±ΠΎΠ»Π΅Π΅ минималистичный ΠΈ простой Π΄ΠΈΠ·Π°ΠΉΠ½ jquery-Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ, Ссли Π²Ρ‹ Π΅Π³ΠΎ ΠΈΡ‰Π΅Ρ‚Π΅.Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ Π΄Π°Π» ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ„ΠΎΡ€Ρƒ, Ссли ΠΎΠ½ΠΈ хотят Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ своС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ довольно просты. А Π²ΠΎΡ‚ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ довольно ΠΏΠ»Π°Π²Π½ΠΎ. И, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, вся структура основана Π½Π° 4 простых линиях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слуТат Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈΠ»ΠΈ содСрТимого. Π›Π΅Π³ΠΊΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ воспроизвСсти, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… настроСк здСсь ΠΈ Ρ‚Π°ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ это Π² свой собствСнный Π΄ΠΈΠ·Π°ΠΉΠ½. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΠΉ структурС кодирования.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π’Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ΡΡ стрСлы

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π² Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Π³Π°ΠΌΠΌΠ΅, это Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΈ слоТный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ опрСдСляСтся Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… раскрываСтся Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. Но, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, фокус здСсь — Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ΡΡ стрСлки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ своС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠΈ. Π Π°Π·Π΄Π΅Π»Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ Π½Π° нСсколько частСй с раздСлитСлями ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ. Π’ Ρ†Π΅Π»ΠΎΠΌ, Π΄ΠΈΠ·Π°ΠΉΠ½ остаСтся минималистичным, Π½ΠΎ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя соврСмСнным со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ, Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ схСмами ΠΈ всСй структурой. БочСтая HTML, CSS ΠΈ jQuery, ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° поигрался с ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΌΠΈ функциями, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ этот ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘Π΅ΠΊΡΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ чистом ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ с Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»Ρ‹ΠΌΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ схСмами, Ρ‚ΠΎ этот ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ‚ Π² Ρ‚Ρƒ ΠΆΠ΅ Π½ΠΈΡˆΡƒ. Однако вмСсто Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, ΠΊΠ°ΠΊ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ Π½Π°ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², пСрСчислСнных сСгодня, здСсь Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ 4 Π»ΠΈΠ½ΠΈΠΈ для обозначСния ΠΊΠ°ΠΆΠ΄ΠΎΠΉ складной сСкции. Π’Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° Π»Π΅Π²ΠΎΠΉ сторонС Ρ‚Π°ΠΊΠΆΠ΅ добавляСт этот Ρ‚ΠΎΠ½ΠΊΠΈΠΉ Π½Π°ΠΌΠ΅ΠΊ Π½Π° творчСство. БочСтая простоту со всСм Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΎΠΉ, этот Π΄ΠΈΠ·Π°ΠΉΠ½ унивСрсалСн ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ практичСски со всСми Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌΠΈ сайтами.Π₯отя всС элСмСнты ΠΈ ΠΈΡ… ΡΡ‚ΠΈΠ»ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свой собствСнный ΡˆΡ‚Ρ€ΠΈΡ…, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² здСсь ΠΈ Ρ‚Π°ΠΌ. Π’Π°ΠΊ Π·Π°Ρ‡Π΅ΠΌ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ с чистого листа, Ссли эта бСсплатная опция ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Ρ„ΠΎΡ€Ρƒ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Адаптивный синий Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Одно ΠΈΠ· Π³Π»Π°Π²Π½Ρ‹Ρ… достоинств Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° — это, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΅Π³ΠΎ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ. И этот Π΄ΠΈΠ·Π°ΠΉΠ½, нСсомнСнно, являСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²ΠΎΠΏΠ»ΠΎΡ‰Π΅Π½ΠΈΠ΅ΠΌ этого. Π­Ρ‚ΠΎΡ‚ синий Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, подходящий ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ экрана, ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΎΠΌΡƒ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ, ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ Π΅ΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ внСшний Π²ΠΈΠ΄.Π―Ρ‰ΠΈΠΊΠΈ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Ρ‚Π°ΠΊΠΆΠ΅ содСрТат мСста для размСщСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ являСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠ΅ΠΉ. Π₯отя синиС ΠΈ Π±Π΅Π»Ρ‹Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ схСмы довольно ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Π² соотвСтствии со своими прСдпочтСниями. Π’Ρ€Π°Ρ‰Π°ΡŽΡ‰Π°ΡΡΡ стрСлка для Π±ΠΎΠ»Π΅Π΅ интСрСсной Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°. Π’ Ρ†Π΅Π»ΠΎΠΌ, довольно Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰Π΅, Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ доступ ΠΊ ΠΊΠΎΠ΄Π°ΠΌ ΠΏΠΎ ссылкС Π²Π½ΠΈΠ·Ρƒ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Simple Accordion jQuery

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ классичСский Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° основС Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, этот jquery-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ прост, эффСктивСн ΠΈ выглядит довольно ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ.ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Ρ„ΠΎΠ½ с сСрой ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π² ​​видС Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ Π΄Π΅Ρ€ΠΆΠ°Ρ‚Π΅Π»ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° для Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. Π­Ρ‚ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π½ΠΈΡ… Π°Π½ΠΈΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ, ΠΊΠ°ΠΊ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простой HTML ΠΈ CSS, ΡΡ‚ΠΈΠ»ΡŒ остаСтся эстСтичСски приятным ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΌ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свой собствСнный ΡˆΡ‚Ρ€ΠΈΡ…. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ доступ ΠΊ ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΠΉ структурС кодирования Π½ΠΈΠΆΠ΅ ΠΏΠΎ ссылкС, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ пСрСчислили Π½ΠΈΠΆΠ΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Адаптивный jQuery Accordion

Если Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎΠ± Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ ΠΈ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, это ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΈ довольно инновационная концСпция.Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π² этом спискС сСгодня, это Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. НС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это, Π½ΠΎ ΠΈ со слоТной стороны, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ общая анимация Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‚. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ сСрыС, Π±Π΅Π»Ρ‹Π΅ ΠΈ синиС ΡƒΠ·ΠΎΡ€Ρ‹ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· сСкций, ΡΡ‚ΠΈΠ»ΡŒ соврСмСнный ΠΈ Ρ€Π΅Π·ΠΊΠΈΠΉ. И Ссли Π²Ρ‹ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, Ρ‚ΠΎΠ³Π΄Π° этот ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ jQuery Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ классичСского слайда Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ слайд Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ, ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΉ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² соотвСтствии с Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ.Π”Π²Π° простых Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π²Π½ΠΈΠ·Ρƒ с ΠΎΠ±Π΅ΠΈΡ… сторон для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. МалСнькиС Π΄Π΅Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π½ΠΎΠΌΠ΅Ρ€Π° страниц, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Ρ‚Π΅Π½ΠΈ ΠΈ источники свСта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ творчСски.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

3D АккордСон

Π­Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ интСрСсный ΠΈ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, созданный для ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. И Ссли Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Π±ΠΎΠ»Π΅Π΅ творчСский ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, Ρ‚ΠΎ этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ для вас. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ использовал изобраТСния Π² качСствС Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΌ эффСктС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ.Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° нСбольшая Π΄Π΅Ρ‚Π°Π»ΡŒ, которая Π΄Π΅Π»Π°Π΅Ρ‚ Π²Π΅Ρ‰ΠΈ интСрСсными, — это эффСкт навСдСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Π Π°Π·Π΄Π΅Π»Ρ‹ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Ρ‹ с использованиСм ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ², Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ ΠΈΠΌ ΠΏΠΎΡ‡Ρ‚ΠΈ рСалистичноС ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Π±ΡƒΠΌΠ°Π³ΠΈ. КаТдоС ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ размСщаСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΎΠ΄Π½ΠΎ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌ. Вся структура основана Π½Π° CSS, HTML ΠΈ JS для достиТСния ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°. Для Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ознакомлСния с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ ΠΊΠΎΠ΄Π°ΠΌΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС Π½ΠΈΠΆΠ΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘ΡƒΠΏΠ΅Ρ€ простой Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡΡΡŒ ΠΊ Ρ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΠΌΡƒ ΠΈ Π±ΠΎΠ»Π΅Π΅ чистому, это супСр простой Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ jquery для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π΅Π³ΠΎ ΠΈΡ‰Π΅Ρ‚.Π€ΠΎΠ½ простой, Π½ΠΎ интСрСсный Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈ эффСкт ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ навСдСния. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΡΠ΅ΠΊΡ†ΠΈΡŽ Ρ†Π²Π΅Ρ‚ мСняСтся Π½Π° ярко-красный. Π Π°Π·Π΄Π΅Π» ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° довольно унивСрсалСн, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ любой Ρ‚ΠΈΠΏ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ своСму ТСланию. Π­Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя тСксты, изобраТСния, ссылки ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π·Π΄Π΅Π», Ρ€Π°Π½Π΅Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» возвращаСтся Π² исходноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡ‚ΡŒ мСсто для ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

jQuery Accordion Автор Π­Π½Π΄Ρ€ΡŽ Π₯одТсон

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простоту ΠΈ понятный Π΄ΠΈΠ·Π°ΠΉΠ½, это Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ jquery accordion Π½Π° вашСй сторонС.НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΡΡ‚ΠΈΠ»ΡŒ довольно минималистичСн, это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. ΠŸΠΎΡ‡Π΅ΠΌΡƒ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² стилизован ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½ Π΄ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²Π° для ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ воспроизвСдСния. БСкция Π² Ρ€Π°ΠΌΠΊΠ΅ ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, открывая содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. Π‘ ΠΏΡ€Π°Π²ΠΎΠΉ стороны Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ измСнится Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄ ΠΈΠ»ΠΈ ΠΏΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΎΠ΅ сСчСниС, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€Π½Π΅Ρ‚ всю ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ Π² исходноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… настроСк Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ схСмы ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ просто jQuery Accordion ΠΎΡ‚ Jen

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ интСрСсный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ — это Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ jquery-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° ΠΎΡ‚ Jen.Бохраняя Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ простым ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ, это ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ, ΠΊΠ°ΠΊ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ простоС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠΌ эффСктивным. Π§Π΅Ρ€Π½Ρ‹Π΅ ящики Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π½Π° Π±Π΅Π»ΠΎΠΌ Ρ„ΠΎΠ½Π΅, ΠΈ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ с ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ впСчатляСт. Π”Π°ΠΆΠ΅ тСксты Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ свою Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ отобраТаСтся сам. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML, CSS ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ JQuery, Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ эффСкт. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ ΠΊΠΎΠ΄Ρƒ ΠΏΠΎ ссылкС Π½ΠΈΠΆΠ΅ ΠΈ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ!

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АккордСон Майкла Π₯ΠΎΡ„Ρ„ΠΌΠ°Π½Π°

Π­Ρ‚ΠΎΡ‚ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Майкла Π₯ΠΎΡ„Ρ„ΠΌΠ°Π½Π° — Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ выглядящий ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ, пСрСйдя ΠΏΠΎ ссылкС Π½ΠΈΠΆΠ΅.Для синСго ΠΈ Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ². Однако Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» мСняСт Ρ†Π²Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π° Π±Π΅Π»Ρ‹ΠΉ. Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ простой Π² использовании, это Π±ΠΎΠ»Π΅Π΅ простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ. ВсС ΠΊΠΎΠ΄Ρ‹ чистыС ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ всю структуру. Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° тонкая добавлСнная Π΄Π΅Ρ‚Π°Π»ΡŒ — это ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΎΡ‚ Π±ΠΎΠ»Π΅Π΅ свСтлого Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

CSS JSS ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π’Π΅ΠΏΠ΅Ρ€ΡŒ для Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, это ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°.ΠŸΡ€ΠΎΡΡ‚Π°Ρ Π±Π΅Π»ΠΎ-голубая цвСтовая ΠΏΠ°Π»ΠΈΡ‚Ρ€Π° Π΄Π΅Π»Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ элСгантным ΠΈ простым. Однако ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ выдСляСт Π΅Π³ΠΎ срСди ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π² спискС. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» открываСтся большС возмоТностСй для раскрытия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ Π΄ΠΎ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Π³ΠΎ уровня Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. Π₯отя это просто дСмонстрация, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ для своСго сайта, настраивая Π»ΡŽΠ±Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ Π² соотвСтствии с вашими прСдпочтСниями. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ выполняСт простой эффСкт навСдСния курсора. Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· складных мСню остаСтся Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, сколько ΠΎΠΏΡ†ΠΈΠΉ Π²Ρ‹ раскрываСтС.На наш взгляд, это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Π»ΡŽΠ±Ρ‹Ρ… сайтов ΠΈΠ»ΠΈ страниц с большим количСством тСкста.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠΠ°Ρ…Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

ΠšΡ€Π°ΡΠΎΡ‡Π½Ρ‹ΠΉ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΎ всСх смыслах, это Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ² jquery Π½Π° любой сайт. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Π±Ρ€Π΅Π½Π΄ΠΎΠ², Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Ρ… ΠΈΠ»ΠΈ творчСских Ρ†Π΅Π»Π΅ΠΉ, это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. ΠšΡ‚ΠΎ Π±Ρ‹ ΠΌΠΎΠ³ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ простой Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ Π½Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСсколько Ρ†Π²Π΅Ρ‚ΠΎΠ²? Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ этому, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ тСкста, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ эти Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ ΠΈΠ»ΠΈ ΡΠ΄Π²ΠΈΠ³Π°ΡŽΡ‚ΡΡ Π²Π½ΠΈΠ·, открывая ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML, CSS ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ JS, ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, бСзусловно, стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ jQuery Accordion ΠΎΡ‚ Π’ΠΈΠΊΡ‚ΠΎΡ€Π° Диаса Π΄Π΅ Π›Π΅ΠΎΠ½Π°

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΡΡ‚ΠΈΠ»ΡŒ Π’ΠΈΠΊΡ‚ΠΎΡ€Π° Диаса Π΄Π΅ Π›Π΅ΠΎΠ½Π° ΠΏΠΎΠ΄ простой ΠΈ элСгантной нишСй Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. ΠšΠΎΡ€ΠΎΠ±ΠΊΠΈ, основанныС Π½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ выглядят ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅. Π‘Π΅Ρ€ΠΎΠ²Π°Ρ‚ΠΎ-Π±Π΅Π»Ρ‹ΠΉ Π½Π° красном Ρ„ΠΎΠ½Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сочСтаСтся Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ CSS ΠΈ JS, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² выполняСт ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½Ρ‹Π΅ двиТСния ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹. ВсС Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ стиля, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ схСмы, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ Π΄Π°ΠΆΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹. Однако Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ этот Π΄ΠΈΠ·Π°ΠΉΠ½ своим ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ собствСнныС Π΄Π΅Ρ‚Π°Π»ΠΈ с нСбольшими измСнСниями здСсь ΠΈ Ρ‚Π°ΠΌ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°

ИспользованиС стиля ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ с Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠΌ — Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π½Π° ваш Π²Π΅Π±-сайт. Π­Π»Π΅Π³Π°Π½Ρ‚Π½Ρ‹ΠΉ ΠΈ чистый Π΄ΠΈΠ·Π°ΠΉΠ½, синС-бСлая цвСтовая Π³Π°ΠΌΠΌΠ° Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.Π”ΠΈΠ·Π°ΠΉΠ½ Π² стилС ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Ρ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ Π·Π° счСт эффСкта ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ выдвиТСния, открывая содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ ΠΎΠ±Ρ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ стилизации свСдСны ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅. И Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π² нашСм спискС, здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ простая структура ΠΈΠ· 4 строк, Π° Π½Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ².

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π›Π΅Π³ΠΊΠΈΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ — супСр простой, Π½ΠΎ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ jquery-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΎΡ‚ Расмуса Биля ЛарсСна. ΠšΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ с Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ Π½Π° ΠΆΠ΅Π»Ρ‚ΠΎΠΌ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΈ Ρ€Π΅Ρ‚Ρ€ΠΎ.КаТдая Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° прСдставлСна β€‹β€‹ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ полями, содСрТащими содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. ΠŸΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ содСрТимого прСвращаСтся Π² эффСкт ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ слайда. Π’Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π·Π½Π°Ρ‡ΠΊΠΈ справа Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠ΅Π»ΡŒΡ‡Π°ΠΉΡˆΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ, Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ основан Π½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ каркасС, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ Π΅ΠΌΡƒ Π±ΠΎΠ»Π΅Π΅ рСалистичный Π²ΠΈΠ΄.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Easy CSS jQuery

Если Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ Π²Π°ΠΌ Π½Π΅ подходят, Ρ‚ΠΎ этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для вас.Уникальная концСпция Π² сочСтании с ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ элСмСнтами Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»Π° ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŽ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ внСшний Π²ΠΈΠ΄. КаТдая Π²ΠΊΠ»Π°Π΄ΠΊΠ°-Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠ° различаСтся ΠΏΠΎ Ρ†Π²Π΅Ρ‚Ρƒ, всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ 5 Ρ†Π²Π΅Ρ‚ΠΎΠ². И Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, этот Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π°ΠΊΠ»ΠΎΠ½ Π² сторону Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ двиТСния. Он Π² основном дСйствуСт, скользя Π² ΠΈ ΠΈΠ· поля зрСния Π² зависимости ΠΎΡ‚ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. Когда содСрТимоС раскрываСтся, ΠΎΠ½ΠΎ прСвращаСтся Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ просмотру ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ИспользованиС CSS, HTML ΠΈ JS, хотя это слоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Ρ€Π°Π·Π°, Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АккордСон ΠΈ поиск

Для Π±ΠΎΠ»Π΅Π΅ эффСктивного ΠΈ дСйствСнного использования это объСдинСнная вСрсия ΠΏΠ°Π½Π΅Π»ΠΈ поиска ΠΈ Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠΈ Π² ΠΎΠ΄Π½Ρƒ. Бохраняя вСсь Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ чистым ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ, ΡΡ‚ΠΈΠ»ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ†Π΅Π»Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½. ПанСль поиска помСщаСтся свСрху для облСгчСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ помСщаСтся ΠΏΠΎΠ΄ полосой. Π”Π°ΠΆΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Ρ‚ΠΎΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ, Π° это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. Π Π°Π·Π΄Π΅Π»Ρ‹, прСдставлСнныС полями, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ссылки, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π·Π΄Π΅Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ.ПанСль поиска Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ΠΈ ΠΈΡ‰ΡƒΡ‚.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ JQuery с Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ минималистичноС ΠΈ простоС, Ρ‚ΠΎ это Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своСм сайтС Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ jQuery. Вся конструкция Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ чистая ΠΈ элСгантная. Π‘ рядом ΠΊΠ½ΠΎΠΏΠΎΠΊ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ, это довольно простой Π΄ΠΈΠ·Π°ΠΉΠ½.Π Π°Π·Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для простого скольТСния Π²Π½ΠΈΠ· ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΊΠ°ΠΊ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° катСгория. Кнопки Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π»Π΅Π³ΠΊΠΈΠΉ Π½Π°ΠΌΠ΅ΠΊ Π½Π° эффСкт навСдСния с Π»Π΅Π³ΠΊΠΈΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ Ρ†Π²Π΅Ρ‚Π°. Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ шаблон Ρ‚Π°ΠΊΠΆΠ΅ довольно ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ² ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана устройств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Адаптивный Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π’Π΅ΠΏΠ΅Ρ€ΡŒ это Π±ΠΎΠ»Π΅Π΅ творчСскоС использованиС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° jQuery, которая Π² ΠΈΡ‚ΠΎΠ³Π΅ становится ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтом.ΠžΡΠ½ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ слайдСрС, ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ использовал Π² качСствС основы ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ выглядящиС изобраТСния. На ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд, это, ΠΏΠΎ сути, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ лишь Π±Π΅Π³Π»Ρ‹ΠΉ взгляд Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· Π½ΠΈΡ…. Однако ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора эти слайды Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹Π΅ изобраТСния. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ отличаСтся эффСктом слайда Π² зависимости ΠΎΡ‚ Π΅Π³ΠΎ полоТСния. Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слайда ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ содСрТимоС, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ»ΠΈ описаниС. Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ этот шаблон ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π΅Π½, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π»Π΅Π³ΠΊΠΎ автоматичСски подстраиваСтся ΠΏΠΎΠ΄ любой Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана устройства.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АккордСон Material Design

Как слСдуСт ΠΈΠ· названия, это jQuery-Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠ°, стилизованная ΠΏΠΎΠ΄ простой ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Π—Π΄Π΅ΡΡŒ Π΅ΡΡ‚ΡŒ ΠΈΠ³Ρ€Π° с элСмСнтами, ΠΈ Π΅ΡΡ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ. Он начинаСтся с простого оглавлСния с описаниями ΠΈ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌΠΈ Ρ‚ΠΈΡ‚ΡƒΠ»ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² анимация ΡΠΊΠΎΠ»ΡŒΠ·ΠΈΡ‚ Π²Π½ΠΈΠ·, открывая всю структуру. На ΠΏΠ°Π½Π΅Π»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠΉΡΡ Π·Π½Π°Ρ‡ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ мСняСтся, ΠΊΠΎΠ³Π΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Π° открываСтся ΠΈ сворачиваСтся.Π’ Ρ†Π΅Π»ΠΎΠΌ простой, эффСктивный ΠΈ довольно ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ считаСм, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ. ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ со всСй структурой, пСрСйдя ΠΏΠΎ ссылкС Π²Π½ΠΈΠ·Ρƒ.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

JQuery Accordion ΠΎΡ‚ Elen

Π”Π°Π»Π΅Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ минималистичный ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° jQuery. Π­Ρ‚ΠΎ базовая конструкция с чистым Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ простым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π”Π°ΠΆΠ΅ использованиС Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… схСм свСдСно ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, Π° ΠΎΠ±Ρ‰ΠΈΠΉ Π²ΠΈΠ΄ выглядит ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ.Как ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π»ΡŽΠ±ΡƒΡŽ ΠΈΠ· Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΎΠ½ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ, ΡƒΠ΄ΠΎΠ±Π½ΠΎ располоТСнноС Π² соотвСтствии с вашими потрСбностями. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ основан Π½Π° структурС ΠΊΠΎΠ΄Π° HTML, CSS ΠΈ JS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ шаг ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΏΠΎ своСму вкусу. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ со структурой, пСрСйдя ΠΏΠΎ ссылкС Π½ΠΈΠΆΠ΅. Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° тонкая Π΄Π΅Ρ‚Π°Π»ΡŒ — это плавная ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Π½Π° ваш сайт, это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ списку.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

АккордСон JQuery со стрСлкой

И послСднСС, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠ΅: Ρƒ нас Π΅ΡΡ‚ΡŒ ΡΠΊΡΠΊΠ»ΡŽΠ·ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡ‚ Нико. ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ выглядящий соврСмСнный Π΄ΠΈΠ·Π°ΠΉΠ½ Π² сочСтании с двумя ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°ΠΌΠΈ. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŽ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот творчСский Ρ‚Π°Π»Π°Π½Ρ‚ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· этих Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ смутно ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ своим собствСнным чувством интСрСсного стиля. Оба ΠΎΠ½ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹. ВСрхняя — это простая Π²ΠΊΠ»Π°Π΄ΠΊΠ°-Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠ°, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ отобраТаСтся содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ.Π—Π΄Π΅ΡΡŒ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π½Π° Π·Π½Π°Ρ‡ΠΊΠ΅ стрСлки Π² ΠΏΡ€Π°Π²ΠΎΠΉ части Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. Наряду с этим Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмы ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.

Π”Ρ€ΡƒΠ³ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ здСсь — это Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° ΠΎΠΊΠ½ΠΎ Ρ‡Π°Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с простым Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅. Π—Π΄Π΅ΡΡŒ вмСсто стрСлки Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Ρ‡Π°Ρ‚Π°, ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈΠΌΠ΅Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΡƒΡŽ структуру. Π’Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ ΠΊΠΎΠ΄Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π° своСй страницС.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ / Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

jQuery Accordion

jQuery Accordion

ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΠ΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° Π½Π° Π±Π°Π·Π΅ CSS (Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ jQuery).

Π€ΠΎΡ€ΠΊ Π½Π° Github
ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Paypal

АккордСонная Π³Ρ€ΡƒΠΏΠΏΠ°

(ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ)

АккордСон 1

ΠŸΡ€Π΅Π΄ΠΌΠ΅Ρ‚ 2-Π³ΠΎ уровня

ItemHoodie ennui эстСтика Godard, худоТСствСнная Π²Π΅Ρ‡Π΅Ρ€ΠΈΠ½ΠΊΠ° любого трастового Ρ„ΠΎΠ½Π΄Π° с Ρ‚Π°Ρ‚ΡƒΠΈΡ€ΠΎΠ²ΠΊΠΎΠΉ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ°Ρ€Π±ΡŽΡ€Π°Ρ‚ΠΎΡ€Π° kogi ΠΈΠ· ΠΊΠΎΡ„Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π°Π½Π΄ΠΆΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ происхоТдСния.Поздний Π·Π°Π²Ρ‚Ρ€Π°ΠΊ с ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΌΠΈ ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΌΠΈ сумками с v-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ Π²Ρ‹Ρ€Π΅Π·ΠΎΠΌ, изысканный ΡΡ‚ΠΈΠ»ΡŒ Π² стилС Π’ΠΈΠ»ΡŒΡΠΌΡΠ±ΡƒΡ€Π³ ΠΈΠ· Π²ΠΈΠ½ΠΎΠΊΡƒΡ€Π½ΠΈ Ρ€ΡƒΡ‡Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Усы Π±Π»ΠΎΠ³ ΠΏΡƒΡ‚Π½ΠΈΠΊΠΎΠ² ΠšΠ°Ρ€Π»Π΅ΡΠ°, ΠΊΠΎΡ€ΠΌΠ°, биодизСля, мясника, ΡƒΠ»ΠΈΡ‡Π½ΠΎΠ³ΠΎ искусства. Π₯ΡΡˆΡ‚Π΅Π³ ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΏΠ°Ρ€Ρ‚ΠΈΠΈ Π±ΠΈΡ‚Ρ‚Π΅Ρ€ΠΎΠ² Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ³ΠΎ v Π±Π΅Π· Π³Π»ΡŽΡ‚Π΅Π½Π°. Π‘Π»ΠΎΠ³ мясника ΠΏΠΎ сСмиотикС, ΠΏΠ°Π»Π΅ΠΎ-асиммСтричный мопс Π½Π°Ρ€Π²Π°Π»Π° ΠΈΠ· сСлваТа Π’ΠΈΠ»Ρ‹ РСмСслСнник Уэс АндСрсон посадил Π½Π° Π½Π΅Π³ΠΎ ΠΏΡ‚ΠΈΡ†Ρƒ, ΠΏΡŒΡŽΡ‰ΡƒΡŽ уксус. Artisan McSweeney’s Shoreditch, wolf yr Marfa street art locavore ΠΊΡ€Π°Ρ„Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΏΠΈΠ²ΠΎ, эстСтика Π΄ΠΆΠ΅Π½Ρ‚Ρ€ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ 90-Ρ…. Yr hella fingerstache, Echo Park VHS +1 Ρ†Π΅Ρ€ΠΊΠΎΠ²Π½Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡ XOXO Vice selvage гастропаб, Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ ΠΏΡƒΡ‚Π½ΠΈΠΊΠΈ.ItemItemItemItem
2-ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ

ItemItem3rd Level

3-ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ

ItemItemItem
АккордСон 2

Accordion Group

(нСсколько ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ…)

АккордСон 1

ΠŸΡ€Π΅Π΄ΠΌΠ΅Ρ‚ 2-Π³ΠΎ уровня

ItemHoodie ennui эстСтика Godard, худоТСствСнная Π²Π΅Ρ‡Π΅Ρ€ΠΈΠ½ΠΊΠ° любого трастового Ρ„ΠΎΠ½Π΄Π° с Ρ‚Π°Ρ‚ΡƒΠΈΡ€ΠΎΠ²ΠΊΠΎΠΉ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠ°Ρ€Π±ΡŽΡ€Π°Ρ‚ΠΎΡ€Π° kogi ΠΈΠ· ΠΊΠΎΡ„Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π°Π½Π΄ΠΆΠΎ ΠΎΠ΄Π½ΠΎΠ³ΠΎ происхоТдСния. Поздний Π·Π°Π²Ρ‚Ρ€Π°ΠΊ с ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΌΠΈ ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΌΠΈ сумками с v-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ Π²Ρ‹Ρ€Π΅Π·ΠΎΠΌ, изысканный ΡΡ‚ΠΈΠ»ΡŒ Π² стилС Π’ΠΈΠ»ΡŒΡΠΌΡΠ±ΡƒΡ€Π³ ΠΈΠ· Π²ΠΈΠ½ΠΎΠΊΡƒΡ€Π½ΠΈ Ρ€ΡƒΡ‡Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.Усы Π±Π»ΠΎΠ³ ΠΏΡƒΡ‚Π½ΠΈΠΊΠΎΠ² ΠšΠ°Ρ€Π»Π΅ΡΠ°, ΠΊΠΎΡ€ΠΌΠ°, биодизСля, мясника, ΡƒΠ»ΠΈΡ‡Π½ΠΎΠ³ΠΎ искусства. Π₯ΡΡˆΡ‚Π΅Π³ ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΏΠ°Ρ€Ρ‚ΠΈΠΈ Π±ΠΈΡ‚Ρ‚Π΅Ρ€ΠΎΠ² Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ³ΠΎ v Π±Π΅Π· Π³Π»ΡŽΡ‚Π΅Π½Π°. Π‘Π»ΠΎΠ³ мясника ΠΏΠΎ сСмиотикС, ΠΏΠ°Π»Π΅ΠΎ-асиммСтричный мопс Π½Π°Ρ€Π²Π°Π»Π° ΠΈΠ· сСлваТа Π’ΠΈΠ»Ρ‹ РСмСслСнник Уэс АндСрсон посадил Π½Π° Π½Π΅Π³ΠΎ ΠΏΡ‚ΠΈΡ†Ρƒ, ΠΏΡŒΡŽΡ‰ΡƒΡŽ уксус. Artisan McSweeney’s Shoreditch, wolf yr Marfa street art locavore ΠΊΡ€Π°Ρ„Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΏΠΈΠ²ΠΎ, эстСтика Π΄ΠΆΠ΅Π½Ρ‚Ρ€ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ 90-Ρ…. Yr hella fingerstache, Echo Park VHS +1 Ρ†Π΅Ρ€ΠΊΠΎΠ²Π½Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡ XOXO Vice selvage гастропаб Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ ΠΏΡƒΡ‚Π½ΠΈΠΊΠΈ.
2-ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ

ItemItem3rd Level

3-ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ

ItemItemItem
АккордСон 2

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

(easyInOutQuad, Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 600 мс)

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

ΠžΠΏΡ†ΠΈΠΈ

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Π°Ρ По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π’ΠΈΠΏ ОписаниС
ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° 300 Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² миллисСкундах.
ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½ΠΈΠΊ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ строка Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS для ослаблСния
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ управлСния ‘[data-control]’ строка Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ CSS для элСмСнта, Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ².
contentElement ‘[содСрТимоС-Π΄Π°Π½Π½Ρ‹Π΅]’ строка Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ CSS для элСмСнта, содСрТащСго скрытый / ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.
Π³Ρ€ΡƒΠΏΠΏΠ° Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ‘[Π΄Π°Π½Π½Ρ‹Π΅-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½-Π³Ρ€ΡƒΠΏΠΏΠ°]’ строка Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ CSS для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта, содСрТащСго Π³Ρ€ΡƒΠΏΠΏΡƒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ².
ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€Π°Π²Π΄Π° логичСскоС ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π·Π° Ρ€Π°Π·. Если false, нСсколько Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Β© 2014 Π’ΠΈΠΊΡ‚ΠΎΡ€ ЀСрнандСс / @vctrfrnndz / email / donate

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ локальной ссылкС Π² jQuery Accordion

Π­Ρ‚Π° функция, скорСС всСго, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²Π΅Π±-слуТбами, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½Π° ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Π° для использования Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌΠΈ страниц, Ссли Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ знаниями HTML.Если Π²Π°ΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ HTML-ΠΊΠΎΠ΄ своСй страницы Π² поисках ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΈΠΌΠ΅Π½ классов ΠΈΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² id, Ρ‚ΠΎ Ρƒ вас Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ.

Π­Ρ‚Π° функция позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΎΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ссылку, ссылку, которая Π²Π΅Π΄Π΅Ρ‚ ΠΊ части содСрТимого Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницС, которая находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ встроСнный Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ jquery (синий Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½) Π˜Π›Π˜ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π°Π±Π·Π°Ρ†Π°. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ локальная ссылка ΠΈΠΌΠ΅Π΅Ρ‚ Ρ…Π΅Ρˆ-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½Ρ†Π΅ URL-адрСса, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: www.csn.edu/benefits-retirnement#my-content.Π­Ρ‚Π° ссылка ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ссылаСтся Π½Π° элСмСнт со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id «my-content», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ URL-адрСса, ΠΈΠ΄ΡƒΡ‰Π΅ΠΉ нСпосрСдствСнно послС Π·Π½Π°ΠΊΠ° Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ / Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ.

Однако со свСрнутыми Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°ΠΌΠΈ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ содСрТимоС, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ скрываСт Π΅Π³ΠΎ. Π’ΠΎΡ‚ здСсь ΠΈ вступаСт Π² ΠΈΠ³Ρ€Ρƒ этот малСнький Π΄Ρ€Π°Π³ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ камСнь. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ нСсколько сСлСкторов элСмСнтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‰Π΅Π»Ρ‡ΠΊΠΈ происходили ΠΏΠΎ всСм, ΠΊΡ€ΠΎΠΌΠ΅ послСднСго. Π­Ρ‚ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для открытия Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ² Π΄ΠΎ послСднСго элСмСнта. Достигнув послСднСго элСмСнта, страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΊ элСмСнту, ΠΊΠ°ΠΊ это сдСлала Π±Ρ‹ стандартная локальная ссылка.

Π•ΡΡ‚ΡŒ Π΄Π²Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… способа ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это; с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ id элСмСнтов ΠΈ / ΠΈΠ»ΠΈ с ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ классов элСмСнтов.

ИспользованиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ локальная ссылка для ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, содСрТащСго Ρ†Π΅Π»Π΅Π²ΠΎΠΉ элСмСнт с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ Β«my-contentΒ»:

https://www.csn.edu/benefits-retirement # ui-accordion-jquery-ui-filter-header-2 # my-content

.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π΄Π²ΠΎΠΉΠ½Ρ‹Π΅ Ρ…Π΅Ρˆ-значСния.ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Ρ…Π΅Ρˆ-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ — это ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ элСмСнта Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° (Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Ρ‰Π΅Π»Ρ‡ΠΊΠ°), ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅:

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ…Π΅Ρˆ-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ — это ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ элСмСнта Π² содСрТимом Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½Π½ΡƒΡŽ Π²Ρ‹ΡˆΠ΅ Π»ΠΎΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ссылку (Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ…ΡΡˆΠ°), систСма Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт, Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ ΠΏΠΎ Π½Π΅ΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΈΠ½Π°, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΌ ΠΈ послСднСм элСмСнтС систСма ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π΅Π³ΠΎ Π½Π° страницС. .

ИспользованиС сСлСкторов ΠΈΠΌΠ΅Π½ классов:

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСлСкторы классов для Π²Ρ‹Π±ΠΎΡ€Π° элСмСнтов с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ id, автоматичСски созданными систСмой, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ² ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого.НапримСр, ΠΊΠΎΠ³Π΄Π° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ, ΡƒΠ΄Π°Π»ΡΡŽΡ‚ΡΡ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ id ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ порядка элСмСнтов Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΡΠΏΠΎΡΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΊ этому, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° классов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

https://www.csn.edu/benefits-retirement#.ui-accordion-header[1 provided#my-content

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° сСлСктор послС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ (#) Ρ…ΡΡˆΠ° «.ui-accordion-header [1]». Π­Ρ‚ΠΎ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ сСлСктор ΠΈΠΌΠ΅Π½ΠΈ класса с ΠΏΡ€Π΅Π΄ΡˆΠ΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π΅ΠΌΡƒ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ (ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ систСмС Π½Π° поиск ΠΈΠΌΠ΅Π½ΠΈ класса, Π° Π½Π΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°), Π½ΠΎ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ сСлСктор индСкса [1], ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сообщаСт систСмС: Β«Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт с ΠΈΠΌΠ΅Π½Π΅ΠΌ класса ‘ui-accordion-header’ «.Если Π±Ρ‹ вмСсто этого использовалась Ρ†ΠΈΡ„Ρ€Π° Β«3Β», ΠΎΠ½Π° Π±Ρ‹ Β«Π²Ρ‹Π±Ρ€Π°Π»Π° Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт с ΠΈΠΌΠ΅Π½Π΅ΠΌ класса ‘ui-accordion-header’Β».

Π’ этом случаС элСмСнт Π½Π°ΠΉΠ΄Π΅Π½, автоматичСски Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ, Π·Π°Ρ‚Π΅ΠΌ ΠΎΠ½ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ Ρ…Π΅ΡˆΡƒ сСлСктора ΠΈ повторяСтся, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚ послСдний сСлСктор. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·, сколько Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. ПослСднСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ…Π΅Ρˆ-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»Π° стандартная функция ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ локальной ссылки.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ссли Ρ‚ΠΎΡ‡ΠΊΠ° для сСлСктора ΠΈΠΌΠ΅Π½ΠΈ класса НЕ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ рассматриваСтся ΠΊΠ°ΠΊ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ.

jq-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ — npm

Π­Ρ‚ΠΎ ΠΎΡ‚Π²Π΅Ρ‚Π²Π»Π΅Π½ΠΈΠ΅ jQuery Accordion.

Адаптивный ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ CSS.

JQuery Accordion ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ CSS для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ открытия / закрытия с ΠΎΡ‚ΠΊΠ°Ρ‚ΠΎΠΌ ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ jQuery, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ CSS Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, трСбуСтся нСбольшая конфигурация ΠΈΠ»ΠΈ ΠΊΠΎΠ΄. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π΄Π΅ΠΌΠΎ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ IE9 + ΠΈ соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ Π’ΠΈΠΊΡ‚ΠΎΡ€ΠΎΠΌ ЀСрнандСсом. Под Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ MIT.

Установка

  bower install jq-accordion - ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ
// ΠΈΠ»ΠΈ
npm ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ jq-accordion --save
  

ИспользованиС

  1. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ jQuery:
 

  1. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΏΠ»Π°Π³ΠΈΠ½Π°:
 

  1. Π’Ρ‹Π·ΠΎΠ² ΠΏΠ»Π°Π³ΠΈΠ½Π°:
 

$ ('.Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ '). Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ({

"transitionSpeed": 400

});

ΠžΠΏΡ†ΠΈΠΈ

Имя По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π’ΠΈΠΏ ОписаниС
ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° 300 Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² миллисСкундах.
ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½ΠΈΠΊ Β«Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΒ» строка CSS-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для упрощСния.
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ управлСния '[data-control]' строка Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ CSS для элСмСнта, Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°.
contentElement '[data-content]' строка Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ CSS для элСмСнта, содСрТащСго скрытый / ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.
Π³Ρ€ΡƒΠΏΠΏΠ° Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ '[Π΄Π°Π½Π½Ρ‹Π΅-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½-Π³Ρ€ΡƒΠΏΠΏ]' строка Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ CSS для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта, содСрТащСго Π³Ρ€ΡƒΠΏΠΏΡƒ.
ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€Π°Π²Π΄Π° логичСскоС ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π·Π° Ρ€Π°Π·.

Бобытия

accordion.open срабатываСт, ΠΊΠΎΠ³Π΄Π° открываСтся любой Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

accordion.close срабатываСт, ΠΊΠΎΠ³Π΄Π° любой Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ закрываСтся

accordion.toggle ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ / Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° ΠΏΡ€ΠΈ срабатывании Π½Π° элСмСнтС управлСния. Π­Ρ‚ΠΎ Π½Π΅ сработаСт, Ссли Π·Π°Ρ‚Ρ€ΠΎΠ½Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° ΠΏΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ singleOpen .

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΎΠ±Ρ€Π°Π·Ρ†Π°

Для простого Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° / Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ структуру / Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…:

 

Control

Row

Row

Ряд

Для Π³Ρ€ΡƒΠΏΠΏΡ‹ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data-accordion-group для родитСля, это ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ / Π΄Π΅Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ открытия, установив для singleOpen Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true / false.

 

Control

Π‘Ρ‚Ρ€ΠΎΠΊΠ°

Ряд

Ряд

Control

Row

Row

Row

Запуск Π² ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΌ состоянии

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π² ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΌ состоянии, просто Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ класс .ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π² свой элСмСнт Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°.

 

Control

Ряд

Ряд

Ряд

Π’ΠΊΠ»Π°Π΄

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π”ΠžΠŸΠžΠ›ΠΠ˜Π’Π•Π›Π¬ΠΠž.md для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

ЛицСнзия

ЛицСнзия MIT Β© Nay Zaw Oo

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ складного Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° JQuery | ΠœΠΎΠ±ΠΈΡΠΊΡ€ΠΎΠ»Π»

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ складныС элСмСнты ΠΈ Π³Π°Ρ€ΠΌΠΎΡˆΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Π½Π΅Π»ΠΈ, Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ для сСгмСнтирования Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ для постСпСнного раскрытия ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π Π°Π·Π±ΠΎΡ€Π½Ρ‹Π΅ ΠΈ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½Ρ‹Π΅ дСмонстрации доступны для Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ².

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ дСмонстраций ΠΈ ΠΊΠΎΠ΄Π° для

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ дСмонстрации
Π—Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ

ДСмонстрация складной ΠΏΠ°Π½Π΅Π»ΠΈ JQuery. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ для сСгмСнтирования Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ, дСлая Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΠΎΠ»Π΅ΠΉ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΌΠΈ / сворачиваСмыми. Для jQuery ΠΈΠ»ΠΈ jQuery Mobile.

ДСмонстрация JQuery Accordion с ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ / Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΉ панСлью.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ это, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π·Π° Ρ€Π°Π·. Для jQuery ΠΈΠ»ΠΈ jQuery Mobile.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ складных ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ JQuery. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ / ΡΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС ΠΊΠ°Ρ€Ρ‚Ρ‹. Π Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ ΠΈ сворачиваниС ΠΏΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΏΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ. Для jQuery ΠΈΠ»ΠΈ jQuery Mobile.

Π˜Ρ‰Π΅Ρ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Π΅Π³ΠΎ Π½Π΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΈΠ»ΠΈ Ρƒ вас Π΅ΡΡ‚ΡŒ вопрос ΠΎ ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ΅?
БпроситС нас ΠΎΠ± этом, ΠΌΡ‹ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ.

Бпроси нас ΠΎ Ρ‡Π΅ΠΌ ΡƒΠ³ΠΎΠ΄Π½ΠΎ

НастройтС ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ дСмонстрации локально

Π’ΠΎΠΉΠ΄ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ бСсплатной ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй

Какой Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅?

Javascript

jQuery

AngularJS

Π£Π³Π»ΠΎΠ²ΠΎΠΉ

Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Π”Ρ€ΡƒΠ³ΠΎΠ΅

УстановитС Π΄Π΅ΠΌΠΎ Π² своС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ этому быстрому Π΄Π²ΡƒΡ…ΠΌΠΈΠ½ΡƒΡ‚Π½ΠΎΠΌΡƒ руководству ΠΏΠΎ установкС

Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ

УстановитС Π΄Π΅ΠΌΠΎ Π² своС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ этому быстрому Π΄Π²ΡƒΡ…ΠΌΠΈΠ½ΡƒΡ‚Π½ΠΎΠΌΡƒ руководству ΠΏΠΎ установкС

Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ

НастройтС ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ дСмонстрации локально

Как Π±Ρ‹ Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ?

УстановитС Π΄Π΅ΠΌΠΎ Π² своС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

Π‘Π»Π΅Π΄ΡƒΠΉΡ‚Π΅ этому быстрому Π΄Π²ΡƒΡ…ΠΌΠΈΠ½ΡƒΡ‚Π½ΠΎΠΌΡƒ руководству ΠΏΠΎ установкС

Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ

Бпасибо Π·Π° скачиваниС

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈ настройтС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ локально

РаспакуйтС zip-Ρ„Π°ΠΉΠ» ΠΈ запуститС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΊΠ°ΠΊ любоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ionic.Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ вас установлСн Ionic CLI, ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π» Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ прилоТСния.

Π¨Π°Π³ 1. Запуск Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅

  $ npm ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ  

Π¨Π°Π³ 2. ЗапуститС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

  $ ионная ΠΏΠΎΠ΄Π°Ρ‡Π°  

Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, Ссли ΠΌΡ‹ смоТСм ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅!

Бпасибо Π·Π° скачиваниС

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Π°Ρ настройка дСмонстраций

ВсС настроСно Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ сразу ΠΎΠΊΡƒΠ½ΡƒΡ‚ΡŒΡΡ ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ.

Π˜Π·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ zip-Ρ„Π°ΠΉΠ» ΠΈ просто ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ дСмонстрационныС вСрсии Π² своСм любимом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΠΈ ΠΏΠΎ установкС Mobiscroll Π² свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚
слСдуйтС этому руководству.

Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, Ссли ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅! πŸ‘

Бпасибо Π·Π° скачиваниС

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Π°Ρ настройка дСмонстраций

Π˜Π·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ zip-Ρ„Π°ΠΉΠ» ΠΈ запуститС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΊΠ°ΠΊ любоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Angular CLI.Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ вас установлСн Angular CLI.

Для установки ΠΈ использования распакуйтС zip-Ρ„Π°ΠΉΠ», ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΎΠΊΠ½ΠΎ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π° ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия.

Π¨Π°Π³ 1. Запуск Π² ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅

  $ npm ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ  

Π¨Π°Π³ 2. ЗапуститС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

  $ Π½Π³ ΠΏΠΎΠ΄Π°Ρ‡Π° - ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ  

Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, Ссли ΠΌΡ‹ смоТСм ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅! πŸ‘

Бпасибо Π·Π° скачиваниС

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Π°Ρ настройка дСмонстраций

ВсС настроСно Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ сразу ΠΎΠΊΡƒΠ½ΡƒΡ‚ΡŒΡΡ ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ.

ΠœΡ‹ установили ΠΏΡ€ΠΎΠ±Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ дСмонстрационныС вСрсии локально.

Π‘Π°ΠΌΡ‹ΠΉ простой способ Π½Π°Ρ‡Π°Ρ‚ΡŒ — ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ инструкциям ΠΏΠΎ установкС ΠΈ
ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° прямо с дСмонстрационной страницы. Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, Ссли ΠΌΡ‹ смоТСм ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅! πŸ‘

Π’ zip-Ρ„Π°ΠΉΠ»Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Kitchen-Wink Ionic.

Бпасибо Π·Π° скачиваниС

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Π°Ρ настройка дСмонстраций

Π’ дСмонстрациях ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ встроСнный Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Babel ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ES6 ΠΈ JSX.

Π˜Π·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ zip-Ρ„Π°ΠΉΠ» ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ дСмонстрационныС вСрсии Π² своСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΠΈ ΠΏΠΎ установкС Mobiscroll Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.
слСдуйтС этому руководству.

Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ, Ссли ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅!

НастройтС ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ эту Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ локально

Π’ΠΎΠΉΠ΄ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ бСсплатной ΠΏΡ€ΠΎΠ±Π½ΠΎΠΉ вСрсиСй

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ

НСобходимо ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ? Π’ΠΎΠΉΠ΄ΠΈΡ‚Π΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠ΄

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ

НСобходимо ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ? Π’ΠΎΠΉΠ΄ΠΈΡ‚Π΅ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠ΄

Π’Π°Ρˆ ΠΏΠ°Ρ€ΠΎΠ»ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½!

45+ ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery Accordion Menu с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ДСмонстрация

Анимированная страница ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ², созданная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ GSAP TweenMax, которая ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ произвСсти Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° Π²Π°ΡˆΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².

Foldable — это ΠΏΠΎΠ»Π½Ρ‹ΠΉ стСк jQuery Accordion Π½Π° Π±Π°Π·Π΅ CSS3.

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ с устройствами, с мноТСством ΠΎΠΏΡ†ΠΈΠΉ для настройки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ дСйствия открытия-закрытия с использованиСм встроСнных Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ CSS3 с ΡƒΠΌΠ½Ρ‹ΠΌ автоматичСским ΠΎΡ‚ΠΊΠ°Ρ‚ΠΎΠΌ ΠΊ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ jQuery для старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²

ПанСль Π½Π°Π²Ρ‹ΠΊΠΎΠ² — это соврСмСнный способ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ†Π΅Π½ΠΊΡƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π²Ρ‹ΠΊΠΎΠ² ПанСль являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для отобраТСния Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π•ΡΡ‚ΡŒ нСсколько способов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту панСль Π½Π°Π²Ρ‹ΠΊΠΎΠ² соврСмСнного ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΎΡ†Π΅Π½ΠΊΠΈ.Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ панСль Π½Π°Π²Ρ‹ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery, HTML ΠΈ CSS. Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΡ‚ΡŒΡΡ анимированная полоса прогрСсса с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jquery.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ мСню Π±Π΅Π· jquery ΠΈΠ»ΠΈ javascript. Π”Π°, ΠΌΡ‹ собираСмся ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ мСню Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π° Π²Π΅Π±-сайтС ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² удобствС использования ΠΈ удобствС использования Π²Π΅Π±-сайта. Π‘Π΅Π· мСню навигация ΠΏΠΎ сайту ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π½ΠΎ бСсполСзна.

БСгодняшний рСсурс прСдставляСт собой ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½ΠΎΠ΅ мСню с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏ / ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сСлСктор псСвдокласса : checked Π½Π° элСмСнтах Π²Π²ΠΎΠ΄Π° Ρ„Π»Π°ΠΆΠΊΠΎΠ². Однако ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ Π²Π΅Ρ€ΡΠΈΡŽ с jQuery Π½Π° Ρ‚ΠΎΡ‚ случай, Ссли Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Ρ‚ΠΎΠ½ΠΊΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½Ρ‹ΠΌ эффСктом ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° с ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Π½Π° основС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS3. Он основан Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½Π΅ Minimal Accordion / Drawer с jQuery ΠΈ CSS3, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠΌ alxndrwcz.

«Адаптивный Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Β» — это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊ использованию Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… устройствах.Π­Ρ‚ΠΎ ΠΆΠΈΠ΄ΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прост Π² использовании. Он прСдоставляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ скины, ΠΎΠΏΡ†ΠΈΠΈ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ….

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *