JQuery и CSS для отображения меню или подсказки

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

Однако после второго уровня он становится менее интуитивным, и поскольку у нас нет событий наведения мыши (и они нам не нужны), пользователю придется щелкать мышью, чтобы открыть любой скрытый контент в левом меню. Итак, что я хотел бы сделать, это дать им визуальную подсказку. Возможно, небольшой значок (например, стрелка вниз?), указывающий на наличие контента ниже этого уровня (если он есть). Я просто не уверен, какой лучший подход к этому. Я думал об использовании Jquery, но мне пришлось бы искать имя класса UL, но отображать значок на предыдущем UL, если он существует. Любые идеи?

Вот структура списка, которая составляет меню для справки. Я сохранил настоящие имена классов.

<ul id="subnav">
    <li class=""><a target="_top" href="../index1.html" class="">Index Page 1</a>
</li>
<li class=""><a target="_top" href="../index2.html" class="">Index Page 2</a>
  <ul class="level2 subnavArrows">
  <li class=""><a target="_top" href="../sub1.html" class=" viewMore">Sub Page 1</a></li>
  <li class=""><a target="_top" href="../sub2.html" class=" viewMore">Sub Page 2</a></li>
  <li class=""><a target="_top" href="../sub3.html" class=" viewMore">Sub Page 3</a>
    <ul class="level3 subnavArrows">
      <li class=""><a target="_top" href="subsub1" class=" viewMore">Sub Sub Page 1</a></li>
      <li class=""><a target="_top" href="subsub2" class=" viewMore">Sub Sub Page 2</a></li>
      <li class=""><a target="_top" href="subsub3" class=" viewMore">Sub Sub Page 3</a></li>
    </ul>
</li>
  <li class=""><a target="_top" href="../sub4.html" class=" viewMore">Sub Page 4</a></li>
  <li class=""><a target="_top" href="../sub5.html" class=" viewMore">Sub Page 5</a></li>
</ul>
</li>
<li class=""><a target="_top" href="../index3.html" class="">Index Page 3</a></li>
</ul>


drop-down-menu jquery css submenu html-lists
person Etherplain    schedule 16.04.2015    source источник
comment
Я сейчас разговариваю по телефону, поэтому не могу опубликовать полный код, но вы можете использовать небольшой трюк CSS, чтобы указать ссылки в элементах уровня 2, которые содержат подменю, и добавить псевдоэлемент, содержащий нужный значок: .level2›li›a : не (: последний ребенок): после   -  person Shaggy    schedule 16.04.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете легко решить это с помощью метода jQuerys has():

$("li").has("ul").css("color","red");

Скрипт: https://jsfiddle.net/z8owpq6p/

person danjah    schedule 16.04.2015
comment
Спасибо даня. Сначала я собираюсь попробовать CSS-решение Shaggy, так как мне удобнее в этой области, чем JS/Jquery, где я могу ориентироваться, но часто спотыкаюсь. Спасибо, что указали на этот метод. Я вижу, как это будет работать, поэтому я вернусь к этому, если решение таблицы стилей не сработает. - person Etherplain; 23.04.2015

arrow_upward
0
arrow_downward

Итак, чтобы дать немного более подробный ответ, чем в моем комментарии, все это вполне возможно с небольшими хитростями, связанными с селекторами CSS.

То, что вы хотите сделать, это выбрать элементы a, которые являются прямыми дочерними элементами li, которые, в свою очередь, являются прямыми дочерними элементами ваших ul элементов с классом level2.

Таким образом, из этого выбора вы хотите настроить таргетинг только на те элементы a, которые не являются единственными дочерними элементами своего родителя li.

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

Вот пример CSS:

.level2>li>a:not(:last-child):after{
    content:"»";
}

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

Чтобы объяснить эти селекторы:

Дочерний селектор > выбирает только те элементы, которые являются непосредственными дочерними элементами родительского элемента. (Дополнительная информация)

Псевдокласс :not() отрицает селектор в своих аргументах. В данном случае a элементов, которые не являются последними дочерними элементами своего родителя. (дополнительная информация)

Я предполагаю, что вы знакомы с :last-child. и :after, но связали их с дополнительной информацией, на всякий случай.

person Shaggy    schedule 16.04.2015
comment
Спасибо Шегги. Я попробую, прежде чем углубляться в решение jquery. - person Etherplain; 23.04.2015
comment
Как ты с этим справился, @Etherplain? - person Shaggy; 24.04.2015