魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果。分享给大家供大家参考。具体如下:
偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力。鼠标放到菜单上,菜单的下边会有一条横线在滑动。一直想找类似的效果学一下。结果,不是忘记有类似效果的网站的网址,就是压根儿找不到。。又不知道怎么描述,今天总算碰到了,真给力。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Meizu魅族导航菜单
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;}
Meizu
|
魅族
|
脚本之家
魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果相关推荐
- html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
- HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...
- php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...
- 导航背景变换 php,jQuery实现的背景动态变化导航菜单效果
本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变 ...
- jquery实现电商网站分类导航菜单
一.HTML部分 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
- android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
- 导航菜单 gooey-menu jQuery液态融合(gooey)样式导航菜单插件(精)
gooey-menu是一款基于SVG过滤器的液态融合(gooey)样式导航菜单jQuery插件.通过该插件你可以非常轻松的制作出各种gooey样式的环形菜单特效. 查看原文 查看在线演示Demo和更多 ...
最新文章
- 在把 png 或者 gif“储存为 web 所用格式”时,勾选“交错”选项
- 天气正好,hello world!
- 第十四章 Linux核心资源
- vs2017怎么安装python包,vs2017安装pygame,vs2017安装python第三方包
- 父进程给子进程传参数
- 深入理解C语言(转载)
- vc6.0垃圾文件清理工具_C盘空间逐渐被垃圾文件填满,详细清理方法介绍
- html绘制小球并跟随鼠标移动,Canvas跟随鼠标炫彩小球的实现
- Android实现立体滚轮控件,Camera和Matrix实现真正的3D(WheelView)滚轮控件
- VGG16和VGG19网络结构图
- java 回收器有几种_Java垃圾回收器种类
- 甲骨文裁员,华大人员瘦身优化,亚马逊鼓励离职?
- matlab的基本函数,matlab基本函数
- 绑架、做空、造假…是谁搞垮了曾经的“网红公司”网秦?
- 小说APP开发,实现小说阅读的翻页动画
- python常量列表_秦路天善智能python学习笔记1-数据类型,常量,变量,列表,字典,元组...
- sumifs(多条件求和,多条件计数,数据分类汇总利器)、countifs
- Webhooks应用概述
- Improving Entity Linking by Modeling Latent Relations between Mentions
- 处理器中的流水线技术
热门文章
- 2. ROS安装(官网教程/简单好用)
- SXMB_MONI传输记录报错:具有无效值 BE #SAP #PO #REST
- C++实现推箱子小游戏(源代码)
- Java基础加强重温_13:XML(可拓展标记语言)、XML语法、XML约束、XML解析(Dom4j,JAXP)、Dom4j基本使用、Xpath表达式(XML路径语言)、XML解析综合案例
- Qt 5.15 安装步骤
- USB host、usb device、USB OTG的判断
- Jenkins自动化部署前端Vue项目
- tmail邮箱服务器,邮件服务器(一)Sendmail服务器1
- 云上数据泄露DLP技术有哪些变化
- wordpress安装插件提示“wordpress发生意外错误,可能WordPress.org或服务器配置文件存在问题”...