0

I am trying to come up with a creative way to use a fixed header nav menu, and came across a website that has something that would work perfectly for me: http://ishothim.com/

Does anyone have some insight as to how to go about mimicking this menu? Mostly just the button to slide out menu on hover. I think I would just leave it like that instead of have a full menu appear once you scroll down like this site does.

4

2 回答 2

0

最好的办法是查看他们的代码，并从他们所做的事情中学习。

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

在此处输入图像描述

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

于 2013-08-15T20:42:56.957 回答
0

好的，这就是我最终要做的：

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');
    });
于 2013-08-23T15:20:27.227 回答