Question

我最近在网站上看到了我喜欢的导航效果，但找不到它来检查代码并看看它是如何完成的。有一个标准的菜单栏，宽度为100％，高度为30px，每个链接在其中均匀分布。当您在图库链接上徘徊时，整个菜单栏都会更改，链接将替换为子菜单。没有下拉菜单，整个菜单栏被更改为子菜单项。我无法理清这是如何完成的。任何建议，将不胜感激。这是我正在使用的示例html标记：

<nav>
    <ul class ="menu">
        <li class ="nav__item"><a href="about.html">about</a></li>
        <li class ="nav__item"><a href="galleries.html">galleries</a>
            <ul class="submenu">
                <li class ="nav__subitem"><a href="one.html">one</a></li>
                <li class ="nav__subitem"><a href="two.html">two</a></li>
                <li class ="nav__subitem"><a href="three.html">three</a></li>
                <li class ="nav__subitem"><a href="four.html">four</a></li>
                <li class ="nav__subitem"><a href="five.html">five</a></li>
                <li class ="nav__subitem"><a href="six.html">six</a></li> 
            </ul> <!-- close sub -->
        </li>
        <li class ="nav__item"><a href="blog.html">stories</a></li>
        <li class ="nav__item"><a href="contact.html">contact</a></li>  
        <li class ="nav__item"><a href="thankyou.html">thank you</a></li>     
    </ul>
</nav>

Answer 1

不确定这是否是您要查找的内容，但请查看 fiddle

使用相对定位为导航设置固定高度，并将鼠标悬停在嵌套ul的父目标上，我可以实现此效果。

nav {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #999999;
}
.menu {
    list-style-type:none;
    position: relative;
}
ul {
    padding: 0;
    margin: 0;
}
li.nav__item {
    float:left;
}
li.nav__item a {
    padding: 0 15px;
    line-height:50px;
}
.submenu {
    position:absolute;
    left:15px;
}
.nav__subitem {
    line-height: 50px;
    float: left;
    list-style: outside none none;
}

还有一点点jQuery魔法将它们捆绑在一起。

 $(".has-children").mouseover(function () {
        $(".menu").css("top", "-50px");
    });
    $(".main-navigation").mouseleave(function () {
        $(".menu").css("top", "0px");
    });

将主导航链接替换为悬停时的子菜单链接 - 而不是下拉列表

1 个答案: