Сейчас актуально ставить скрытые панель, которые скрывают информацию, которая может нести любой характер. Что хотелось одну из многих рассмотреть, которая работает на чистом CSS. Как правило, веб-разработчик используют JavaScript для создания динамических анимации страниц. Скрытые меню и под категорий, это всего лишь пара примеров того, как эти методы будут использоваться на реальном сайте. Благодаря добавлению переходов CSS3 мы теперь можем имитировать эти анимации, без видимости JavaScript.
В этом мануале хочется продемонстрировать, как создать внутреннюю скрытую панель содержимого, которая скользит вниз при зависании. Вы можете поместить это в свой заголовок, нижний колонтитул или даже где-нибудь внутри содержимого страницы. Это очень гибкий метод, который не требует много времени для работы. Кроме того, все современные веб браузеры будут поддерживать эффекты перехода CSS3.
Так будет смотреться после установке:
1.
2.
Создание HTML-кода
Основная страница html очень проста, и нам не нужно включать какие-либо альтернативные библиотеки. jQuery даже не требуется, если вы не хотите использовать другие плагины.
Теперь, чтобы заставить скрытую панель div расширяться при наведении, нам нужно, чтобы это было вложено в основную панель. Всякий раз, когда пользователь наводит элемент в jQuery, мы можем заставить другой внутренний элемент оставаться открытым с ним. Однако при использовании переходов CSS3 они немедленно создают события наведения и события без зависания. Поэтому, как только пользователь перемещает курсор от верхней панели, он сразу скрывает div, если он не вложен внутри.
CSS
Как правило, у нас есть те же сбрасывания и стили документов, что и другие подобные учебники. Однако есть некоторые обновления элемента #topbar, которые имеют решающее значение для того, чтобы заставить это работать. А именно, нам нужно переполнение: скрытое свойство, чтобы лишний контент не отображался после загрузки страницы.
Вам нужно будет использовать это на своем собственном элементе контейнера, чтобы скрытый div сначала не отображался, затем мы увеличиваем значение высоты через переход.
Вы заметите, что этот метод реализует несколько методов CSS, которые являются более новыми для спектра. Однако для типичных сторонних разработчиков сайтов это не слишком сложно. Существуют и другие возможные методы, такие как использование абсолютного позиционирования, вложенного во внешний контейнер.
Наличие обоих разделов рядом друг с другом в HTML иногда может потерять фокус при наведении указателя мыши на скрытый элемент, поэтому лучше держать их вложенными внутри. Не стесняйтесь делиться другими мыслями или вопросами об этом учебном пособии в нижеприведенной области обсуждения.
