Question

我正在努力想出一个创造性的方法来使用固定的标题导航菜单，并且遇到了一个对我来说非常适合的网站： http://ishothim.com/

有没有人对如何模仿这个菜单有一些了解？主要是悬停时滑出菜单的按钮。我想我会像这样离开它而不是像这个站点那样向下滚动时出现一个完整的菜单。

Answer 1

最好的办法是查看他们的代码，并了解他们的所作所为。

在Chrome DevTools中，右键单击 - ＆gt;检查元素。当您将鼠标悬停在锚点上时，您会看到类menu-open已添加到nav。接下来，单击DevTools中的“Resources选项卡”，然后搜索menu-open。您将看到ishothim.js中有3次出现，style.css中有1次出现。

enter image description here

现在，您可以查看他们已经完成的工作并使用它来定制自己的工作。

Answer 2

好的，这就是我最终做的事情：

<强> HTML：

<div id="menuIcon" class="icon active"></div>
<div class="menu">
<ul>
<li><a href="home" class="active">Home</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Last Page</a></li>
</ul>   
</div>

<强> CSS：

    nav{
    position:fixed;
    display:inline-block; 
    vertical-align:middle;
    right:40px;
    top:40px;
    padding:4px;
    height:40px;
    width: 40px;
    z-index:9999;
    overflow:hidden;

    text-align: right;
    font-family: 'Londrina Solid', cursive; font-weight: 400;

    background-color:rgba(255,255,255,1.0);
    border-radius: 50px;
    box-shadow: 1px 1px 1px #369;
}

nav .icon{
    position:absolute;
    right:4px;
    background: #FFF url("images/navigation/cog.png") center center no-repeat;
    display:block;
    width: 40px;
    height: 40px;
    cursor:pointer;
    z-index: 9999;
}
nav .menu{
    right:10px;
    position:absolute;
    width: 550px;
    overflow: hidden;
    z-index: 8888;
}
nav ul{
    list-style: none;
    padding:0;
    margin:0 40px;
}
nav ul li{
    float: left;
    margin: 7px 0;
    padding:0 20px;
    font-size: 18px;
}
nav ul li:first-child{
    padding-left:0; 
}
nav ul li:last-child{
    padding-right:0;    
}

<强>的JavaScript

    $("#menuIcon").live('click', function() {
        if($(this).hasClass('active')){
            $(this).transition({ rotate: '180deg' },1000,'ease').removeClass('active');
            $("nav").transition({width:'40px'},1000,'ease');
            return; 
        }
        $(this).transition({ rotate: '-180deg' },1000,'ease').addClass('active');
        $("nav").transition({width:'525px'},1000,'ease');
    });

jQuery / CSS - 滑出菜单（固定标题）

2 个答案: