Как сделать био выпадающий список с помощью CSS

После того, как я выпустил Самая последняя модернизация Theme Lab, У меня было несколько комментариев по поводу поля «био-выпадающий», которое у меня есть на панели навигации. Я закодировал это всего несколькими строками CSS вместе с фоновым изображением.


В этом посте с советами по CSS я расскажу, как можно создать похожий эффект наведения на ваших сайтах..

Пример

В этом примере я буду использовать текстовый виджет в Двадцать одиннадцать тема, новый по умолчанию в WordPress 3.2.

По сути, когда вы наводите курсор мыши на элемент div, содержащий виджет, появится «скрытый» элемент div, который будет нашим выпадающим списком био..

Обратите внимание, что на рисунке слева серый био-бокс не появится, если вы не наведете курсор на элемент div, содержащий заголовок «Bio Hover».

Селектор

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

Несмотря на то, что в случае с Twenty Eleven, мы могли бы обойтись без простой стилизации класса «в стороне», скорее всего, вы все равно хотите, чтобы в одном из ваших div’ов был только выпадающий список с био, поэтому мы более конкретны.

К счастью, с WordPress он выделяет массу уникальных селекторов CSS, которые вы можете использовать. В этом примере он выдает # test-3, который мы будем использовать с этого момента.

Замечания: Это может варьироваться в зависимости от вашей установки WordPress. Используйте что-то вроде Chrome Developer Tools, чтобы легко найти селектор.

HTML-разметка

В этом примере HTML-разметка может быть помещена непосредственно в текстовый виджет WordPress. Это то, что вы вставили:

Леланд!

Привет. Я Леланд Фигель и я создатель и основатель Theme Lab. Я люблю писать код, особенно HTML, CSS и WordPress.

Если вы не хотите украсть мою личность, вы, вероятно, захотите заменить фотографию своей фотографией. Вы также можете при желании удалить его.

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

Био Ховер

Леланд!

Привет. Я Леланд Фигель и я создатель и основатель Theme Lab. Я люблю писать код, особенно HTML, CSS и WordPress.

Если вы делаете это на необработанном HTML-сайте, вам понадобится какая-то обертка (например, в стороне) для раскрывающегося списка биологических данных с чем-то другим, в противном случае нет ничего, что можно было бы навести на раскрывающийся список..

Пример из жизни: Мой био выпадающий div находится внутри тега li в моем меню навигации.

Первые две линии CSS

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

# text-3 {position: относительный; }
.био-выпадающий {дисплей: нет; }

объяснение

  • Первая строка: Мы устанавливаем обертку раскрывающегося списка био, чтобы иметь относительное расположение. Это упрощает позиционирование раскрывающегося списка био ближе к оригинальной упаковке.
  • Вторая линия: По сути, это делает раскрывающийся список био невидимым по умолчанию. Это должно появиться только когда вы наводите курсор на что-то, помните?

Замечания: Если вы не фанат показа: нет; или вы думаете, что это вредит вашему SEO или чему-то еще, вы также можете использовать что-то по позициям: абсолютно; слева: -100000ем; который в основном переместит это так далеко от страницы, никто бы никогда не увидел это.

Остальная часть CSS

Следующий код CSS обрабатывает внешний вид выпадающего списка био.

# text-3: hover .bio-dropdown {
дисплей: блок; z-индекс: 99;
положение: абсолютное; верх: 25 пикселей;
фон: #ccc; отступы: 10px 10px 0 10px;
размер шрифта: 11 пикселей; высота строки: 18 пикселей; цвет: # 666;
}

объяснение

Здесь мы наконец используем селектор # text-3 вместе с псевдоклассом: hover, чтобы раскрывающийся список биографии отображался только при наведении курсора на текстовый виджет..

  • Первая строка: Дисплей: блок; делает выпадающий список био видимым. Z-индекс: 99; гарантирует, что окно будет отображаться поверх всего остального, беспрепятственно.
  • Вторая линия: Это позиционирует поле ниже примерно на 25 пикселей.
  • Третья строка: Это лишь некоторые косметические стили, устанавливающие фон на светло-серый с приличной подкладкой..
  • Четвертая строка: Это все самоочевидная типография.

Замечания: О первой строке, если вы используете позицию: absolute; слева: -100000ем; техника вместо дисплея: нет; как я объяснил выше, использование display: block здесь не понадобится (поскольку div в любом случае уже предполагается, что это элементы уровня блока). Вместо этого вам придется использовать left: 0; переместить div обратно на страницу.

А для изображения просто поплавок и правое поле.

.bio-dropdown .photo {float: left; поле справа: 10 пикселей; }

Интеграция с WordPress

Я не могу придумать хороший способ интегрировать это в динамическое меню WordPress (wp_nav_menu), не отсеивая ничего из дерьма. Самый простой способ может быть жесткий код вашей навигации и преодолеть его (что я делаю на всех своих сайтах).

Если у вас есть какие-либо приемы, как вставить разметку в пункт меню WordPress, который необходим для этого, я хотел бы услышать об этом в комментариях. Я уверен, что это возможно, но это выходит за рамки этой статьи.

Вывод

Да, я понимаю, что вы, вероятно, не захотите размещать раскрывающийся список биографий на боковой панели, вы бы поместили его в место с ограниченным пространством, в котором нет места для его полного отображения (например, тесная панель навигации).

К счастью, вы можете использовать эту технику практически где угодно. Я просто хотел пройти через базовую технику о том, как отображать целый div на hover.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map