2012-08-13 33 views
1

在开始时我一直在寻找如何创建一个巨大的下拉导航,因此我绕过网络研究,并开始意识到定义每个下拉的宽度和位置是最好的。对不起,如果你不明白,但我也找到了js.fiddle。我如何将这两组编码结合在一起形成一个巨大的下拉导航

JS小提琴的下拉导航:http://jsfiddle.net/Pnn6V/9/

但是,我意识到导航上的标题(例如,Home,5列等)并不是均匀分布的,因为它们分布在固定的px中。因此我去研究如何均匀分布标题。然后我发现,实际上通过使用CSS显示:内联文本证明我可以做到这一点。对不起,如果它让你困惑。但我也发现了一个js小提琴。 http://jsfiddle.net/NGLN/dqBNr/3/

我腻在一起,加入跨度标签,也是证明性结合他们,我也改变了显示器内联和inline-block的,但整个事情:

JS捣鼓使用CSS均匀地分布导航弄乱。

我想知道如果有人有什么想法我能做些什么来将这两组编码结合在一起?非常感谢。如果您对我在谈论的内容有任何疑问,请让我知道,以便我可以尝试重述它。谢谢。

+0

没有人可以帮助我:( – Panda 2012-08-15 10:45:47

回答

1

所以标题完全展开,我假设你在谈论你何时改变它们,以至于这些下拉菜单会被奇怪地抵消。由于以下规则,此问题正在形成:

#menu li:hover .dropdown_1column 
{ 
    left:-841px; 
    top:auto; 
} 
#menu li:hover .dropdown_2columns 
{ 
    left:-2px; 
    top:auto; 
} 
#menu li:hover .dropdown_3columns 
{ 
    left:-736px; 
    top:auto; 
} 
#menu li:hover .dropdown_4columns 
{ 
    left:-248px; 
    top:auto; 
} 
#menu li:hover .dropdown_5columns { 
    left:-110px; 
    top:auto; 
} 

有几种方法可以解决此问题。通过使用JavaScript/jQuery附加到onhover事件并将左侧设置到正确的位置(#菜单的左侧)。

另一个更好的方法是使用CSS位置属性来充分利用它。我得到this jsfiddle工作正常。从#menu li

    • 新增position:relative;#menu
    • 删除position:relative;新增position:absolute;.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns
    • 设置上的所有悬停规则left:0px;那曾经有过:我做了如下的变化(如#menu li:hover .dropdown_1column。)特定的像素值。

    这是有效的,因为下拉菜单上的position:absolute;现在将定位到菜单的位置,而不是像之前那样相对于菜单项。

  • +0

    感谢您的解释和解决方案...我的工作,谢谢你这么多 – Panda 2012-09-15 07:21:10

    +0

    嗨...嗯我想知道像头单词“家”,“设计”,“绘画和混合媒体”等...可以使用内联属性均匀分布,如我的第二[js fiddle链接](http://jsfiddle.net/NGLN/dqBNr/3 /) – Panda 2012-09-15 07:32:36

    相关问题