我们将创建一个伟大的菜单内容区域,幻灯片。我们使用枯燥乏味的风格,因为我们希望它看起来有点混乱:菜单项会有随机轮换使用CSS3属性“转换”。所以,当我们加载页面每个菜单项将定位不同,给一个随机的和创造性的看这枯燥乏味的页面。内容区域将是可见的一开始,但滑出,在每次单击另一个菜单项。同时,我们将随机的内容区域的旋转程度。请注意,旋转效应不会工作在IE或任何其他browers不支持得. .ehm CSS3。我们将开始与内容区域的标记:
菜单将会有以下标记:CSS#content{ width:824px; height:600px; margin:-200px auto 0px auto; background:transparent url(bg.gif) no-repeat bottom left;}#content h1{ color:#7F6137; text-shadow:1px 1px 1px #fff;}#content p{ margin:20px; width:600px;}#content .text{ padding:300px 0px 0px 100px;}所以,内容区域将本文的背景和将被隐藏。我们达到通过设置保证金负价值:我们全部内容区域外的窗口可见。菜单将样式如下:ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 200px; list-style: none; z-index:999999;}ul#navigation li { display:inline; float:left; width:100px; margin-left:1px;}ul#navigation li a { display: block; font-weight: bold; text-shadow: 1px 1px 1px #fff; float: left; width: 100px; height: 35px; color: #603d05; background: transparent url(item.png) no-repeat bottom right; text-decoration:none; text-align: center; padding-top: 80px; margin-top: -40px; cursor: pointer;}因为我们会使菜单项滑出一点当我们上空盘旋,我们最初设置顶边负价值。导航列表本身将是固定的,这就意味着即使你有更多的内容滚动,它总是会在页面的顶部。在浏览器的滚动出现内容变大时,您可能希望设置一些身体的初始高度为了避免菜单移动。让我们添加一些魔法!JavaScript这是JavaScript函数$(function() { var d=300; $('#navigation a').each(function(){ var $this = $(this); var r=Math.floor(Math.random()*41)-20; $this.css({ '-moz-transform':'rotate('+r+'deg)', '-webkit-transform':'rotate('+r+'deg)', 'transform':'rotate('+r+'deg)' }); $('#content').css({ '-moz-transform':'rotate('+r+'deg)', '-webkit-transform':'rotate('+r+'deg)', 'transform':'rotate('+r+'deg)' }); $this.stop().animate({ 'marginTop':'-70px' },d+=150); }); $('#navigation > li').hover( function () { var $this = $(this); $('a',$this).stop().animate({ 'marginTop':'-40px' },200); }, function () { var $this = $(this); $('a',$this).stop().animate({ 'marginTop':'-70px' },200); } ).click(function(){ var $this = $(this); var name = this.className; $('#content').animate({marginTop:-600}, 300,function(){ var $this = $(this); var r=Math.floor(Math.random()*41)-20; $this.css({ '-moz-transform':'rotate('+r+'deg)', '-webkit-transform':'rotate('+r+'deg)', 'transform':'rotate('+r+'deg)' }); $('#content div').hide(); $('#'+name).show(); $this.animate({marginTop:-200}, 300); }) });});一开始我们生成一个随机数从-20年到20将我们的旋转度。每个菜单项和内容最初将随机旋转。当我们悬停在菜单项时,他们会滑出,滑回到当鼠标移出。当我们点击菜单链接,根据内部内容元素得到显示。此外,幻灯片内容区域和退出而改变它的旋转度。顺便说一下,在Chrome呈现得很好! ![jQuery和CSS3随机下拉菜单]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······