最佳下拉導航方法

-1

我現在有這個導航條，從CSS和HTML製作，大多是inline-block的元素：最佳下拉導航方法

NAVIGATION BAR

我想實現的是因爲這個導航菜單相同的影響on SOUNDCLOUD

如果在導航中單擊n項後菜單下降，顯然會爲您提供更多選項並增加導航空間。這是我希望達到的狀態：

SOUNDCLOUD MENU

，因爲我已經得到了基本的HTML CSS &，這將是在功能方面的下一個最好的一步。

任何人都知道任何類似的JQuery，可以容納這種類型的交互？

在此先感謝。

克里斯

來源

2013-03-25 cwiggo

你可以發佈你的HTML嗎？聽起來你需要jQuery的'.slideToggle（）;'[.slideToggle（） - jQuery API文檔]（http://api.jquery.com/slideToggle/） – Bill 2013-03-25 17:49:11

爲什麼要downvote？請自我解釋！ – cwiggo 2013-03-25 18:38:18

你不應該需要任何太花哨。基本的jQuery將做到這一點。看看這個jsfiddle example

這裏的基本思想：即動畫另一個DIV成可視性可點擊的鏈接 - 只是在你的HTML/CSS佈局，DIV是點擊的元素上面：

$(document).ready(function() { 
    $('#reveal').click(function() { 
     $('#hidden').slideToggle(); 
    }); 
});

來源

2013-03-25 17:50:41 magi182

即使你沒有提供任何HTML，我做了一些例如：

<div id="dropdown" style="display:none;"> 
<!-- slideToggle() finishes with display:none when hiding an element. specifying display:none beforehand simply makes it so that the element is hidden when the page loads. --> 

    <!--Content here--> 
</div> 

<div class="navigationbar"> 
    <div class="button" id="more"></div> 
<div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#more').click(function(){ 
      $('#dropdown').slideToggle(); 
     }); 
    }); 
</script>

希望這有助於！

來源

2013-03-25 17:54:58 Bill

最佳下拉導航方法

回答

相關問題