我希望创建一个特定的下拉菜单(包括示例)

Question

我希望了解如何编写类似于下面包含的参考站点的下拉导航栏。他们的解决方案在PC/Mac/iPhone和Android之间完美运行，如果有人可以向我展示相同的内容，那就太棒了。如果您通过PC或Mac查看此站点，请调整浏览器的大小以激活导航的下拉版本。多谢！

http://treadsack.com/

p.s 我是在网上问这些问题的新手，所以如果您需要我更具体，请发表评论，我会回复。

再次感谢！

Answer 1

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

Answer 2

有很多方法可以像这样显示下拉列表，假设这就是您要问的。在这种情况下，观察他们使用浏览器工具做了什么。

在铬中：

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

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

   4.1 当导航关闭时，此div 如下：

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

5. 现在单击导航链接，并单独观察该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

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

通过这种方式，您可以控制不同的样式，使其正确显示