Триггер при наведении на выпадающее меню при загрузке

Question

Триггер при наведении на выпадающее меню при загрузке

0

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

Вот мой HTML на данный момент:

            <ul id="nav">
<li><a href="#">Projects</a>
    <ul>
    </br>
        <li><a href="#">Project 1</a></li>
        <li><a href="#">Project 2</a></li>
        <li><a href="#">Project 3</a></li>
        <li><a href="#">Project 4</a></li>
        </li>
    </ul>
</li>

<li><a href="#">Info</a>
    <ul>
    </br>
        <li><a href="#">Info 1</a></li>
        <li><a href="#">Info 2</a></li>
        <li><a href="#">Info 3</a></li>
        <li><a href="#">Info 4</a></li>
    </ul>
</li>
</ul>

И мой CSS:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
text-align:left;
}

#nav a {
display: block;
text-align:left;
}

#nav li {
float: left;
padding-right:3.5px;
text-align:left;
}

#nav li ul {
position: absolute;
width: 10em;
visibility: hidden;
text-align:left;
}

#nav li:hover ul {
visibility: visible;
text-align:left;

На данный момент выпадающее меню работает отлично, но я хотел бы, чтобы "Projects" выпадало вниз, когда загружалась страница "Project", но для этого она исчезала, когда мышь зависала над "Info", а также произойдет с раскрытием "Инфо" при загрузке страницы "Информация". Любая помощь будет замечательной! благодаря

user2798841 21 янв. 2014, в 17:14

Источник

0

Вам нужно немного jQuery, чтобы добавить класс в выпадающий список, который вы хотите видеть.
otinanai 21 янв. 2014, в 16:04
0

Вы можете использовать CSS для этого.
Vinicius Monteiro 21 янв. 2014, в 16:15

Теги:

html

css

hover

drop-down-menu

menu

2 ответа

Ещё вопросы

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

Tschitsch · Answer 1 · 2014-01-21T15-13-00.000Z

#nav li.current ul {
   visibility: visible;
}

#nav:hover li ul {
    visibility: hidden;
}

#nav li:hover ul {
   visibility: visible;
}

это работает для меня: http://jsfiddle.net/k9bTE/

LorDex · Answer 2 · 2014-01-21T13-43-00.000Z

@otinanai прав

Вот пример:

http://jsfiddle.net/gHe4K/

HTML:

<ul id="nav">
<li class="hovered"><a href="#">Projects</a>
...

CSS:

#nav li ul {
position: absolute;
width: 10em;
visibility: hidden;
text-align:left;
}

#nav li.hovered ul{
visibility: visible;
text-align:left;

JS:

$(document).ready(function() {
    $('ul#nav li').each(function() {
        $(this).on('mouseenter', function(){
            $(this).addClass('hovered');    
        });
        $(this).on('mouseleave', function(){
            $(this).removeClass('hovered');    
        });    
    });
});