CSS Как скрыть текущие дочерние элементы меню при наведении курсора на родственные элементы родителя без JavaScript - PullRequest
Новая
       26

CSS Как скрыть текущие дочерние элементы меню при наведении курсора на родственные элементы родителя без JavaScript

1 голос
/ 05 марта 2010

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

Child2 - текущая страница: 

parent1  *parent2*   parent3
             |
  child1  *child2*  child3

При наведении курсора на parent1 или parent3 их дочерние элементы отображаются по желанию. Моя проблема в том, что я не могу понять, как скрыть детей parent2, когда отображаются дети других родителей. Есть ли способ CSS для этого? Я знаю, что могу использовать jquery, чтобы скрыть дочерние элементы parent2, когда вы монтируете дочерние элементы parent2 и parent2, но я бы предпочел не использовать javascript для максимального удобства использования.

Вот живой пример

CSS: 

ul.AspNet-Menu 
{
    position: relative;
}

ul.AspNet-Menu, 
ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;
}

ul.AspNet-Menu li
{
    position: static;
    list-style: none;
    float: left;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}
ul.AspNet-Menu ul
{
    visibility: hidden;   
    position: absolute;
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: hidden;
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible;
}

.main-nav2 .AspNet-Menu-Horizontal{
  margin: 0;
  padding: 0;
  font: bold 13px/16px Arial, sans-serif;
  position: absolute;
  top: 21px;
  left: 290px;
}

.main-nav2 ul.AspNet-Menu li {
  display: inline;
}

.main-nav2 ul.AspNet-Menu li a,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink {
  color: #fff;
  background: url(../../nav-bg.gif) no-repeat 0 -24px;
  height: 24px;
  text-decoration: none;
  margin: 0 1px 0 0;
}

.main-nav2 ul.AspNet-Menu li a span,
.main-nav2 ul.AspNet-Menu li span.AspNet-Menu-NonLink span {
  background: url(../../nav-bg-right.gif) no-repeat 100% -24px;
  padding: 4px 12px 4px 12px;
  cursor: pointer;
}

.main-nav2 ul.AspNet-Menu li a:hover,
.main-nav2 ul.AspNet-Menu li a.active {
  background-position: 0 0;
  color: #1b8db3;
}

.main-nav2 ul.AspNet-Menu li a:hover span,
.main-nav2 ul.AspNet-Menu li a.active span {
  background-position: 100% 0;
}

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a
{
  background-position: 0 0;
  color: #1b8db3;
}

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-Selected a span,
.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected a span
{
  background-position: 100% 0;
}

.main-nav2 ul.AspNet-Menu li.AspNet-Menu-ChildSelected ul
{
    visibility: visible;
}

.main-nav2 ul.AspNet-Menu ul{
    width:500px;
}

.main-nav2 ul.AspNet-Menu ul li {
  font: 12px/20px Arial, sans-serif;
  padding: 0 5px 0 0; 
  display: inline;
}

.main-nav2 ul.AspNet-Menu ul li a {
  text-decoration: none;
  color: #1b8db3;
  padding: 0 0 0 12px;
  background-image:none;
}

.main-nav2 ul.AspNet-Menu ul li a:hover {
  text-decoration: underline;
}

HTML: 

<div class="main-nav2" id="ctl00_MainMenu"> 
  <div class="AspNet-Menu-Horizontal"> 
      <ul class="AspNet-Menu"> 
        <li class="AspNet-Menu-Item"> 
          <a href="javascript:return false;#1"> 
            <span> A Menu Option</span></a> 
          <ul> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/A1.aspx"> 
                A1 SubMenu Option</a> 
            </li> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/A2.aspx"> 
                A2 SubMenu Option</a> 
            </li> 
          </ul> 
        </li> 
        <li class="AspNet-Menu-Item"> 
          <a href="javascript:return false;"> 
            <span> B Menu Option</span></a> 
          <ul> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/B1.aspx"> 
                B1 SubMenu Option</a> 
            </li> 
            <li class="AspNet-Menu-Item"> 
              <a href="/CSSMenu/B2.aspx"> 
                B2 SubMenu Option</a> 
            </li> 
          </ul> 
        </li> 
        <li class=" AspNet-Menu-Selected"> 
          <a href="/CSSMenu/C.aspx"> 
            <span> C Menu Option</span></a> 
        </li> 
      </ul> 
  </div> 
</div>

Заранее большое спасибо за любые советы или помощь!

Терри

Ответы [ 5 ]

2 голосов
/ 05 марта 2010

Простое решение - попытка ухудшиться как можно лучше.В этом случае я бы установил цвет фона в дочернем меню и поднимал z-index только при наведении, поэтому bg будет охватывать другие дочерние меню - [edit] они все равно будут видны, но текст не будет перекрываться.Затем используйте javascript, чтобы сделать его так, как вам действительно нужно.

Более сложное решение означает, что вы должны заставить все дочерние меню занимать одинаковое пространство - один из способов - использовать отрицательное поле и затем заполнить его, чтобы закрыть это пространство- и пусть любое дочернее меню, которое отображается, закрывает открытое, опять же большим z-индексом (применяется к родителю при наведении).

edit Еще одна вещь, которую я использую все времяЧтобы справиться с такой ситуацией, нужно сделать что-то вроде следующего: 

ul:hover ul { display:none; } //or in your case, set to invisible
ul li:hover ul { display:block; } //in your case, set to visible

Это означает, что подменю исчезнет, ​​когда UL будет зависать, и, поскольку li: hover ниже в каскаде и более конкретен (Мне обычно приходится иметь дело с множеством имен классов в этом состоянии - не думаю, что вы будете), я должен допустить, чтобы подменю появилось снова.Это не так мелкозернисто, как вы хотите, но почти.

0 голосов
/ 07 ноября 2012

Его можно обойтись без JavaScript. Проверьте ответ на этой странице.

Горизонтальные CSS subnav выдают!

Предоставление более высокого z-индекса дочерним элементам братьев и сестер и меньшее z-index для дочерних элементов активного меню.

0 голосов
/ 05 марта 2010

Я уверен, что вы не сможете достичь этого уровня детального контроля только через CSS.Вам нужно будет изменить состояние элементов DOM с помощью JS.

0 голосов
/ 05 марта 2010

В css нет класса pseudo для запуска эквивалентного события mouse out.Вы должны использовать JavaScript, чтобы выполнить то, что вы пытаетесь сделать.Есть много доступных меню / плагинов, которые делают именно то, что вы делаете (я имею в виду, что нет необходимости заново изобретать колесо).

0 голосов
/ 05 марта 2010

Если вы хотите, чтобы, когда пользователь щелкает выбор дочернего элемента 2, ответ создавал страницу с отображенным child2, но child2 должен исчезать, когда пользователь наводит курсор на parent1 или parent3, вам нужно будет использовать JavaScript. Причина в том, что это событие, которое по-разному влияет на более чем один узел в DOM. CSS влияет только на 1+ узлов в DOM таким же образом, и обычно только при загрузке страницы. Исключением являются псевдоклассы, такие как: hover, которые могут влиять на отображение после загрузки страницы.

Если вам нужно CSS-решение для нескольких меню или вы просто хотите найти хорошее решение, которое поможет вам найти ответ, ознакомьтесь с этим GRC CSS . Я многому научился из этого и взломал это решение, которое использовал много раз.

...