我想创建一个特定的下拉菜单（包括示例）

Question

我希望了解如何编码下拉导航栏，类似于下面的参考站点。他们的解决方案在pc / mac / iphone和android之间完美配合，如果有人可以向我展示它，那将是非常棒的。如果您通过PC或Mac查看此站点，请调整浏览器的大小以激活导航的下拉版本。非常感谢！

http://treadsack.com/

p.s我最近在线询问这些问题，所以如果您需要我更具体请发表评论，我会回复。

再次感谢！

Answer 1

只需使用bootstrap，http://getbootstrap.com它已经跨浏览器兼容，并使用该类型的菜单

Answer 2

有很多方法可以显示下拉之类的，假设这就是你所要求的。在这种情况下，请使用浏览器的工具观察他们所做的事情。

在Chrome中：

1. 最小化浏览器，以便您可以看到页面的下拉样式。
2. 点击“NAV”链接查看下拉菜单。
3. 右键单击其中任何一个菜单项，然后单击“检查元素”。

4. 您将在下方看到开发者工具，显示HTML。您会注意到，您要检查的元素是<a>类<li>内<ul>内<div>内的dropdown

   4.1当Nav关闭时，此div如下所示：

       <div class="dropdown" id="nav-dropdown" style="display: none;">
            <!-- bunch of ul, li elements follow here -->
       </div>
   

5. 现在点击Nav链接，然后单独观察div的HTML变化。你会注意到它如下：

       <div class="dropdown" id="nav-dropdown" style="display: block;">
            <!-- bunch of ul, li elements follow here -->
       </div>
   

他们刚刚更改了div的display属性，从none更改为block，实现了所有这些菜单项。

可以使用jquery完成，如下所示：

 $( "#nav-trigger" ).click(function() {
       $('#dropdown').css("display", "block");
 });

nav-trigger是NAV元素的ID。

<强>更新

HTML的结构如下：

<div class="main-container">
   <span class="navigation" id="nav-trigger"/>
   <div class="dropdown" display="none">
         <!-- menu items as <ul><li> here -->
   </div>
</div>

这是主要结构（名称已更改）。最初，只有<span>元素可见。单击此span元素后，将显示其下方的div。所以我们将点击处理程序与jQuery中的span元素相关联，如上所示。这就是他们“联系”的方式

动画：

同样，有很多方法可以做到这一点。您可以在项目中直接使用jQuery插件（最简单）。或者，您可以使用jQuery.slideDown()和jQuery.slideUp()向下或向上切换菜单项。链接：slideUp()和slideDown()

你会注意到动画有一个序列。并非所有菜单项都会立即被删除。

    $( "#nav-trigger" ).click(function() {
       var menuitems = $("#dropdown").children(); //since the items are hierarchically , children of the dropdown div.

       for(var i=0; i<6; i++){
            menuitems.eq(i).slideDown(200);   //200 is the speed.
       }
    });        

这是一个非常粗略的代码，但它给你的图片。希望有所帮助。

Answer 3

基本上，您可以通过使用百分比而不是设置宽度和高度来使网站移动设备友好...通常开发人员将根据设备分辨率制作单独的样式表...因此，在不同的分辨率下，内容将相应地缩放。 请参阅此example

这样您就可以控制不同的样式，以便正确显示