http://i.stack.imgur.com/VPqxq.png
< 项目 2 项目 3 项目 4 项目 5 项目 6 >
这就是我想要实现的,通过单击右箭头,它应该加载剩余的菜单项,并且与左箭头相同但向左。
我正在使用asp.net!但是我可以通过 css 和 J Query 或 java 脚本来实现吗?谁能指出使用这个的网站?
http://i.stack.imgur.com/VPqxq.png
< 项目 2 项目 3 项目 4 项目 5 项目 6 >
这就是我想要实现的,通过单击右箭头,它应该加载剩余的菜单项,并且与左箭头相同但向左。
我正在使用asp.net!但是我可以通过 css 和 J Query 或 java 脚本来实现吗?谁能指出使用这个的网站?
这是一个 JS Fiddle,应该有助于您尝试构建的内容。
向左或向右动画的导航菜单。
HTML
<div class='navigation'>
<button type='button' class="left-arrow"><p><</p></button>
<ul>
<li class='item1'><a href="#">menu item1</a></li>
<li><a href="#">menu item2</a></li>
<li><a href="#">menu item3</a></li>
<li><a href="#">menu item4</a></li>
<li><a href="#">menu item5</a></li>
<li><a href="#">menu item6</a></li>
</ul>
<button type='button' class='right-arrow'><p>></p></button>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
button {
border:none;
cursor: pointer;
}
.navigation {
width: 1000px;
}
.left-arrow {
background: #3d69b9;
float: left;
height: 60px;
text-align: center;
width: 60px;
}
.left-arrow:hover {
background: #69c;
}
.left-arrow p {
color: #fff;
font-size: 18px;
}
.right-arrow {
background: #3d69b9;
border-left: 1px solid #69c;
float: left;
height: 60px;
text-align: center;
width: 60px;
}
.right-arrow:hover {
background: #69c;
}
.right-arrow p {
color: #fff;
font-size: 18px;
}
ul {
float:left;
font-size: 0;
overflow: hidden;
width: 815px;
white-space: nowrap;
}
li {
border-left: 1px solid #69c;
color: #fff;
display: inline-block;
font-size: 16px;
height: 60px;
list-style: none;
text-align: center;
width: 162px;
}
li a {
background: #3d69b9;
color: #fff;
display: block;
height: 100%;
padding-top: 18px;
text-decoration: none;
width: 100%
}
li a:hover {
background: #69c;
}
JS
$('.left-arrow').on({click: function() {
$('.item1').animate({marginLeft:'0px'}, 500);
}
});
$('.right-arrow').on({click: function() {
$('.item1').animate({marginLeft:'-163px'}, 500);
}
});