2013-02-19 136 views
-1

所以我一直在寻找一段时间,找不到答案。水平导航扩展SubNav

我正在做的是有一个4左右的导航主导航主题。点击每个主题将在与该主题相关的subnav项目列表下方展开(即,单击“硬件”并显示所有硬件子主题)。

的想法是类似于你会看到点击“显示”上thecomedynetwork.ca

我也希望,当他们点击其他主要资产净值,该subnav将关闭和打开新subnav(即'硬件'将关闭,'软件'将打开)。

对不起,如果我是非常模糊的,我会张贴代码,但我实际上报废了我想要的一切。

更新: 所以只是当我想我已经钉住了它,我不能让这个东西正常执行。该的jsfiddle正显示出它的工作我怎么需要它(减去喜欢宽松明显抛光):http://jsfiddle.net/HGTKZ/1/

var divs = $('#nav div'), 
links = $('a'); 

links.click(function() { 
$(this.hash).toggle().siblings().hide(); 
return false; 
}); 

但当公布这个事情是行不通的: http://agiile.com/testing6.html

我已经jQuery的链接(1.9 .1分钟来自Google API),而且我没有语法错误...但这个看似简单的代码不会运行!另外,如果任何人有一个改善我的html的建议,而不是使用#software,#hardware等,那真是太棒了。 javascript:void(0)会更可取,但我无法想象如何在这种情况下使其工作。

感谢您一路上的帮助!

回答

1

您应该在Google之前搜索过Google。

无论如何,搜索“CSS导航”栏。你会发现很多例子。他们会做的。

好吧,那么你就可以建立像它最初使用的CSS

  1. 隐藏菜单

    。菜单{ 显示:无; }

  2. 设置事件处理程序切换+为子菜单显示设置动画效果。

  3. 对那个slideDown Animation使用Jquery。

+0

绝对保证我在找到我需要的东西时做得很糟糕。 我认为我遇到的最大问题是让subnav在导航栏下面占满全宽。 像,我可以得到一个CSS导航栏,但它是在下面的全宽subnav扩展正在赶上我。 – Spencer 2013-02-19 08:16:32

+0

@SpencerFord更好吗? – 2013-02-19 08:20:54

+0

你绝对帮我找到了我需要研究的东西。感谢芽! 当我发现我比我目前想象的更迷路时,我会报告回来! 谢谢Siddharth – Spencer 2013-02-19 08:25:13

0

确实。如果谷歌的“jQuery的下拉菜单”或“的Javascript下拉菜单”,你会发现这样的事情:

http://css-tricks.com/simple-jquery-dropdowns/

这将有助于我猜;)

+0

感谢您承担我纯粹的模糊性! 我已经能够让这些工作之前,我只是想尝试一些我没有做过的全宽下拉菜单保持打开状态。 – Spencer 2013-02-19 08:41:43

0

至于问题,我的更新去工作在jsfiddle.net,运行后从jsfiddle.net/draft取得代码似乎已修复!

不完全确定代码出现错误的地方,但它现在正在工作。多谢你们!