вертикальная навигация, которая показывает скрытое подменю при нажатии с помощью JQuery - PullRequest
Новая
       48

вертикальная навигация, которая показывает скрытое подменю при нажатии с помощью JQuery

1 голос
/ 02 июня 2010

Я пытаюсь создать меню, которое работает так же, как на этом flash-сайте:

http://elevensix.de/

Когда я нажимаю «Портфолио», только тогда ссылки на субнавигацию раскрываются. Прямо сейчас мне удалось заставить работать только типичный вертикальный режим «показывать субнавигатор в меню при наведении».

Требуется, чтобы после выбора соответствующего пункта меню отображалось его подменю. Это подменю остается открытым, так как элементы подменю находятся над выбранными. Когда выбран элемент подменю, отображается содержимое, а меню и подменю остаются видимыми (выбранному пункту меню и подменю выделяется отдельный цвет для отображения пути навигации). Уф.

Вот мой HTML: 

<div id="nav">
<ul>
    <li><a href="#">about</a></li>
    <li><a href="#">testimonials</a>
        <ul>
          <li><a href="#">testimonial1</a></li>
          <li><a href="#">testimonial2</a></li>
          <li><a href="#">testimonial3</a></li>
          <li><a href="#">testimonial4</a></li>
        </ul>
    </li> 
     <li><a href="#">Services</a>
        <ul>
           <li><a href="#">services1</a></li>
           <li><a href="#">services2</a></li>
           <li><a href="#">services3</a></li>
           <li><a href="#">services4</a></li>
       </ul>
    </li> 
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</div><!--end #nav-->

а вот мой css: 

  #nav {
  width:160px;
  position: relative;
  top: 250px;
  left: 20px;
  }

 #nav ul {
 margin:0px; 
 padding:0px; 
 }

#nav ul li {
line-height:24px; 
list-style:none; 
}

#nav a {
text-decoration: none;
color: #9d9fa2;
}

#nav ul li a:hover {
position:relative;
color: #00aeef;
}

#nav ul ul {
display:none; 
position:absolute; 
left:160px; 
top:4px; 
}

#nav ul li:hover ul {
display:block;
color: #00aeef;
}

#nav ul ul li { 
width:160px; 
float:left; 
display:inline; 
line-height:16px; 
}

.selected {
color: #00aeef !important;
}

Должен ли я дать подменю класс, чтобы я мог спрятаться и показать их? И где будет применяться класс? На ул? Могу ли я использовать один и тот же класс для обоих подменю? Я ошибаюсь в том, как я применяю дисплей: нет значений для этой цели?

Большое спасибо всем умным людям здесь.

1 Ответ

1 голос
/ 02 июня 2010

Хотите показать / скрыть подменю, нажав на элемент главного меню, используя JQuery? Если это так, вы должны включить файл jquery.js и скрипт записи, например: 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
        });
        function Reveal(a){
            var ul = a.parentNode.getElementsByTagName("UL").item(0);
            $j(ul).animate({height: 'toggle' ,opacity: 'toggle'}, "slow");
        }
</script>

Затем вы должны вызвать функцию Reveal по ссылке меню: 

<li><a href="#" onclick="Reveal(this);">testimonials</a>

Вы должны исключить правило показа из css для hovered li: 

#nav ul li:hover ul {
/*display:block;*/
color: #00aeef;
}

И я рекомендую использовать правило выделения ссылок: 

#nav ul a{outline:none;}

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

...