Как сделать так, чтобы этот элемент панели навигации отслеживался с помощью HTML5, CSS3, Javascript / Jquery?

Question

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

1. 1) Подменю начинается с ничего не показанного под ним.

   2) При наведении указателя мыши на один из элементов, например «Элемент 1», отобразятся соответствующие подпункты для элемента 1. При наведении указателя мыши на элемент 2 будут отображены связанные подэлементы, уникальные для элемента 2.

   3) При нажатии на подпункт,заставит его выделиться и остаться там, если пользователь не решит навести курсор мыши на другой элемент и щелкнуть по другому подпункту.

Пример шагов взаимодействия: скажем, пользователь находится на элементе 1 и щелкаетпо подпункту 2. Он остается выделенным, даже если пользователь отключает его от него.

• a) Затем пользователь проводит курсирование по элементу 3 и выбирает подпункт из пункта 3. Предыдущий выделенный подпункт перестает бытьвыделен, и вместо этого выбран новый подпункт.
• b) Пользователь наводит мышью на элемент 3 только для просмотра элементов, указанных в пункте 3, но при наведении курсора на него он возвращается к исходному состоянию вверху с выделенным подпунктом 2 элемента 1.

Каков наилучший способ сделать это и как?Большое спасибо.

Answer 1

Я бы сохранил состояние как определенный класс для элемента / подпункта.

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

Затем вы можете убедиться, что другое меню отображается при наведении курсора на другой элемент, сделав так: подменю hover отображаются поверх .selected.

Возможно, вам придется немного побороться с позициями, но если вы не против иметь абсолютное позиционирование, это не должно быть такой проблемой.

Вот рабочий пример: http://jsfiddle.net/Ct4hM/2/

Answer 2

Может быть, я не очень хорошо понял ... но в чем проблема? Вы можете использовать onClick, onMouseOver, onMouseDown. О механизме - я думаю, что если есть много элементов (в вашем примере есть только 3 элемента и 3 подпункта в каждом (?) Элементе), то вы должны сделать это способом "b)". Но если ситуация такая же, как в вашем примере, это действительно не имеет значения - просто попробуйте и посмотрите - что вам больше нравится)

Answer 3

Простой неупорядоченный список:

<ul id="nav">
    <li>Item 1
        <ul>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
            <li>Subitem 1.3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
            <li>Subitem 2.3</li>
        </ul>
    </li>
    <li>Item 1
        <ul>
            <li>Subitem 3.1</li>
            <li>Subitem 3.2</li>
            <li>Subitem 3.3</li>
        </ul>
    </li>
</ul>

Некоторые CSS для стилизации:

ul {
    display:none;
    width:250px;
}
#nav {
    display:block;
}
li {
    float:left;
    position:relative;
    top:5px;
    background-color:#000;
    width:80px;
    height:25px;
    text-align:center;
    color:#FFF;
    cursor:pointer;
}
#nav>li {
    background-color:#666;
}

Простой JQuery, чтобы заставить его работать:

$('li').mouseenter(function(){
    $(this).children('ul').show();
});

$('li').mouseleave(function(){
    $(this).children('ul').hide();
});

Демонстрация: http://jsfiddle.net/Ct4hM/

Answer 4

Вы можете использовать функции .show() и .hide().

Попробуйте что-то вроде этого:

<ul class="menu">
  <li><a href="#submenu_1">Item 1</a></li>
  <li><a href="#submenu_2">Item 2</a></li>
</ul>

<ul class="submenu" id="submenu_1">
  <li>...</li>
</ul>

<ul class="submenu" id="submenu_2">
  <li>...</li>
</ul>

$(document).ready(function(){
  $(".submenu").hide();

  $(".menu a").click(function(){
    var submenu_todisplay = $(this).attr("href"); 
    $(".submenu").hide();
    $(submenu_todisplay).show();
  });
});

Я не тестировал этот код, но он покажет вам, какНачните.Вы можете использовать .hover() вместо .click() и вам нужно добавить CSS.