Пункт меню Наведите курсор на JavaScript - PullRequest
Новая
       2

Пункт меню Наведите курсор на JavaScript

0 голосов
/ 07 февраля 2012

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

http://jamessuske.com/will/

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

Это мой JavaScript: 

<script type="text/javascript">

function showGalleryNav(){

document.getElementById('headerNavGallery').style.display = "";

}

function showInfoNav(){

document.getElementById('headerNavInfo').style.display = "";

}


function hideGalleryNav(){

document.getElementById('headerNavGallery').style.display = "none";

}

function hideInfoNav(){

document.getElementById('headerNavInfo').style.display = "none";

}

</script>

И HTML 

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a></li>
<li><a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()">Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="#">William Ruppel</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

Я пробовал разные атрибуты, но ни один из них не работает, я также пытался переключиться на jQuery с 

$('#headerNavGallery").css("display", "");

тоже не работал,

Любые идеи будут в значительной степени оценены.

Ответы [ 3 ]

1 голос
/ 07 февраля 2012

На самом деле то, что вы пытаетесь выполнить, выполнимо только css, но не с этой структурой разметки.Сначала вам нужно вложить свои списки. 

<ul class="menu">
<li><a href="#">item 1</a></li>
<li>
  <a href="#">item 2 with sub</a>
  <ul>
    <li><a href="#">sub menu item 1</a></li>
    <li><a href="#">sub menu item 2</a></li>
    ... so on ..
  </ul>
</li>
</ul>

некоторые css 

.menu li {
    position: relative;
}
.menu li ul {
    position: absolute;
    top: 30px; /* the height of the root level item */
    display: none;
}
.menu li li {
    position: static; /* or you could float these for horizontal menu */

}
.menu li:hover ul {
    display: block;
}

Это в значительной степени основы.Но я настоятельно рекомендую вам пойти и изучить меню суперфиш, так как это выпадающее меню jquery, но оно хорошо ухудшается при отключенном js, так что вы можете просто изучить его css.http://users.tpg.com.au/j_birch/plugins/superfish/

0 голосов
/ 07 февраля 2012

1) <a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a>

Вам не нужно указывать javascript:.Это избыточно.

2) Это работает точно так, как вы запрограммировали его для работы.При наведении мыши он исчезает.

3) У вас есть код для "headerNavInfo", но нет соответствующего HTML.

0 голосов
/ 07 февраля 2012

Проверьте это typeo, nvm ... Установка свойства display всегда должна иметь значение none или block, значение empty ("") сбрасывается ... попробуйте следующее: 

<script>
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

</script>

HTML 

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

И CSS 

.headerNav{
     border:thin solid black;
     float:left;
}
.headerNavGallery{
 float:left;
 border:thin solid black;
  margin-left:-1px;
}
...