1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

JQuery和CSS打造炫酷动感菜单

作者:用户 来源:互联网 时间:2016-06-25 17:05:02

menu样式代码菜单元素span层span点击spanstep overjquery菜单代码js锚点定位动感菜单

JQuery和CSS打造炫酷动感菜单 - 摘要: 本文讲的是JQuery和CSS打造炫酷动感菜单, 本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很

教程将分步讲解如何使用JQueryCSS打造一个炫酷动感菜单。jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如何用它来实现菜单神奇的效果吧

JQuery和CSS打造炫酷动感菜单-彩色炫酷光束粒子动感

您可以点击查看演示,也可以点击下载源代码。

Step1 - HTML结构

看一下菜单的HTML代码,跟平常的菜单代码没有什么区别:

 <div id="menu" class="menu">
    <ul>
        <li><a href="javascript:;">Home</a></li>
        <li><a href="javascript:;">HTML/CSS</a></li>
        <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
        <li><a href="javascript:;">Tutorials</a></li>
        <li><a href="javascript:;">About</a></li>
    </ul>
</div>

关键在于利用脚本在每个锚点(a元素)中建立几个分隔层,这样就可以在鼠标悬停时分别控制它们产生动画。为此,我们要在DOM加载完成时候修改DOM的结构,使得每个锚点代码变成如下:

<a href="javascript:;">
    <span class="out">Home</span>
    <span class="bg"></span>
    <span class="over">Home</span>
</a>

原先的每个锚点中的内容会被附加到两个span元素(.out和.over)里面,另外一个span元素(.bg)为背景图片层。

至于如何修改DOM结构,JS代码将在Step3中讲解。

Step2 - CSS样式

在示例中,展示了两种样式,有使用背景图的和没有使用背景图的(具体查看演示),您也可以自由定制自己的样式,以设计出更炫酷的菜单,这里提供基本的样式和解释:

/* 以下是菜单基本的样式
*/.menu ul li {
    float: left;
    /* 菜单子元素的内容超出不可见 */
      overflow: hidden;
    /* 以下省略部分代码 */
}
.menu ul li a {
    /* 必须是相对定位  */
     position: relative;
    display: block;
    width: 110px;
    /* 以下省略部分代码 */
}
.menu ul li a span {
    /* 所有层将使用绝对定位 */
    position: absolute;
    left: 0;
    width: 110px;
}
.menu ul li a span.out {
    top: 0px;
}
.menu ul li a span.over,.menu ul li a span.bg { 
   /* 起初.over层和.bg层相对a元素-45px以达到隐藏的效果 */
      top: -45px;}/
* 以下是使用背景图的示例 */
#menu {   
/* 菜单背景 */ 
   background:url(bg_menu.gif) scroll 0 -1px repeat-x; 
   border:1px solid #CCC;}
#menu ul li a {
    color: #000;
}
#menu ul li a span.over {
    color: #FFF;
}
#menu ul li span.bg {   
/* 指定高度和背景图 */
    height: 45px;
    background: url(bg_over.gif) center center no-repeat;
}

您也可以在自行定制CSS样式,这里还提供了简化版的样式(查看演示)



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索menu , 样式 , 代码 , 菜单 , 元素 , span层 , span点击 , span , step over , jquery菜单代码 , js锚点定位 动感菜单 彩色炫酷光束粒子动感、动感演出炫酷光条、cp0390动感炫酷舞蹈、打造炫酷进度条、ps打造炫酷字体,以便于您获取更多的相关知识。

javascript-网站设计中页面css和js问题

...呀,写大神 解决方案 锋利的JQuery 解决方案二: js高级程序设计。css多看看模板代码 解决方案三: 其实 你需要学习 js css3 以及html5 解决方案四: 可以参考网上的 但还是自己要...

jQuery 打造动态下滑菜单实现说明_jquery

jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如...

100多个经典常用的PHP功能插件大全实例演示和下载

...手机app触屏滑动 07-19 svgmap全国地图数据分布统计 07-19 jQuery超级简单的绿色拖动验证码功能 07-10 php结合数据库演示商品多图片上传 06-29 PHP+Ajax无刷新上传头像预览 06-28 flot.js完美演示柱状图折线图和饼状图 03-21 plupload上...

平时开发搜集的一些网址

... 裴东辉 - 博客园 SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件 - Wayou - 博客园 7-zip 压缩算法及C SDK使用 - davad.di - 博客园 用.NET开发的磁力搜索引擎——Btbook.net - Create Chen - 博客园 示例 - 17行代码实现一个简单高效的多线程蜘...

9款最新炫酷HTML5/CSS3应用推荐

...画效果非常逼真。 在线演示         源码下载 5、jQuery仿淘宝左侧商品分类菜单 这次我们要来分享一款相对实用的jQuery插件,它是一款用jQuery和CSS实现的仿淘宝左侧商品分类菜单。鼠标滑过主菜单即可展开商品二级菜单,...

前三篇
后三篇