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 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
Angular2实现的秒表及改良版示例
May 10 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
vue各种事件监听实例(小结)
Jun 24 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
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP 正则表达式小结
2015/02/12 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
javascript格式化指定日期对象的方法
2015/04/21 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python中logging实例讲解
2019/01/17 Python
python3 求约数的实例
2019/12/05 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python如何将装饰器定义为类
2020/07/30 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
二手书店创业计划书
2014/01/16 职场文书
高二化学教学反思
2014/01/30 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
社区工作者感言
2014/03/02 职场文书
市场营销工作计划书
2014/09/15 职场文书
2015年统战工作总结
2015/05/19 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
php png失真的原因及解决办法
2021/11/17 PHP
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技