Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Анимированное меню-аккордеон на JS/CSS бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
21.12.2023, 17:16
Анимированное меню-аккордеон на JS/CSS




Данный материал идет как анимированное меню-аккордеон с использованием HTML, CSS и Javascript, точнее вертикальная меню навигации с информацией. Само меню аккордеон использует код HTML, CSS и JavaScript, все это задействовано для корректной работы, а также небольшого эффекта. Сам эффект заключается в том, когда вы открываете одну из категорий, то с небольшой задержкой появляется фон, а за ним уже информация, и все это меньше за 1 секунду происходит

Адаптивное меню-аккордеон имеет дизайн под оригинальные заголовки, где даже присутствуют шрифтовые знаки, виде открыто и закрыто. Когда вы нажмете на один из заголовок, то появляется вся информация, которая полностью связанна с этим заголовком. В тот и заключается данный интерес установить эту навигацию, ведь по умолчанию оно закрыто, а занимает мало место, но при развороте может принести много информации, что бы хватило на полноценную статью. Но по своей конструкции, здесь можно анимированную навигацию установить на главную страницу.

Больше мне встречался такой вид навигации, это как на отдельной страницы, так и прикреплённую к данной статье. Как пример можно взять телефон или машину, и всю характеристику расписать в данном меню, где в заголовке пишем все по данной модели, и все как можно подробнее, дальше к примеру, это сколько стоит, где нажимаем и узнаем. В общем данный функционал можно много где встретить не считая, какая тематика у сайта.

Так реально выглядит материал, после установочного процесса.




Оказывается всё просто, ширину и высоту можно поменять в CSS

Установка:

HTML

Код

<div class="accordionWrapper">
<div class="accordionItem open">
  <h2 class="accordionItemHeading">Здесь пишется заголовок<span>+</span></h2>

  <div class="accordionItemContent">
  <p>Далее идет описание, где можно также картинки выставить.</p>
  <p>Это продолжения описания, сто идет вторым трокой.</p>
  </div>
  </div>

  <div class="accordionItem close">
  <h2 class="accordionItemHeading">Второе название темы<span>+</span></h2>
  <div class="accordionItemContent">
  <p>Аккордеон JavaScript состоит из ряда расширяемых и сворачиваемых элементов.</p>
  <p>Одновременно отображается только один элемент.</p>

  </div>
  </div>

  <div class="accordionItem close">
  <h2 class="accordionItemHeading">Ключевое слово или фраза <span>+</span></h2>
  <div class="accordionItemContent">
  <p>Щелкните по заголовку элемента аккордеона, чтобы развернуть его. Чтобы свернуть элемент, щелкните по нему еще раз или выберите заголовок другого элемента.</p>
  </div>
  </div>
</div>


CSS

Код

.accordionWrapper{
  padding:30px;
  background:#fff;
  float:left;
  width:500px;
  border-radius: 5px;
  box-sizing:border-box;
  margin:30px;
  margin-left:100px;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}

.accordionItem{
  float:left;
  display:block;
  width:100%;
  box-sizing: border-box;
  font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
  cursor:pointer;
  margin:0px 0px 10px 0px;
  padding:10px;
  font-size: 22px;
  font-weight: 400;
  background:#2980b9;
  color:#fff;
  width:100%;

border-radius: 3px;
  box-sizing: border-box;
}
.accordionItemHeading span{
  float: right;
  font-size: 25px;
}
.close .accordionItemContent{
  height:0px;
  transition:height 1s ease-out;

  transform: scaleY(0);
  float:left;
  display:block;

}
.open .accordionItemContent{
  padding: 20px;
  background-color: #f0f1f1;
  border: 1px solid #ddd;
  width: 100%;

  margin: 0px 0px 10px 0px;
  display:block;

  transform: scaleY(1);

  transform-origin: top;

  transition: transform 0.4s ease;
  box-sizing: border-box;
}

.open .accordionItemHeading{
  margin:0px;

  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #073e63;
  color: #cdd7d8;
}


JS

[/code][/code]

Меню «Аккордеон» — это современная структура, которая созданная для контента, где можно в большой объем информации можно аккуратно разместить в одном месте. Этот тип структуры используется на разных типах веб-сайтов.

Этот тип дизайна в основном используется в разделе часто задаваемых вопросов или разделе вопросов-ответов. По умолчанию аккордеон идет с открытым первым разделом, что можно поместить что то важное.

Демонстрация

Скачать
Категория: Скачать Скрипты Ucoz бесплатно бесплатно | Добавил: diamont1977
Просмотров: 28 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    Адаптивный...
    Стили для ...
    Стиль - Кл...
    Кисти для ...
    Стили - Ле...
    Градиенты ...
    Стили для ...