怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 345 JQUERY DREAMWEAVER
html5+css3+jquery网页顶部3D翻转展开导航
来源：互联网
2023-03-16 23:54:29 459
html5 css3 jquery网页顶部3D翻转展开导航
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
书写hmtl代码。
header class="cd-header">
a href="#0" class="cd-logo">img src="img/cd-logo.svg" alt="Logo">/a>
a href="#0" class="cd-3d-nav-trigger">
Menu
span>/span>
/a>
/header>
main>
h1>3D Rotating Navigation/h1>
/main>
nav class="cd-3d-nav-container">
ul class="cd-3d-nav">
li class="cd-selected">
a href="#0">Dashboard/a>
/li>
li>
a href="#0">Projects/a>
/li>
li>
a href="#0">Images/a>
/li>
li>
a href="#0">Settings/a>
/li>
li>
a href="#0">New/a>
/li>
/ul> !-- .cd-3d-nav -->
span class="cd-marker color-1">/span>
/nav> !-- .cd-3d-nav-container -->
初始化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>
书写css代码。
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 62.5%; }
body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; background-color: #485274; }
a { text-decoration: none; }
.cd-header { height: 80px; width: 90%; margin: 0 auto; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd-header:after { content: ""; display: table; clear: both; }
.cd-header.nav-is-visible { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); }
.cd-logo { float: left; margin-top: 28px; }
.cd-3d-nav-trigger { position: relative; float: right; height: 45px; width: 45px; margin-top: 18px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; }
.cd-3d-nav-trigger span, .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span::after { position: absolute; width: 28px; height: 3px; background-color: #FFF; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd-3d-nav-trigger span { top: 21px; left: 8px; -webkit-transition: background 0.2s 0.5s; -moz-transition: background 0.2s 0.5s; transition: background 0.2s 0.5s; }
.cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after { content: ''; left: 0; -webkit-transition: -webkit-transform 0.2s 0.5s; -moz-transition: -moz-transform 0.2s 0.5s; transition: transform 0.2s 0.5s; }
.cd-3d-nav-trigger span::before { bottom: 8px; }
.cd-3d-nav-trigger span::after { top: 8px; }
.nav-is-visible .cd-3d-nav-trigger span { background-color: rgba(255, 255, 255, 0); }
.nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after { background-color: white; }
.nav-is-visible .cd-3d-nav-trigger span::before { -webkit-transform: translateY(8px) rotate(-45deg); -moz-transform: translateY(8px) rotate(-45deg); -ms-transform: translateY(8px) rotate(-45deg); -o-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); }
.nav-is-visible .cd-3d-nav-trigger span::after { -webkit-transform: translateY(-8px) rotate(45deg); -moz-transform: translateY(-8px) rotate(45deg); -ms-transform: translateY(-8px) rotate(45deg); -o-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); }
.cd-3d-nav-container { position: fixed; top: 0; left: 0; height: 80px; width: 100%; background-color: #000000; visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s; -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s; transition: transform 0.5s 0s, visibility 0s 0.5s; }
.cd-3d-nav-container.nav-is-visible { visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s; -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s; transition: transform 0.5s 0s, visibility 0.5s 0s; }
.cd-3d-nav { position: relative; height: 100%; background-color: #343c55; transform: translateZ(0); backface-visibility: hidden; transform: rotateX(90deg); transition: transform 0.5s; }
.cd-3d-nav::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #000000; opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s; -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s; transition: opacity 0.5s 0s, visibility 0.5s 0s; }
.cd-3d-nav li { height: 100%; width: 20%; float: left; }
.cd-3d-nav li:first-of-type a::before { background-image: url(../img/icon-1.svg); }
.cd-3d-nav li:nth-of-type(2) a::before { background-image: url(../img/icon-2.svg); }
.cd-3d-nav li:nth-of-type(3) a::before { background-image: url(../img/icon-3.svg); }
.cd-3d-nav li:nth-of-type(4) a::before { background-image: url(../img/icon-4.svg); }
.cd-3d-nav li:nth-of-type(5) a::before { background-image: url(../img/icon-5.svg); }
.cd-3d-nav a { position: relative; display: block; height: 100%; color: transparent; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; }
.cd-3d-nav a::before { content: ''; height: 32px; width: 32px; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: 32px 64px; background-repeat: no-repeat; background-position: 0 0; }
.no-touch .cd-3d-nav a:hover { background-color: #2b3145; }
.cd-3d-nav .cd-selected a { background-color: #212635; }
.no-touch .cd-3d-nav .cd-selected a:hover { background-color: #212635; }
.cd-3d-nav .cd-selected a::before { background-position: 0 -32px; }
.nav-is-visible .cd-3d-nav { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
.nav-is-visible .cd-3d-nav::after { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s; -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s; transition: opacity 0.5s 0s, visibility 0s 0.5s; }
.cd-marker { position: absolute; bottom: 0; left: 0; height: 3px; width: 20%; background-color: currentColor; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translateZ(0) rotateX(90deg); -moz-transform: translateZ(0) rotateX(90deg); -ms-transform: translateZ(0) rotateX(90deg); -o-transform: translateZ(0) rotateX(90deg); transform: translateZ(0) rotateX(90deg); -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; }
.cd-marker::before { content: ''; position: absolute; bottom: 3px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height: 0; width: 0; border: 10px solid transparent; border-bottom-color: inherit; }
.nav-is-visible .cd-marker { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
.color-1 { color: #9a57bd; }
.color-2 { color: #c96aa4; }
.color-3 { color: #d6915e; }
.color-4 { color: #5397c7; }
.color-5 { color: #77cd91; }
main { -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
main h1 { text-align: center; font-size: 2.4rem; font-weight: 300; color: #ffffff; margin: 2em auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main.nav-is-visible { -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); }
书写并添加js代码。
script src="js/modernizr.js">/script>
script src="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>
代码整体结构。
查看效果。
注意事项
- modernizr.js是个js包，可以网上下载。
- jquery-2.1.1.js是个js包，可以网上下载。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 336 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 379 JQUERY