html5+css3+jquery网页顶部3D翻转展开导航

1、新建html文档。

3、初始化css代码。<style>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; }body { line-height: 1; }ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }table { border-collapse: collapse; border-spacing: 0; }</style>

5、书写并添加js代码。<script src="js/modernizr.js"></script><script sr艘早祓胂c="js/jquery-2.1.1.js"></script><script>jQuery(document).ready(function($){ $('.cd-3d-nav-trigger').on('click', function(){ toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible')); }); $('.cd-3d-nav a').on('click', function(){ var selected = $(this); selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected'); updateSelectedNav('close'); }); $(window).on('resize', function(){ window.requestAnimationFrame(updateSelectedNav); }); function toggle3dBlock(addOrRemove) { if(typeof(addOrRemove)==='undefined') addOrRemove = true; $('.cd-header').toggleClass('nav-is-visible', addOrRemove); $('main').toggleClass('nav-is-visible', addOrRemove); $('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove); } function updateSelectedNav(type) { var selectedItem = $('.cd-selected'), selectedItemPosition = selectedItem.index() + 1, leftPosition = selectedItem.offset().left, backgroundColor = selectedItem.data('color'); $('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({ 'left': leftPosition, }); if( type == 'close') { $('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ toggle3dBlock(false); }); } } $.fn.removeClassPrefix = function(prefix) { this.each(function(i, el) { var classes = el.className.split(" ").filter(function(c) { return c.lastIndexOf(prefix, 0) !== 0; }); el.className = $.trim(classes.join(" ")); }); return this; };});</script>

7、查看效果。