jQuery实现Meizu魅族官方网站的导航菜单效果


Posted in Javascript onSeptember 14, 2015

本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果。分享给大家供大家参考。具体如下:

偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力。鼠标放到菜单上,菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果,不是忘记有类似效果的网站的网址,就是压根儿找不到。。又不知道怎么描述,今天总算碰到了,真给力。

运行效果截图如下:

jQuery实现Meizu魅族官方网站的导航菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Meizu魅族导航菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
div,h1,h2,h3,h4,p,form,label,input,textarea,img,span{margin:0;padding:0;}ul,li{list-style:none;padding:0;margin:0;}img{border:none;}
.csc_top{background:url(images/shopping_tab.jpg) 0 0 no-repeat;width:958px;height:45px;margin:0 auto;position:relative;z-index:101;}
.slideMenu{height:38px;}
li.current a{color:#00b5f7;cursor:pointer;}
li.current a:hover{color:#00b5f7;cursor:pointer;}
.lavaLampWithImage3 li a:hover,.lavaLampWithImage3 li a:active{border:none;color:#00B5F7;text-decoration:none;}
.lavaLampWithImage3 .sep{padding-top:13px;font-size:10px;color:#aeadad;float:left;height:20px;border-top:none;}
.lavaLampWithImage3{position:relative;height:28px;float:left;}
.lavaLampWithImage3 .current{color:#008ace;}
.lavaLampWithImage3 .current a{color:#008ace;}
.lavaLampWithImage3 li{float:left;list-style:none;padding-bottom:11px;}
.lavaLampWithImage3 li.back{background:url(images/b_slider.gif) center bottom no-repeat;width:120px;height:28px;z-index:8;position:absolute;}
.lavaLampWithImage3 li a{font:bold 14px arial;text-decoration:none;color:#303030;outline:none;text-align:center;top:6px;letter-spacing:0;z-index:10;display:block;float:left;height:28px;position:relative;overflow:hidden;padding:5px 20px 0 17px;font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif,"����";font-weight:normal;font-size:13px;}
</style>
</head>
<body>
<div class="csc_top">
 <div class="shead_left">
 <ul id="1" class="lavaLampWithImage3">  
  <li class="current">
  <a href="#" style="padding: 5px 30px 0;">Meizu</a>
  </li>
  <span class="sep">|</span>
  <li >
  <a href="#" style="padding: 5px 30px 0;">魅族</a>
  </li>
  <span class="sep">|</span>
  <li>
  <a href="#" style="padding: 5px 30px 0;">三水点靠木</a>
  </li> 
 </ul>
 </div>
</div>
</div>
<script type="text/javascript" src="MZPub-CSC-0121.js"></script>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 #Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 #Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
You might like
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
js数组去重的hash方法
2016/12/22 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python系列 文件操作的代码
2019/10/06 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
2014年网络管理员工作总结
2014/12/01 职场文书
北京英语导游词
2015/02/12 职场文书
质检员岗位职责范本
2015/04/07 职场文书
联谊会开场白
2015/06/01 职场文书
《将心比心》教学反思
2016/02/23 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书