首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现很酷的网页顶部图标下拉菜单效果

Posted in Javascript onAugust 22, 2015

本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果。分享给大家供大家参考。具体如下：

兼容IE和火狐的顶部菜单栏，带图标的图文菜单，还有右上角的下拉导航效果，一个演示包括了两种菜单，都是很实用的效果，只使用了jquery就实现了。如果你的网站上此前用有jquery插件，那么整合起来就更方便了，点击运行可预览菜单效果。

运行效果截图如下：

jquery实现很酷的网页顶部图标下拉菜单效果

在线演示地址如下：

具体代码如下：

<!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>jquery hover顶部导航栏菜单</title>
<style>
@charset "utf-8";
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,figure{margin:0;padding:0}
html{background-color:#e9ecec}
table{table-layout:fixed;border-collapse:collapse}
section,article,aside,header,footer,nav,dialog,figure{display:block}
.clearfix:after{content:"\20";display:block;height:0;line-height:0;font-size:0;clear:both}
body,button,input,select,textarea,td,th{color:#333;font:12px/1.5 tahoma,arial,\5b8b\4f53}
h1,h2,h3,h4,h5,h6{font-size:100%}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#06C}
a:hover{text-decoration:underline;color:#06C}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
legend{color:#000}
fieldset,img{border:0 none}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
input:focus{outline:none}
.hd-main{height:60px;background:#fff;z-index:15;border-bottom:#b3b3b3 1px solid;box-shadow:0 0 5px #333}
.f-icon{background-image:url('images/frame-icon.png');background-repeat:no-repeat}
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
.hd-main .has-pulldown{cursor:pointer;position:relative;*z-index:10000}
.hd-main .pulldown{position:absolute;cursor:default;display:none;top:30px;left:0}
.hd-main .pulldown .arrow{*margin-bottom:-1px;_margin-bottom:0;height:0;width:0;font-size:0;line-height:0;border-width:7px;border-style:solid;border-color:transparent transparent #F6F6F9 transparent;_filter:chroma(color=tomato);_border-color:tomato tomato #F6F6F9 tomato;position:relative;display:block;left:20px;z-index:2}
.hd-main .pulldown .content{background:#F6F6F9;color:#333;text-align:left;border-radius:3px;border:rgb(175,175,175) 1px solid;border-width:0 1px 1px 1px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;z-index:1}
.hd-main .pulldown-canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;filter:alpha(opacity=0)}
.hd-main .logo{background-image:url('images/logo.png');background-repeat:no-repeat;display:block;height:36px;width:175px;float:left;margin-left:10px;background-position:0 0;margin-top:5px;display:inline}
.hd-main .navs{padding:0 0 3px 25px;height:45px;float:left}
.hd-main .navs a,.hd-main .info a,.hd-main .navs a:visited,.hd-main .info a:visited,.hd-main .navs a:active,.hd-main .info a:active{color:#d8d8d8}
.hd-main .navs a:hover,.hd-main .navs a:active{text-decoration:none;background-color:#0f0f0f}
.hd-main .navs .def-nav,.hd-main .navs .pulldown-nav,.hd-main .navs .separate{display:block;float:left;height:48px;font:18px/30px "Microsoft YaHei","Microsoft JhengHei";color:#d8d8d8;text-align:center;width:90px;line-height:48px}
.hd-main .navs .def-nav .app-url{left:185px;width:641px;top:48px}
.hd-main .navs .def-nav .pulldown-canvas-url{width:575px;height:109px}
.hd-main .navs .def-nav .app-url .arrow{left:140px}
.hd-main .navs .app-url .content{padding:17px 0 0 22px;height:91px}
.hd-main .navs .app-url .content a,.hd-main .navs .app-url .content a:hover{color:#333}
.hd-main .navs .app-url .li{cursor:pointer;padding-top:8px;width:66px;height:66px;border-radius:3px;display:block;float:left;text-align:center}
.hd-main .navs .app-url .li:hover{background-color:#e0e1e5}
.hd-main .navs .app-url .li .icon{margin:0 auto;width:35px;height:38px;display:block;background:url('images/dropdown_menu.png') no-repeat}
.hd-main .navs .app-url .li:hover .icon{background-image:url('images/dropdown_menu_hover.png')}
.hd-main .navs .app-url .tongxunlu .icon{background-position:-35px 0}
.hd-main .navs .app-url .xiangce .icon{background-position:-70px 0}
.hd-main .navs .app-url .note .icon{background-position:-105px 0}
.hd-main .navs .app-url .duanxin .icon{background-position:-140px 0}
.hd-main .navs .app-url .zhaohui .icon{background-position:-175px 0}
.hd-main .navs .app-url .youxi .icon{background-position:-210px 0}
.hd-main .navs .app-url .jiankang .icon{background-position:-245px 0}
.hd-main .navs .app-url .wenzhang .icon{background-position:-280px 0}
.hd-main .navs .app-url .li .text{height:30px;display:block;font:14px/30px "Microsoft YaHei","Microsoft JhengHei"}
.hd-main .navs .separate{margin:0;height:48px;width:2px;background:#2A2B2D}
.hd-main .navs .pulldown-nav{position:relative}
.hd-main .navs .pulldown-nav em{position:absolute;display:block;left:69px;top:18px;height:12px;width:12px;font-size:0;background-position:-89px -45px}
.hd-main .navs .pulldown-nav:hover .f-icon,.hd-main .navs .pulldown-nav:active .f-icon{position:absolute;display:block;right:11px;top:18px;height:12px;width:12px;font-size:0;background-position:-89px -55px}
.hd-main .navs .current,.hd-main .navs .current .pulldown-nav{font-weight:bold;color:#FFF;display:inline-block;width:90px;height:49px;background-color:#0f0f0f;text-align:center;line-height:48px}
.hd-main .navs .current:hover{color:#ECECEC}
.hd-main .navs .current .hover{background-color:#f6f6f6;color:#333;}
.hd-main .info,.hd-main .info ul{height:36px;float:right;text-align:right;margin-top:3px;white-space:nowrap}
.hd-main .info a{color:#d8d8d8}
.hd-main .info a:hover{color:#FFF;text-decoration:underline}
.hd-main .info .info-i{padding:0 10px;margin:10px 0;display:inline-block;*display:inline;*zoom:1;height:16px;border-right:#393939 1px solid;color:#d8d8d8;font:12px/16px "SimSun"}
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
.hd-main .info .has-pulldown{padding-right:28px}
.hd-main .info .has-pulldown .pull-arrow{position:absolute;display:block;right:10px;top:1px;height:12px;width:12px;font-size:0;background-position:-89px -45px}
.hd-main .info .no-separate{border:none}
.hd-main .info .user-name{position:relative;padding-left:24px}
.hd-main .info .user-name .name{display:inline-block;display:inline\0;white-space:nowrap;max-width:75px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.hd-main .info .user-name .identity{position:absolute;top:0;left:0;height:16px;width:16px;background-position:-89px -88px}
.hd-main .info .user-name .is-vip{background-position:-89px -68px}
.hd-main .info .user-info,.hd-main .info .more-info{top:9px;left:auto;right:-24px;width:116px}
.hd-main .info .notice-nu{display:inline-block;padding-left:4px;background-position:-86px -109px;height:14px;-webkit-text-size-adjust:none;font-size:10px;font-style:normal}
.hd-main .info .notice-nu .f-icon{display:inline-block;padding-right:4px;background-position:right -109px;color:#FFF}
.hd-main .info .user-info .arrow{left:70px;*left:-32px}
.hd-main .info .user-info .content,.hd-main .info .more-info .content{padding:10px 0;height:180px}
.hd-main .info .more{padding:0;display:inline;line-height:inherit;background:none}
.hd-main .info .more-info .content{height:280px}
.hd-main .info .user-info .content a,.hd-main .info .more-info .content a{display:block;padding-left:33px;height:30px;line-height:30px;color:#888}
.hd-main .info .user-info .content a:hover,.hd-main .info .more-info .content a:hover{color:#333;text-decoration:none;background:#e0e1e5}
.hd-main .info .user-info .li,.hd-main .info .more-info .li{display:block;padding:2px 0;height:30px}
.hd-main .info .user-info .separate-li,.hd-main .info .more-info .separate-li{display:block;margin:3px 11px;border-top:#EBEBEC 1px solid;border-bottom:#FFF 1px solid}
.hd-main .info .more-info{right:0}
.hd-main .info .more-info .arrow{left:94px;*left:-8px}
</style>
</head>
<body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".def-nav,.info-i").hover(function(){
    $(this).find(".pulldown-nav").addClass("hover");
    $(this).find(".pulldown").show();
  },function(){
    $(this).find(".pulldown").hide();
    $(this).find(".pulldown-nav").removeClass("hover");
  });
});
</script>
<div class="hd-main clearfix" id="header">
  <a class="logo" href=""></a>
  <div class="navs">
    <a class="def-nav" href="">主页</a>
    <span class="separate"></span>
    <div class="def-nav current has-pulldown-special">
      <a class="pulldown-nav" href=""><em class="f-icon"></em>办公</a>
      <div class="pulldown app-url">
        <div class="content">
          <a class="li disk" href="">
            <span class="icon"></span>
            <span class="text">网盘</span>
          </a>
          <a class="li tongxunlu" href="">
            <span class="icon"></span>
            <span class="text">通讯录</span>
          </a>
          <a class="li xiangce" href="">
            <span class="icon"></span>
            <span class="text">相册</span>
          </a>
          <a class="li wenzhang" href="">
            <span class="icon"></span>
            <span class="text">文章</span>
          </a>
          <a class="li note" href="">
            <span class="icon"></span>
            <span class="text">记事本</span>
          </a>
          <a class="li duanxin" href="">
            <span class="icon"></span>
            <span class="text">短信</span>
          </a>
          <a class="li zhaohui" href="">
            <span class="icon"></span>
            <span class="text">手机找回</span>
          </a>
          <a class="li youxi" href="">
            <span class="icon"></span>
            <span class="text">游戏</span>
          </a>
          <a class="li jiankang" href="">
            <span class="icon"></span>
            <span class="text">健康</span>
          </a>
        </div>
      </div>
    </div>
    <span class="separate"></span>
    <a class="def-nav" href="">应用</a>
  </div>
  <div class="info">
    <ul>
      <li class="info-i user-name has-pulldown">
        <em class="f-icon pull-arrow"></em>
        <a class="f-icon identity" href="" title="未开通VIP"></a>
        <span class="name top-username">李四</span>
        <div class="pulldown user-info">
          <em class="arrow"></em>
          <div class="content">
            <span class="li"><a href="">个人资料</a></span>
            <span class="li"><a href="">购买容量</a></span>
            <span class="li"><a href="">免费扩容</a></span>
            <span class="li"><a href="">会员中心</a></span>
            <span class="separate-li no-height"></span>
            <span class="li"><a href="javascript:;" id="signout">退出</a></span>
          </div>
        </div>
      </li>
      <li class="info-i default-text">
        <a class="notice" href="" id="notificationTrigger">通知</a>
        <em class="f-icon notice-nu" id="noticeNoParent">
          <b class="f-icon" id="noticeNo">0</b>
        </em>
      </li>
      <li class="info-i no-separate default-text has-pulldown">
        <em class="f-icon pull-arrow"></em>
        <span class="more" hideFocus="hideFocus">更多</span>
        <div class="pulldown more-info">
          <em class="arrow"></em>
          <div class="content">
            <span class="separate-li no-height"></span>
            <span class="li"><a href="">收藏工具</a></span>
            <span class="li"><a href="">历史记录</a></span>
            <span class="li"><a href="">版本更新</a></span>
            <span class="li"><a href="">帮助中心</a></span>
            <span class="li"><a href="">问题反馈</a></span>
            <span class="li"><a href="">服务协议</a></span>
            <span class="li"><a href="">权利声明</a></span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

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

jquery实现很酷的网页顶部图标下拉菜单效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
微信小程序如何获取地址
Dec 24 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 #Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 #Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 #Javascript
MySQL面试题(19) Javascript面试题(44) UNIX面试题(27) J2EE面试题(19) Ruby面试题(15) EJB面试题(46) PYTHON面试题(27) 软件测试工程师面试题(53) Servlet面试题(20) 软件工程师面试题(40)
You might like
PHP 图片水印类代码
2012/08/27 PHP
PHP类的反射用法实例
2014/11/03 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
推荐11个实用Python库
2015/01/23 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
通过实例解析Python return运行原理
2020/03/04 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Meli Melo官网：名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
装修致歉信
2014/01/15 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
教师师德反思材料
2014/02/15 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
开工仪式策划方案
2014/05/23 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书