Навигация подменю на одну страницу веб-сайта

Question

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

Я нашел пример: http://inthe7heaven.com/fb-john-doe/dark/

В разделе фото. Я попытался воспроизвести это, но я думаю, что подменю подключено к функции фильтрации фотогалереи.

Может ли кто-нибудь дать мне некоторое руководство в этом вопросе?

HTML

<nav class="on_caption"> 
    <ul class="pagination"> 
     <li class="home current"><a href="#0">Home</a></li> 
     <li class=""><a href="#1">About EJ</a></li> 
     <li class=""><a href="#2">Services</a></li> 
     <li class="photos"> 
      <a href="#3">Photos</a> 
     <div id="filter" class="category_filter_list"> 
      <span class="active_link" id="all">All</span> 
      <span id="cookies">Cookies</span> 
      <span id="bread">Bread</span> 
      <span id="baking">Baking</span> 
     </div> 
     </li> 
     <li class=""><a href="#4">Classes</a></li> 
     <!--<li class=""><a href="#5">Testimonials</a></li>--> 
     <li class=""><a href="#6">Contact</a></li> 
    </ul> 
</nav> 

CSS

nav { 
     position: absolute; 
     z-index: 999; 
     right: 0; 
     top: 0; 
     width: 158px; 
     height: 600px; 
     display: block; 
     overflow: hidden; 
     behavior: url(js/PIE.htc); 
    } 

    nav.on_caption { 
     background: rgba(20,11,19,.6); 
     -pie-background: rgba(20,11,19,.6); 
    } 

nav.on_caption a { 
     color: #d0ced0; 
    } 

    nav.off_caption { 
     background: rgba(20,11,19,.08); 
     -pie-background: rgba(20,11,19,.08); 
    } 

    nav.off_caption a { 
     color: #524b51; 
    } 

    nav a { 
     font-size: 1.143em; 
     text-transform: uppercase; 
    } 

nav > a { 
     padding-left: 24px; 
    } 

    ul.pagination { 
     margin: 0; 
     padding: 0; 
     padding-bottom: 8px; 
     list-style:none; 
    } 

    ul.pagination li { 
     margin: 0px 0px 0px 0px; 
     clear: both; 
     padding: 8px 10px 0px 24px; 
     list-style: none; 
    } 

ul.pagination li:first-child { 
     padding-top: 25px; 
    } 

    nav > a:hover, 
    nav ul.pagination li a:hover, 
    nav ul.pagination li.current a { 
     color: #90705B; 
    } 

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

Answer 1

Google "scrollto jquery"

здесь просто один

http://flesler.blogspot.in/2007/10/jqueryscrollto.html

Answer 2

мне удалось получить подменю свернуть или развернуть в jsfiddle с помощью древовидного меню. Я тестировал его в jsfiddle и там он работает. Однако на моем сайте он не работает. Меню не расширяется. Веб-сайт, на котором я его использую, - это веб-сайт с одной страницей. Таким образом, пункты меню указывают на раздел на странице. Итак, я думаю, что мой href = "sub-1" не работает, потому что он указывает на 3-й раздел страницы.

Есть ли простой обход для этого? Мне не нужны какие-либо причудливые эффекты jquery, это просто нужно открыть.

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

HTML

<nav class="on_caption"> 
    <ul class="pagination"> 
     <li class="home current"><a href="#0">Home</a></li> 
     <li class=""><a href="#1">About EJ</a></li> 
     <li class=""><a href="#sub-1">Services</a> 
      <ul id="sub-1"> 
       <li class=""><a href="#">Test</a></li> 
       <li class=""><a href="#">Test</a></li> 
      </ul> 
     </li> 
     <li class=""><a href="#3">Photos</a></li> 
     <li class=""><a href="#4">Classes</a></li> 
     <li class=""><a href="#6">Contact</a></li> 
    </ul>     
</nav> 

CSS

.pagination > li ul { 
    display: none; 
} 

.pagination > li ul:target { 
    display: block; 
} 

Answer 3

достигнут некоторый прогресс.

HTML

<nav class="on_caption"> 
    <ul class="pagination"> 
     <li class="home current"><a href="#0">Home</a></li> 
     <li class=""><a href="#1">About EJ</a></li> 
     <li class=""><a href="#sub-1">Services</a> 
      <ul id="sub-1"> 
       <li class=""><a href="#">Test</a></li> 
       <li class=""><a href="#">Test</a></li> 
      </ul> 
     </li> 
     <li class=""><a href="#3">Photos</a></li> 
     <li class=""><a href="#4">Classes</a></li> 
     <li class=""><a href="#6">Contact</a></li> 
    </ul>     
</nav> 

CSS

.pagination > li ul { 
    display: none; 
} 

JQuery

jQuery(
    function($) 
    { 
    $('.pagination a').click(function(){$(this).next('ul').toggle();}); 
    } 
); 

Это работает сейчас. Когда я нажимаю элемент меню, подменю тратится.Однако, как я могу позволить подменю снова свернуть при нажатии другого элемента меню? И как я могу позволить странице автоматически перейти к первому элементу подменю по умолчанию при щелчке пункта меню?