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

Question

我试图提出一种使用固定标题导航菜单的创新方法，并且遇到了一个网站，该网站对我来说非常合适： http : //ishothim.com/

是否有人对如何模仿此菜单有一些见识？ 通常，只需将鼠标悬停在滑出菜单上的按钮即可。 我想我只会像这样离开它，而不是像本网站一样向下滚动时会显示完整的菜单。

Answer 1

最好的选择是查看他们的代码，并从他们的工作中学习。

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

现在，您可以查看他们所做的事情，并使用它来定制自己的。

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');
    });