Выпадающее меню пропадает
Спросил Seven,
16 апреля 2017
Вопрос
Seven
Создаю здесь тему впервые. Собственно, опыта о данном ресурсе пока нет. Но изучил местные правила.
2)Выдвижное меню пропадает (пункт Utbildningar), так как соприкасаеться с другим контейнером. Насколько сложно это исправить? Я использовал готовый код меню, понятное дело. Не знаю, насколько большая проблема, может придеться переделывать весь принцип, по которому я делаю этот простейший сайт, так что из-за меню теперь у меня все стоит.
Изменено 16 апреля 2017 пользователем Seven
Ссылка на комментарий
Поделиться на других сайтах
2 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.
Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
Создаем выпадающее меню CSS
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
Форум
Справочник
(решил вынести в отдельную тему)
Есть выпадающее меню, оно находится выше родительского на 30 пикселей (абсолютное позиционирование и «top:-30px;»). И вот, наводим на первую менюшку, «выпадает» вторая, неспеша переводим мышку на вторую, но не успеваем, ибо вторая менюшка пропадает.
Подскажите, как сделать этот процесс более человеческим?
Какую-то паузу в яваскрипт? Или в стилях что-то накрутить?
Похоже решил я баг выставлением padding: 15px 0 30px 0; у дочернего ul 
правда при этом красивая анимация пропала, ну да и хрен с ней, переживем как-нибудь.
Можно решить путём выставления скорости анимации. Т.е. в родительском блоке ставим hover(
function () <
$(«#dmenu»).animate(
$(«#dmenu»).animate(
>,
function () <
$(«#dmenu»).animate(
>);
Вся анимация для одного (дочернего в данном случае) элемента выполняется в одной очереди. Поэтому гаснуть блок начнёт только после того, как провисит 5 секунд. Думаю, что этого достаточно для того, чтобы на него попасть мышкой =) Конечно, надо добавить, что при наведении на дочерний блок opacity будет оставаться единицей. Для этого можно сделать clearQueue при наведении на него или stop(). На Ваш выбор.
Ошибка с выпадающим меню
Спросил Евгений_SB,
29 ноября 2013
Вопрос
Евгений_SB
Ребят есть меню http://jsfiddle.net/ при наведении мыши на пункт выпадающего меню оно пропадает, никак не пойму где ошибка
* <
margin:0px;
padding: 0px;
>
nav <
background: #eee;
margin: 20px;
>
nav ul <
list-style: none;
position: absolute;
nav ul ul <
display: none;
>
nav ul li:hover>ul <
display:block;
width: 110px;
height: 40px;
>
nav ul li <
background: #0086cf;
display: inline-block;
width: 110px;
height: 40px;
margin-top: 10px;
line-height: 40px;
text-align: center;
border-radius: 3px;
border:1px solid #04537f;
>
nav ul li a <
text-decoration: none;
text-transform: uppercase;
font-family: 14px Tahoma;
color: #fff;
>
Ссылка на комментарий
Поделиться на других сайтах
2 ответа на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Узнать, как создать выпадающее меню с помощью CSS.
Выпадающее меню
Создать выпадающее меню
Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.
Шаг 1) Добавить HTML:
Пример
Объяснение примера
Используйте элемент контейнера (например,
Шаг 2) Добавить CSS:
Пример
/* Кнопка выпадающего списка */
.dropbtn <
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>
— необходим для размещения выпадающего содержимого */
.dropdown <
position: relative;
display: inline-block;
>
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Ссылки внутри выпадающего списка */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover
Объяснение примера
Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.
Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.
Селектор :hover используется для отображения выпадающего меню, когда пользователь перемещает курсор мыши на кнопку раскрывающегося списка.
Выпадающий список с выравниванием по правому краю
Пример
Выпадающее меню в навигационной панели
Пример
Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.
Совет: Зайдите на наш учебник Кликабельный выпадающий, чтобы узнать больше о выпадающем кликабельном списке
