Welcome, Old Sport!

“星际穿越”导航菜单UI

by ilikecss ON 2014/11/24 5686

interstellar-menu-ui-cover《星际穿越》最近很火的一部电影,官方站点也制作的非常“穿越”, 我非常喜欢该网站的导航设计,很符合科幻、宇宙星际的感觉!对这款菜单设计上很喜欢,所以我将它从页面中分离了出来,加入页面滚动跳转的效果。下面就和大家分享这款“宇宙”菜单

这款菜单设计效果只是纯css样式,页面滚动跳转我使用的是“pagePiling.js”的插件

HTML #菜单部分

<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1" class="js-nav-link">home</a></li>
    <li data-menuanchor="page2"><a href="#page2" class="js-nav-link">about</a></li>
    <li data-menuanchor="page3"><a href="#page3" class="js-nav-link">gallery</a></li>
    <li data-menuanchor="page4"><a href="#page4" class="js-nav-link">contact</a></li>
</ul>

HTML #主题部分

<div id="pagepiling">
    <div class="section" id="section1">
    </div>
    <div class="section" id="section2">
    <h1>Some section2</h1>
    </div>
    <div class="section" id="section3">
    <h1>Some section3</h1>
    </div>
    <div class="section" id="section4">
    <h1>Some section4</h1>
    </div>
</div>

css

/* MENU */
ul#menu {
    color: #fff;
    display: inline-block;
    list-style-type: none;
    vertical-align: middle;
	position: absolute;
	z-index: 999;
	top: 100px;
	left: 50px;
}
ul#menu li {
    font: 16px/1em "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	list-style: none;
	border-left: 1px solid #fff;
    display: block;
    opacity: 0.5;
    padding: 2em 0 .8em 1em;
    transition: all 0.25s ease-in-out 0s;
}

ul#menu li.active {
    border-left: 3px solid #fff;
    opacity: 1;
    padding: 1.4em 0 1.4em 1em;
    transition: all 0.25s ease-in-out 0s;
}
ul#menu li:hover{
    opacity: 1;
    transition: all 0.25s ease-in-out 0s;
}
/* Section 1
 * --------------------------------------- */
#section1 {
	background: #000 url(../images/game_card-bg.jpg) no-repeat top;
	background-size: cover;
}

javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pagepiling.min.js"></script>

// Plugin intialization
$('#pagepiling').pagepiling({
	menu: '#menu',
	anchors: ['page1', 'page2', 'page3', 'page4'], // 页面数量
	sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'], // 每个页面颜色
	navigation: {
		'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
	},	

});

Can i use…

案例中菜单部分使用css3,浏览器支持参照: http://caniuse.com/#search=css3

8条评论
  1. 这片儿我看着看着,睡着了。。。。 :oops:

  2. #2

    axiu说道:

    好酷

  3. #3

    意大利面说道:

    哈哈哈 和星际穿越毫无关系嘛




TOP