最佳下拉导航方法

-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

最佳下拉导航方法

回答

相关问题