来自苹果网站的移动导航菜单

时间：2014-11-06 18:04:34

标签： javascript jquery html css

如何从新的苹果网站为移动设备制作动画。 为了描述效果，基本上用户可以点击左上角菜单，然后两条平行线将变换为“x”，其显示先前隐藏的导航，可以向右滑动以显示更多内容。 http://www.apple.com/de/ - 在我的Chrome设备工具上查看。

$('.header-top input').on('click', function () {
    if ($(this).val() == '=') {
        $(this).val('x');
        $('.header-bot').hide();
    } else {
        $(this).val('=');
        $('.header-bot').show();
    }
})
body {
    margin:auto;
    background: #f2f2f2;
}
.header {
    position:relative;
    background-color: #fff;
    font-size:2em;
    height: 50px;
}
.header-top {
    height: 50px;
}
.header-top input {
    float:left;
    font-size:inherit;
    padding:0;
    border-style:none;
    background-color:transparent;
    height: 50px;
    outline: none;
    margin-left: 15px;
    cursor: pointer;
}
.header-bot {
    position:absolute;
    white-space:nowrap;
    width:100%;
    overflow:auto;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #f2f2f2;
}
.header-bot li {
    margin-left:1em;
    float: left;
    text-decoration:none;
    color: #999;
    list-style: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 50px;
}
.header-bot li:hover {
    color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="header">
        <div class="header-top">
            <input type="button" value="=">
        </div>
        <div class="header-bot">
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
        </div>
    </div>
</body>

1 个答案:

答案 0 :(得分：0)

试试这个：demo 这个演示只在firefox工作，甚至苹果网站在firefox中提供此功能，而不是在chrome和safari.i中测试...

＆＃13;
＆＃13; 
$('.header-bot').hide();	
$('#gh-svg-icons').on('click', function () {
	var flag= $(this).attr('aria-expanded');
	//alert(flag);
	if(flag=='true')
	{
		$(this).addClass('gh-svg-wrapper_click');
		
		$("#svg_first").attr("class", "gh-svg gh-svg-top");
		$('#svg_third').attr('class','gh-svg-rect');
		$("#svg_second").attr("class", "gh-svg gh-svg-bottom");
		
		
		$(this).attr('aria-expanded','false');
		
		$('.header-bot').show();
	}
	else
	{
		$(this).removeClass('gh-svg-wrapper_click');
		$("#svg_first").attr("class", "gh-svg");
		$('#svg_third').attr('class','gh-svg-rect gh_svg_rect_top');
		$("#svg_second").attr("class", "gh-svg");
		
		$(this).attr('aria-expanded','true');
		$('.header-bot').hide();
	}
   
});
＆＃13; 
.gh-svg {
	font-size: 18px;
	left: 0;
	position: absolute !important;
	top: 0;
	-webkit-transform:  translateZ(0px) rotate(0deg); 
	-moz-transform:  translateZ(0px) rotate(0deg); 
	-o-transform:  translateZ(0px) rotate(0deg); 
	-ms-transform:  translateZ(0px) rotate(0deg);
	
	-webkit-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;
	-moz-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;
	-o-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;

}
.gh-svg-wrapper {
	display: block;
	height: 2.66667em;
	outline: medium none;
	position: absolute;
	-webkit-transform:  translateZ(0px) rotate(0deg); 
	-moz-transform:  translateZ(0px) rotate(0deg); 
	-o-transform:  translateZ(0px) rotate(0deg); 
	-ms-transform:  translateZ(0px) rotate(0deg);	
	
	-webkit-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
	-moz-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
	-o-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;

	width: 2.66667em;
}
button {
	background-color: transparent;
	border: 0 none;
	margin: 0;
	padding: 0;
}
.gh-svg-wrapper_click {
	-webkit-transform:  translateZ(0px) rotate(90deg); 
	-moz-transform:  translateZ(0px) rotate(90deg); 
	-o-transform:  translateZ(0px) rotate(90deg); 
	-ms-transform:  translateZ(0px) rotate(90deg);

	-webkit-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
	-moz-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
	-o-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;
	transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s;

}
.gh-svg-rect-top, .gh-svg-rect-bottom {
	-webkit-transform:  translate3d(0px, 0px, 0px); 
	-moz-transform:  translate3d(0px, 0px, 0px); 
	-o-transform:  translate3d(0px, 0px, 0px); 
	-ms-transform:  translate3d(0px, 0px, 0px);
	

}
.gh_svg_rect_top {
	-webkit-transform:  translate3d(0px, -8px, 0px); 
	-moz-transform: translate3d(0px, -8px, 0px); 
	-o-transform:  translate3d(0px, -8px, 0px); 
	-ms-transform:  translate3d(0px, -8px, 0px);
	

}

.gh-svg-top {
	-webkit-transform:  translateZ(0px) rotate(45deg); 
	-moz-transform:  translateZ(0px) rotate(45deg); 
	-o-transform:  translateZ(0px) rotate(45deg); 
	-ms-transform:  translateZ(0px) rotate(45deg);
	
	
}
.gh-svg-bottom {
	-webkit-transform:  translateZ(0px) rotate(-45deg); 
	-moz-transform:  translateZ(0px) rotate(-45deg); 
	-o-transform:  translateZ(0px) rotate(-45deg); 
	-ms-transform:  translateZ(0px) rotate(-45deg);

}
.header-top input {
    float:left;
    font-size:inherit;
    padding:0;
    border-style:none;
    background-color:transparent;
    height: 50px;
    outline: none;
    margin-left: 15px;
    cursor: pointer;
}
.header-bot {
    position:absolute;
    white-space:nowrap;
    width:100%;
    overflow:auto;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #f2f2f2;
}
.header-bot li {
    margin-left:1em;
    float: left;
    text-decoration:none;
    color: #999;
    list-style: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 50px;
}
.header-bot li:hover {
    color: #000;
}
.header-top {
    height: 37px;
}
.header-top input {
    float:left;
    font-size:inherit;
    padding:0;
    border-style:none;
    background-color:transparent;
    height: 50px;
    outline: none;
    margin-left: 15px;
    cursor: pointer;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-top">
<button class="gh-svg-wrapper " id="gh-svg-icons" aria-expanded="true"> 
	<svg id="svg_first" x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg " enable-background="new 0 0 96 96">
<rect id="svg_third" width="32" height="4" x="32" y="46" class="gh_svg_rect_top gh-svg-rect "/>
</svg> <svg id="svg_second" x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg " enable-background="new 0 0 96 96">
<rect width="32" height="4" x="32" y="46" class="gh-svg-rect "/>
</svg> </button>
        </div>

<div class="header-bot">
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
        </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题