正文
[UI] Pull menu interaction concept - 下拉菜单交互
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Pull menu interaction concept - 下拉菜单交互
http://freebiesbug.com/code-stuff/pull-menu-interaction-concept/
效果图：
源码：
-html-
<div id="phone">
<div id="screen">
<div id="header">
<ul id="menu">
<li>Latest Movies</uli>
<li>Best Movies</uli>
<li>Archive</uli>
<li>About</li>
<li class="reload"><i class="loader-icon"></i></li>
</ul>
<div class="pullmenu-icon"></div>
</div>
<div id="loader"><i class="loader-icon anim"></i></div>
<div class="pages">
<div class="page back2" id="about">
<div>
<span>Pullmenu</span><br/>Menu interaction concept<br/>by @_fbrz
</div>
</div>
<div class="page" id="latest">
<div class="box hero back11">
<span>Interstellar</span>
</div>
<div class="box back2">
<span>Dracula untold</span>
</div>
<div class="box back9 right tall">
<span>The guardians of the galaxy</span>
</div>
<div class="box back4">
<span>The judge</span>
</div>
<div class="box back3">
<span>Frank</span>
</div>
<div class="box back6 right">
<span>Big Hero 6</span>
</div>
<div class="box back8 wide">
<span>Hunger Games</span>
</div>
</div>
<div class="page" id="best">
<div class="box wide back11">
<span>Boyhood</span>
</div>
<div class="box wide back2">
<span>The lego movie</span>
</div>
<div class="box wide back9">
<span>The Grand Budapest Hotel</span>
</div>
<div class="box wide back4">
<span>Dawn Of The Planet Of The Apes</span>
</div>
<div class="box wide back3">
<span>Nightcrawler</span>
</div>
<div class="box wide back6">
<span>Big Hero 6</span>
</div>
<div class="box wide back8">
<span>Hunger Games</span>
</div>
</div>
<div class="page" id="archive">
<div class="box small back11">
<span>The Wizard of Oz</span>
</div>
<div class="box small back2">
<span>Citizen Kane</span>
</div>
<div class="box small back9">
<span>The Godfather</span>
</div>
<div class="box small back4">
<span>The Third Man</span>
</div>
<div class="box small back3">
<span>A Hard Day's Night</span>
</div>
<div class="box small back6">
<span>Modern Times</span>
</div>
<div class="box small back8">
<span>All About Eve</span>
</div>
<div class="box small back7">
<span>Metropolis</span>
</div>
<div class="box small back5">
<span>Singin' in the Rain</span>
</div>
<div class="box small back10">
<span>King Kong</span>
</div>
<div class="box small back1">
<span>Sunset Boulevard</span>
</div>
</div>
</div>
</div>
<div id="home"></div>
<div id="speaker"></div>
</div> <div id="text">
<div id="pullmenu-icon"></div>
<h1>pull<br/>menu</h1>
<h2>Menu<br/>interaction<br/>concept</h2>
<h3>* Pull down that icon!</h3>
<h3>** Mobile demo: bit.ly/1CI6OEs</h3>
</div> <a href="http://coolors.co" target="_blank" id="coolors">Coolors ></a>
-CSS-
@import url(http://fonts.googleapis.com/css?family=Lato);
body {
font-family: Lato;
-webkit-font-smoothing: antialiased;
margin:;
background: #f5f5f5;
} /* phone */
#phone {
width: 310px;
height: 640px;
border: 2px solid #ccc;
border-radius: 30px;
position: absolute;
left: 50%;
top: 50px;
margin: 0 -285px;
background: #fff;
}
#screen {
width: 290px;
height: 520px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin: -260px -145px;
box-sizing: border-box;
overflow: hidden;
}
#home {
width: 36px;
height: 36px;
border: 1px solid #ccc;
position: absolute;
bottom: 10px;
left: 50%;
margin: 0 -18px;
border-radius: 50%;
}
#speaker {
width: 50px;
height: 6px;
border: 1px solid #ccc;
border-radius: 6px;
position: absolute;
left: 50%;
top: 25px;
margin: 0 -25px;
} #header {
height: 46px;
background: #353541;
position: relative;
z-index:;
cursor: grab;
&:active {
cursor: grabbing;
}
} .pullmenu-icon {
width: 16px;
height: 2px;
background: #FFF;
position: absolute;
right: 20px;
bottom: 27px;
transition: opacity .2s ease-in-out; &:after {
content: '';
width: 8px;
height: 2px;
background: #FFF;
position: absolute;
top: 10px;
left: 4px;
} &:before {
content: '';
width: 16px;
height: 2px;
background: #FFF;
position: absolute;
top: 5px;
left:;
} &.hide {
opacity:;
}
} #title {
height: 46px;
} #menu {
list-style: none;
margin:;
padding:;
width: 3000px;
position: absolute;
top: 50%;
margin: -15px 0px;
transition: transform .2s ease-out; li {
color: #FFF;
font-size: 15px;
font-weight:;
display: inline-block;
padding: 0 20px;
opacity:;
transition: opacity .2s ease-out; &.show {
opacity: 1!important;
} &.reload {
margin-left: 200px;
position: relative;
top: 6px;
transition: opacity 0s ease-out;
}
} &.show li {
opacity: .2;
} &.notrans {
transition: none;
}
} .loader-icon {
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px solid #fff;
border-bottom-color: transparent;
display: block;
&.anim {
animation: loader 1s infinite linear;
}
} #loader .loader-icon {
border: 2px solid #353541;
border-bottom-color: transparent;
position: absolute;
top: 50%;
left: 50%;
z-index:;
margin: -8px;
}
@keyframes loader {
0% { transform: rotate(0); }
100% { transform: rotate(359deg); }
} .pages {
transform: translate3d(0,0,0);
transition: opacity .2s linear;
z-index:;
position: absolute;
width: 318px;
height: 100%;
&.hide {
transition: opacity .1s linear;
opacity:;
}
} .page {
overflow-y: auto;
overflow-x: hidden;
height: 472px;
display: none;
padding-right: 15px;
}
#latest {
display: block;
} .back1 { background: -webkit-linear-gradient(-50deg, rgb(174, 147, 187), rgb(166, 61, 113)); }
.back2 { background: -webkit-linear-gradient(-50deg, rgb(151, 199, 148), rgb(18, 101, 108)); }
.back3 { background: -webkit-linear-gradient(-50deg, rgb(128, 143, 182), rgb(55, 63, 82)); }
.back4 { background: -webkit-linear-gradient(-50deg, rgb(202, 162, 133), rgb(192, 191, 60)); }
.back5 { background: -webkit-linear-gradient(-50deg, rgb(147, 176, 187), rgb(61, 122, 166)); }
.back6 { background: -webkit-linear-gradient(-50deg, rgb(187, 167, 147), rgb(166, 93, 61)); }
.back7 { background: -webkit-linear-gradient(-50deg, rgb(157, 147, 187), rgb(102, 89, 161)); }
.back8 { background: -webkit-linear-gradient(-50deg, rgb(175, 171, 178), rgb(105, 95, 100)); }
.back9 { background: -webkit-linear-gradient(-50deg, rgb(165, 137, 176), rgb(211, 92, 92)); }
.back10 { background: -webkit-linear-gradient(-50deg, rgb(147, 187, 149), rgb(90, 119, 78)); }
.back11 { background: -webkit-linear-gradient(-50deg, rgb(189, 229, 208), rgb(18, 60, 108)); } .box {
height: 116px;
position: relative;
width: 50%;
float: left; &.right {
float: right;
}
&.tall {
height: 232px;
}
&.wide {
width: 100%;
}
&.small {
width: 100%;
height: 70px;
}
&.hero {
height: 240px;
width: 100%; span {
font-size: 23px;
}
} span {
position: absolute;
color: #fff;
font-size: 15px;
bottom:;
left:;
text-transform: uppercase;
padding: 25px 25px;
font-weight:;
}
} #about {
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight:;
font-size: 11px; div {
position: relative;
left: -6px;
top: 50%;
margin-top: -30px;
} span {
font-size: 20px;
}
} #text {
position: absolute;
height: 640px;
left: 50%;
top: 50px;
margin: 0px 75px;
color: #353541; h1 {
margin:;
font-size: 70px;
line-height: 60px;
text-transform: uppercase;
} h2 {
font-size: 23px;
margin:;
text-transform: uppercase;
margin-top: 10px;
} h3 {
opacity: 0.3;
font-style: italic;
font-weight:;
font-size: 16px;
margin-top: 30px;
}
} #pullmenu-icon {
width: 40px;
height: 5px;
background: #353541;
margin-top: 69px;
position: relative;
margin-bottom: 40px;
left: 6px; &:before {
width: 40px;
height: 5px;
background: #353541;
content: '';
position: absolute;
top: 10px;
} &:after {
width: 22px;
height: 5px;
background: #353541;
content: '';
position: absolute;
top: 20px;
left: 9px;
}
} #coolors {
position: fixed;
bottom: 20px;
right: 30px;
text-decoration: none;
color: #353541;
font-size: 11px;
text-transform: uppercase;
}
-JS-
//sorry for the mess
var current_index = 0,
index,
menu,
menu_items_count,
mouse_down,
mouse_start_y,
pull_step,
total_pull = 80,
release = 40,
pull_release = total_pull + release; $(document).on('selectstart', false); $(document).ready(function(){
$("#menu li").each(function(i,e){
$(this).attr("data-index",i)
}); //
menu = $("#menu").html();
menu_items_count = $("#menu li").length;
pull_step = total_pull/(menu_items_count-1);
// $("#menu").css("transform","translate3d("+getItemX(0)+"px,0,0)");
$("#menu li").removeClass("show");
$("#menu li").eq(0).addClass("show");
}); $("#header").mousedown(function(e){ //
mouse_down = true;
mouse_start_y = e.pageY;
// if(index == menu_items_count-1) {
index = 0;
} else {
var $item = $("#menu li").eq(index);
$("#menu").html(menu);
$("#menu li").eq($item.attr("data-index")).remove();
$item.prependTo($("#menu"));
$("#menu li").eq(0).addClass("show");
$("#menu").addClass("notrans");
$("#menu").css("transform","translate3d("+getItemX(0)+"px,0,0)");
}
}); $(document).mouseup(function(e){
if(mouse_down) {
//
mouse_down = false;
$("#header").animate({height: 46},300);
$("#menu").removeClass("show");
$(".pullmenu-icon").removeClass("hide");
// if(index>0) { if(index==menu_items_count-1) { $(".reload i").addClass("anim"); setTimeout(function(){
$("#menu li").removeClass("show");
$("#menu").css("transform","translate3d("+getItemX(0)+"px,0,0)");
$(".reload i").removeClass("anim"); setTimeout(function(){ $("#menu li").eq(0).addClass("show");
},500);
},1000); } else { current_index = index; $(".pages").addClass("hide"); setTimeout(function(){ $(".pages").removeClass("hide");
$(".page").hide(); switch($("#menu li").eq(index).attr("data-index")) {
case '0': $("#latest").show(); break;
case '1': $("#best").show(); break;
case '2': $("#archive").show(); break;
case '3': $("#about").show(); break;
}
},1000);
}
}
}
}); $(document).mousemove(function(e){ $("#menu").removeClass("notrans"); if(mouse_down) { var diff = Math.max(0, e.pageY - mouse_start_y);
if(diff>pull_release) diff = pull_release + (diff-pull_release)/(diff*0.01); $("#header").height(46+diff); index = Math.max(0,Math.min(menu_items_count-2, Math.floor((diff-release)/pull_step)));
if(diff>pull_release+pull_step*2) index = menu_items_count-1; if(diff>release) {
$("#menu").addClass("show");
$(".pullmenu-icon").addClass("hide");
} else {
$("#menu").removeClass("show");
$(".pullmenu-icon").removeClass("hide");
} $("#menu").css("transform","translate3d("+getItemX(index)+"px,0,0)");
$("#menu li").removeClass("show");
$("#menu li").eq(index).addClass("show"); $(".loader-icon").css("transform", "rotate("+(diff*20)+"deg)");
}
}); var getItemX = function(index){
var $item = $("#menu li").eq(index);
var item_offset = $item.offset().left;
var item_width = $item.outerWidth();
var menu_offset = $("#menu").offset().left;
var screen_width = $("#screen").width();
return (menu_offset-item_offset)+(screen_width-item_width)/2;
};
