jquery实现清新实用的网页菜单效果


Posted in Javascript onAugust 28, 2015

本文实例讲述了jquery实现清新实用的网页菜单效果。分享给大家供大家参考。具体如下:

这是一款应用了jQuery插件来实现的网页菜单,看上去十分清新实用,来自美国Flickr网站,不知道Flickr网站的朋友自己去查。这款菜单在用户点击了主菜单项的时候,会滑出二级的子菜单,菜单前边带有小图标,增加了人性化体验。

运行效果截图如下:

jquery实现清新实用的网页菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML"> 
<html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 <title>JQuery Flickr Tooltip Menu二级菜单</title> 
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
 <script type="text/javascript"> 
  $(function() {
  $(".btmiddle").click(function() {
   if ($(".btmiddle").hasClass("bt")) {
   $(".btmiddle").removeClass("bt");
   $(".btmiddle").addClass("clicked");
   $("#menu").show();
   } else {
   $(".btmiddle").removeClass("clicked");
   $(".btmiddle").addClass("bt");
   $("#menu").hide();
   }
  });
  });
 </script> 
 <style type="text/css"> 
* {
 font-family: Arial, "Free Sans";
}
#box {
 margin-top: 20px;
}
.bt, .clicked {
 height: 20px;
 color: #666;
 font-size: 13px;
 padding: 4px 10px;
 text-decoration: none;
 background: #f9f9f9;
}
#box .bt {
 background: -moz-linear-gradient(top, #fff, #f3f3f3);
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
 /* For Internet Explorer 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3);
 /* For Internet Explorer 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f3f3f3)";
}
#box .bt:hover {
 background: #f3f3f3;
 background: -moz-linear-gradient(top, #fff, #e9e9e9);
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
 /* For Internet Explorer 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9);
 /* For Internet Explorer 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e9e9e9)";
}
#box .bt:active, .clicked {
 background: #e9e9e9;
 background: -moz-linear-gradient(top, #e9e9e9, #fff);
 background: -webkit-gradient(linear, left top, left bottom, from(#e9e9e9), to(#fff));
 /* For Internet Explorer 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff);
 /* For Internet Explorer 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#e9e9e9, endColorstr=#ffffff)";
}
.btleft {
 border: 1px solid #e3e3e3;
 -webkit-border-radius: .5em 0 0 .5em;
 -moz-border-radius: .5em 0 0 .5em;
 border-radius: .5em 0 0 .5em;
}
.btleft span {
 font-size: 15px;
}
.btmiddle {
 border: 1px solid #e3e3e3;
 border-width: 1px 0;
 margin: 0 -4px;
}  
.btright {
 border: 1px solid #e3e3e3;
 -webkit-border-radius: 0 .5em .5em 0;
 -moz-border-radius: 0 .5em .5em 0;
 border-radius: 0 .5em .5em 0;
}
.btmiddle span, .btright span {
 font-size: 9px;
 position: relative;
 top: -2px;
}
#menu {
 margin: 10px 0 0 100px;
 display: none;
}
#triangle {
 border: 1px solid #d9d9d9;
 border-width: 2px 0 0 2px;
 width:10px;
 height:10px;
 /* for firefox, safari, chrome, etc. */
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform:rotate(45deg);
 z-index: 1;
 position: relative;
 bottom: -4px;
 margin-left: 25px;
 background: #fff;
}
#tooltip_menu {
 background: #fff;
 -webkit-border-radius: .5em;
 -moz-border-radius: .5em;
 border-radius: .5em;
 width: 220px;
 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
 -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.5);
 box-shadow: 0px 0px 3px rgba(0,0,0,.5);
 padding: 2px;
}
#tooltip_menu a {
 z-index: 2;
 padding: 0 0 7px 2px;
 display: block;
 text-decoration: none;
 color: #0066cc;
 font-size: 13px;
}
#tooltip_menu a:hover {
 background: #0066cc;
 color: #fff;
}
#tooltip_menu a img {
 position: relative;
 top: 5px;
 border: 0;
}
.menu_top {
 -webkit-border-radius: .5em .5em 0 0;
 -moz-border-radius: .5em .5em 0 0;
 border-radius: .5em .5em 0 0;
}
.menu_bottom {
 -webkit-border-radius: 0 0 .5em .5em;
 -moz-border-radius: 0 0 .5em .5em;
 border-radius: 0 0 .5em .5em;
}
#links {
  padding: 10px;
}
#links a {
  font-size: 11px;
  color: #0066cc;
}
#links a:hover {
  text-decoration: none;
}
</style> 
</head> 
<body> 
<div id="box"> 
 <a href="#" class="bt btleft"><span>☆</span> Favorite</a> 
 <a href="#" class="bt btmiddle">Actions <span>▼</span></a> 
 <a href="#" class="bt btright">Share this <span>▼</span></a> 
</div> 
<div id="menu"> 
 <div id="triangle"></div> 
 <div id="tooltip_menu"> 
 <a href="#" class="menu_top"> 
  <img src="images/1.png"/> 
  View all sizes
 </a> 
 <a href="#"> 
  <img src="images/2.png"/> 
  View slideshow
 </a> 
 <a href="#" class="menu_bottom"> 
  <img src="images/3.png"/> 
  View Exif info
 </a> 
 </div> 
</div> 
</body> 
</html>

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

Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 #Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 #Javascript
js实现简单折叠、展开菜单的方法
Aug 28 #Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 #Javascript
js实现超简单的展开、折叠目录代码
Aug 28 #Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 #Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 #Javascript
You might like
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue实现文字加密功能
2019/09/27 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
机器学习10大经典算法详解
2017/12/07 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python list多级排序知识点总结
2019/10/23 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
工业自动化专业毕业生推荐信
2013/11/18 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
青年文明号事迹材料
2014/01/18 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
拾金不昧感谢信
2015/01/21 职场文书
三行辞职书范文
2015/02/26 职场文书
清洁工个人工作总结
2015/03/05 职场文书
大学生社会实践感想
2015/08/11 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
使用springMVC所需要的pom配置
2021/09/15 Java/Android
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python