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 中的事件教程
Apr 05 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
深入理解react-router 路由的实现原理
Sep 26 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
个人简历自荐信
2013/12/05 职场文书
效能监察建议书
2014/05/19 职场文书
垂直极限观后感
2015/06/08 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL