使用下拉列表框導航展開div和背景

我有一個位於頁面頂部的菜單。 div的背景是黑色的，有50％的不透明度。當你將鼠標懸停在列表上時，它會觸發一個下拉菜單。子菜單是由一個懸停功能，淡入它運行。我想擴大div的背景，當子菜單出現，使其下滑與子菜單，我知道我可以給子菜單背景，但我希望div的背景擴大，以便填充頁面，達到子菜單佔用的數量，但在離開懸停後返回。使用下拉列表框導航展開div和背景

這是我的子菜單懸停功能。我認爲可以添加一些東西來改變div的樣式。

$('.nav li, .subTopMenu li').hover(
    // When mouse enters the .navigation element 
    function() { 
     //Fade in the navigation submenu 
     $('ul', this).fadeIn();  // fadeIn will show the sub cat menu 
    }, 
    // When mouse leaves the .navigation element 
    function() { 
     //Fade out the navigation submenu 
     $('ul', this).fadeOut();  // fadeOut will hide the sub cat menu 
    } 

);

div和list是html的樣子;

<div class="topMenu"> 
<a href="#"><img  src="images/logo-small.png"></a> 
<ul class="subTopMenu"> 
<li class="noHover"><a href="#">Link1</a> 
<ul> 
<li><a href="#" id="navclick" data-iclick="tAbout">ABOUT US</a></li> 
<li><a href="#" id="navclick" data-iclick="tHistory" data-bgsrc="images/history.jpg">HISTORY</a></li> 
<li><a href="#">OUR BOARD</a></li> 
<li><a href="#">CONTRIBUTE</a></li> 
</ul> 
</li> 
<li class="noHover"><a href="#">Link2</a> 
<ul> 
<li><a href="#">SHOP</a></li> 
<li><a href="#">EAT</a></li> 
<li><a href="#">DRINK</a></li> 
<li><a href="#">JOIN</a></li> 
</ul> 
</li> 
<li class="noHover"><a href="#">Link3</a> 
<ul> 
<li><a href="#">MUSIC</a></li> 
<li><a href="#">ART</a></li> 
<li><a href="#">FESTIVALS</a></li> 
<li><a href="#">LECTURES</a></li> 
</ul> 
</li> 
<li class="noHover"><a href="#">Link4</a> 
<ul> 
<li><a href="#">WHEN & WHERE</a></li> 
<li><a href="#">REGISTER</a></li> 
<li><a href="#">VOLUNTEER</a></li> 
<li><a href="#">SPONSOR</a></li> 
<li><a href="#">GALLERY</a></li> 
</ul> 
</li> 
</ul> 
</div>

div的樣式在css中;

.topMenu 
{ 
display:none; 
top:0px; 
position:relative; 
padding:10px; 
background-color:rgba(0,0,0,0.5); 
text-align:center; 
} 
.topMenu li 
{ 
display:inline; 
position:relative; 
text-align:center; 
}

我想是這樣的使用jQueryUI的效果來調整DIV，但它似乎並沒有削減它。格創造了高度，但它始終在兩個高度之間來回移動。

$('.noHover').mouseover(
    function() { 
     //Increase the size of the topMenu div 
      $('.topMenu').animate({height: '200'},'slow'); 
      }); 
    $('.subTopMenu').mouseout(
      function(){ 
        $('.topMenu').animate({height: '90'},'slow'); 
      }); 
     $('.nav li, .subTopMenu li').hover(
    // When mouse enters the .navigation element 
    function() { 
     //Fade in the navigation submenu 
     $('ul', this).fadeIn();  // fadeIn will show the sub cat menu 
      }, 
    // When mouse leaves the .navigation element 
    function() { 
     //Fade out the navigation submenu 
     $('ul', this).fadeOut();  // fadeOut will hide the sub cat menu 
        } 

);

來源

2014-03-28 dimmlight

我已經找到了解決辦法，不正是我想要的，因爲我是希望有一個很好的緩解或動態的幻燈片，但這

$('.noHover').mouseover(
function() { 
    var navht = $(this).attr('data-navht'); 
    //Increase the size of the topMenu div 
     $('.topMenu').css('height', navht); 
     }); 
$('.subTopMenu').mouseout(
function(){ 
    $('.topMenu').css("height", "90px"); 
});

我還添加數據 - 的屬性的伎倆navht所以我可以根據子菜單中的子項總數設置高度，以便div延伸到底部。

來源

2014-03-29 01:25:36 dimmlight

使用下拉列表框導航展開div和背景

回答

相關問題