Question

我正在寻找导航方面的帮助。我希望有一个水平导航，当悬停在链接上时，子导航将下拉不同的部分（例如左右），2个标题将是水平的，标题下方将有垂直子导航。这对我来说很难解释所以我会附上我创建的图片，以便更好地解释它。

http://i.imgur.com/VYfp14e.png （遗憾的是，我没有足够的声誉将图像直接发布到堆栈溢出。

所以将鼠标悬停在标题1上会下降2个水平标题（副标题1和2）

在subhead1＆amp; 2将是垂直可点击链接，它将用户导航到不同的页面。

（忘了小提琴的链接）。 http://jsfiddle.net/8La4k57q/

 <nav id="nav" role="navigation">
<ul>
    <li>
        <a href="#" aria-haspopup="true">Heading 1</a>
        <ul>
        <a href="#" aria-haspopup="true">subHeading 1</a>
            <li><a href="#">Nav1</a></li>
            <li><a href="#">Nav2</a></li>
            <li><a href="#">Nav3</a></li>
            <li><a href="#">Nav4</a></li>

        <a href="#" aria-haspopup="true">subHeading 2</a>
            <li><a href="#">Nav5</a></li>
            <li><a href="#">Nav6</a></li>
            <li><a href="#">Nav7</a></li>
        </ul>
    </li>
</ul>

#nav > a
{
    display: none;
}
#nav li
{
    position: relative;
}



#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }



#nav li ul
{
    display: none;
    position: absolute;
    top: 100%;
}
    #nav li:hover ul
    {
        display: block;
    }

谢谢

Answer 1

嗯..让我们以标题1为例，这里的id heading1将用于带有标题的div，id内容将用于包含内容的div。

$(document).ready(function(){
$("#heading1").mouseover(function(){
$("#content1").stop().slideDown();
});
$("#heading1").mouseout(function(){
$("#content1").slideUp();
});
});

我引用的内容是您的子标题，您的链接包含在名为content1的div中。如果你发布你的HTML代码，我可以更好地解释。

带垂直导航的水平子标题

1 个答案: