Откиньте список по вертикали и горизонтали

Question

У меня есть следующий список, который я хочу, чтобы действовать следующим образом:

• Он должен быть интерактивными, то вертикальный список должен появиться.
• Если вы щелкните элемент в вертикальном списке, он должен появиться горизонтально с информацией об элементе.
• Я хочу, чтобы все элементы были скрыты до тех пор, пока пользователь не нажмет ни тест 1-4, ни подменю Test 1.1 - 1.5.

CSS & HTML:

<style> 
    #navcontainer 
    { 
     margin-left: auto; 
     margin-right: auto; 
     margin-bottom: 40px; 
     border-top: 1px solid #999; 
     z-index: 1; 
    } 

    #navcontainer ul 
    { 
     list-style-type: none; 
     text-align: center; 
     margin-top: -8px; 
     padding: 0; 
     position: relative; 
     z-index: 2; 
    } 

    #navcontainer li 
    { 
     display: inline; 
     text-align: center; 
     margin: 0 5px; 
    } 

    #navcontainer li a 
    { 
     padding: 1px 7px; 
     color: #666; 
     background-color: #fff; 
     border: 1px solid #ccc; 
     text-decoration: none; 
    } 

    #navcontainer li a:hover 
    { 
     color: #000; 
     border: 1px solid #666; 
     border-top: 2px solid #666; 
     border-bottom: 2px solid #666; 
    } 

    #navcontainer li a#current 
    { 
     color: #000; 
     border: 1px solid #666; 
     border-top: 2px solid #666; 
     border-bottom: 2px solid #666; 
    } 
</style> 

<div id="navcontainer"> 
    <ul id="navlist"> 
     <li><a href="#" id="current">Test1</a></li> 
     <li><a href="#">Test2</a></li> 
     <li><a href="#">Test3</a></li> 
     <li><a href="#">Test4</a></li> 
    </ul> 
</div> 

Я пытался заставить его работать с JQuery и "TextShower" - но я просто не могу (я знаю только основные HTML)

Вот образ моей идеи, я надеюсь, что кто-то может понять это и помочь, я уверен, что кодирование довольно простое, я просто не могу заставить его работать :(

Answer 1

Вы можете назначить класс CSS каждой тестовой и тестовой версиям.

/* hide by default */ 
.vertical_nav { 
    display:none; 
} 

/* show */ 
.current { 
    display:block; 
} 

Теперь у вас есть больше вертикального меню, каждый из них имеет класса verical_nav, поэтому они скрыты.

<ul class="vertical_nav" data-test="1"></ul> 
<ul class="vertical_nav" data-test="2"></ul> 
<ul class="vertical_nav" data-test="3"></ul> 

Кроме того, у вас есть все ссылки в горизонтальном меню

<a href="#" class="test" data-test="1">Test 1</a> 
<a href="#" class="test" data-test="2">Test 2</a> 
<a href="#" class="test" data-test="3">Test 3</a> 

дополнительно мы присвоившего data-test attribte, которые помогают нам определить.

Идея состоит в том, чтобы выбрать data-test = 1, если щелкнуть ссылку с data-test = 1.

использование затем JQuery (или чистый JS), чтобы выбрать Verical СЧА

$("a.test").click(function() { 
    var testNumber = $(this).data("data-test"); 
    $(".vertical_nav").removeClass("current"); 
    $(".vertical_nav[data-test=" + testNumber + "]").addClass("current"); 
}); 

то же самое, то вы можете сделать с блоком контента в середине.

я написал маленькую скрипку http://jsfiddle.net/87ypG/