• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание скрытой навигационной панели CSS3 (Способ создания групп навигационных списков)
Создание скрытой навигационной панели CSS3
Kosten
Дата: Воскресенье, 2018-06-17, 00:27 | Сообщение 1
Администраторы
Сообщений:18439
Награды: 55


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

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

Так будет смотреться после установке:

1.



2.



Создание HTML-кода

Основная страница html очень проста, и нам не нужно включать какие-либо альтернативные библиотеки. jQuery даже не требуется, если вы не хотите использовать другие плагины.

Код
<div id="gtukolpastun">
<a href="ссылка">Наведи сюда курсор</a>
    <div id="azerdukilparusan">
    Переход на: <a href="ссылка">скрипты сайта</a> -
    <a href="ссылка">Шаблоны портала</a> -
    <a href="ссылка">Стилистика CSS</a> -
    <a href="ссылка">Зжесь юбой запрос</a>
    </div>
  </div>


Теперь, чтобы заставить скрытую панель div расширяться при наведении, нам нужно, чтобы это было вложено в основную панель. Всякий раз, когда пользователь наводит элемент в jQuery, мы можем заставить другой внутренний элемент оставаться открытым с ним. Однако при использовании переходов CSS3 они немедленно создают события наведения и события без зависания. Поэтому, как только пользователь перемещает курсор от верхней панели, он сразу скрывает div, если он не вложен внутри.

CSS

Как правило, у нас есть те же сбрасывания и стили документов, что и другие подобные учебники. Однако есть некоторые обновления элемента #topbar, которые имеют решающее значение для того, чтобы заставить это работать. А именно, нам нужно переполнение: скрытое свойство, чтобы лишний контент не отображался после загрузки страницы.

Вам нужно будет использовать это на своем собственном элементе контейнера, чтобы скрытый div сначала не отображался, затем мы увеличиваем значение высоты через переход.



Вывод:

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

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

Демонстрация
Прикрепления: 6917554.png(1.3 Kb) · 2451345.png(4.6 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создание скрытой навигационной панели CSS3 (Способ создания групп навигационных списков)
  • Страница 1 из 1
  • 1
Поиск: