Помощь с JQuery в меню - PullRequest
Новая
       33

Помощь с JQuery в меню

0 голосов
/ 07 января 2011

Эй, я пытаюсь создать меню со встроенным списком, который при наведении курсора будет скользить вниз по вторичным спискам или исчезать в списках. Пока все работает, мне просто нужна помощь с JQuery для эффектов.мой HTML: 

<div id="nav">
    <ul>
      <li>
        <h2>YEKTY</h2>
        <ul>
          <li>HOME</li>          
          <li>ABOUT US</li>          
          <li>WHO ARE WE?</li>
          </ul>
      </li>
    </ul>
    <ul>
      <li>
        <h2>LINKS</h2>
        <ul>
          <li>YTU</li>
          <li>IPICCO ME</li>
        </ul>
      </li>
    </ul>
    <ul>
      <li>
        <h1>INFO</h1>
        <ul>
          <li>CONTACT</li>
        </ul>
      </li>
    </ul>
    </li>
    </ul>
  </div>

и CSS: 

/******NAVIGATION******/
div#nav {
 width: 100%;
 background: transparent;
 float: left;
 text-align:center;
}

#nav ul {
 list-style: none;
 margin: 0;
 width:100px;
 padding: 0px;
 float: left;
 cursor:pointer;
}
#nav ul h1 {
 width:112px;
}
#nav a, #nav h2, #nav h1 {
 font: bold 11px/16px arial, helvetica, sans-serif;
 display: block;
 margin: 0;
}
#nav h2 {
 color: #fff;
 background: #000 url(images/nav_bg_flip.png);
 text-transform: uppercase;
}
#nav h1 {
 color: #fff;
 background:#000 url(images/nav_bg_flip.png);
 text-transform: uppercase;
 -moz-border-radius: 0 0 90px 0;
 -webkit-border-radius: 0 0 90px 0;
 border-radius: 0 0 90px 0;
}
#nav a {
 color: #fff;
 background: #000;
 text-decoration: none;
}
#nav a:hover {
 color: #fff;
 background: #a9a9a9;
}
#nav h2:hover {
 color:#fff;
 opacity:0.7;
}
#nav h1:hover {
 color:#fff;
 opacity:0.7;
}
#nav li {
 position: relative;
}
#nav li li a {
 opacity:0.7;
}
#nav li li a:hover {
 opacity:0.9;
 background:#464646;
}
#nav ul ul {
 position: absolute;
}
div#nav ul ul, div#nav ul li:hover ul ul{
 display: none;
}
div#nav ul li:hover ul{
 display: block;
}
/******END NAVIGATION******/

Мне не нужна помощь с CSS или HTML только эффекты, есть ссылки внутри элементов <li>хотя я не могу опубликовать так много.Спасибо!

1 Ответ

0 голосов
/ 07 января 2011

Что-то вроде: 

$('#nav ul h2').hover(function() {
    $(this).nextAll('ul:first').slideDown();
}, function() {
    $(this).nextAll('ul:first').slideUp();
});

Предполагая, что вы хотите, чтобы ul отображались при наведении курсора на h2;

Документация для функции наведения здесь: http://api.jquery.com/hover/

Редактировать: Я также хотел попробовать это, но jsfiddle, кажется, не работает или недоступен с того места, где я нахожусь Я надеюсь, что это сработает для вас, и я попробую, когда смогу.

РЕДАКТИРОВАТЬ: как предлагается в комментариях, это может работать лучше: 

$('#nav>ul>li').hover(function() {
    $('ul:first', this).slideDown();
}, function() {
    $('ul:first', this).slideUp();
});
...