效果展示 http://hovertree.com/texiao/nav/3/

jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时，会有一个背景遮罩层跟着鼠标移动，效果非常炫酷，图标还是矢量图。

源码下载

效果图如下：

HTML文件代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery SVG图标垂直导航菜单代码 - 何问起</title><base target="_blank" />

<link rel="stylesheet" href="http://hovertree.com/texiao/nav/3/css/style.css">

    <style>

        body{

    background: #494A5F;

    color: #D5D6E2;

    font-weight: 500;

    font-size: 1.05em;

}

        a{color:mediumvioletred}

    </style>

</head>

<body>

    <div style="text-align:center;margin:5px 0; font:normal 14px/24px 'MicroSoft YaHei';">

        <h1>jQuery SVG图标垂直导航菜单</h1>

        <!--何问起提示：菜单开始-->

          <div class="menu-container">

            <menu>

                <a href="http://hovertree.com">

                    <menuitem>

                        <img src="http://hovertree.com/texiao/nav/3/img/144211.svg" />

                        avocado

                    </menuitem>

                </a>

                <a href="http://hovertree.com/menu/texiao/">

                    <menuitem>

                        <img src="http://hovertree.com/texiao/nav/3/img/144207.svg" />

                        banana

                    </menuitem>

                </a>

                <a href="http://hovertree.com/h/bjaf/30dq3r8y.htm">

                    <menuitem>

                        <img src="http://hovertree.com/texiao/nav/3/img/144210.svg" />

                        cherry

                    </menuitem>

                </a>

                <a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">

                    <menuitem>

                        <img src="http://hovertree.com/texiao/nav/3/img/144198.svg" />

                        eggplant

                    </menuitem>

                </a>

            </menu>

            <div class="sliding-bar"></div>

        </div>

        <!--何问起提示：菜单结束-->

        <p>请移动光标到菜单项上。适用浏览器：Chrome、Edge、FireFox、Opera、傲游、360、搜狗、世界之窗等新版浏览器。</p>

        <p>

            来源：<a href="http://hovertree.com/" target="_blank">何问起</a>

            <a href="http://hovertree.com/menu/texiao/">网页特效</a>

            <a href="http://hovertree.com/h/bjaf/buik5tfi.htm">代码说明</a>

        </p>

    </div>

<script src="http://down.hovertree.com/jquery/jquery-3.0.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(window).ready(function(){

      initMenu();

    });

    $('menuitem').hover(function(){

      var offset = $(this).offset();

      $('.sliding-bar').offset(offset);

    });

    $('menu').hover(function(){

      $('.sliding-bar').css({opacity:1});

    },function(){

      $('.sliding-bar').css({opacity:0});

    })

    var initMenu = function () {

      var $initElem = $('menuitem:first-of-type');

      var initOffset = $initElem.offset();

      var initSize = {

        width: $initElem.css('width'),

        height: $initElem.css('height')

      }

      $('.sliding-bar')

        .offset(initOffset)

        .css(initSize)

    }

         // hwq2.com

</script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/buik5tfi.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery漂亮图标的垂直导航菜单的更多相关文章

  1. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  2. html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）

    这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...

  3. html自定义垂直导航菜单（加强版--自定义传入menu参数，支持JSONArray、JSArray、JSONObject、JSObject）

    在上一篇中我简单写了个html自定义垂直导航菜单,缺点很明显,里面的数据是固定死的,不能动态更改数据. 这里我重写了一个修改版的垂直二级导航菜单,将原先的menuBox.init(config);修改 ...

  4. html自定义垂直导航菜单

    html自定义垂直导航菜单(目前只支持上级+下级两级菜单) 由于工作的需要,昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单,可以通过js配置的方式初始化菜单box(测试环境:chrome 49 ...

  5. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  6. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  8. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  9. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

随机推荐

  1. [备忘]删除SQL Server中无登录名的用户

    这个问题通常会在还原虚拟主机的备份SQL文件后发生,原先在虚拟主机上的用户会被还原到本地,但是本地没有权限对其进行操作. SELECT N'ALTER AUTHORIZATION ON SCHEMA: ...

  2. 解决方法of未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

    在开发的一个报表转换功能涉及到Excel97-2003(.xls)文件的导入.使用oledb来读取excel数据.代码为: public static DataSet LoadDataFromExce ...

  3. Java程序员的日常——存储过程知识普及

    存储过程是保存可以接受或返回用户提供参数的SQL语句集合.在日常的使用中,经常会遇到复杂的业务逻辑和对数据库的操作,使用存储过程可以进行封装.可以在数据库中定义子程序,然后把子程序存储在数据库服务器, ...

  4. Java的概述以及语法

    Java的语法分为标示符和数据类型 Java的概述: 一些手打的: long l = 12345; //隐式转换 int a = (int)121234567L; //强制转换 float f =12 ...

  5. salesforce 零基础学习（二十四）解析csv格式内容

    salesforce中支持对csv格式的内容批量导入,可以使用dataloader,然而有些情况下,当用户没有相关权限使用dataloader导入情况下,就的需要使用VF和apex代码来搞定. 基本想 ...

  6. 每天一个linux命令（19）：find 命令概览

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...

  7. HTTP学习四：SPDY和HTTP/2.0

    1 HTTP1.0/1.1与HTTPS的不足 1.1 HTTP1.0/1.1不足 单路连接 HTTP 协议的最大弊端就是每个 TCP 连接只能对应一个 HTTP 请求,即每个 HTTP 连接只请求一个 ...

  8. 快速入门系列--JMeter压测工具

    今天的年会已过,仍然是空手而归,不过俺坚信能让生活稳定永远都是努力.由于隔壁组负责年会的抢红包项目,因而趁此机会把通过工具模拟高并发的知识补了补,通过和身边大师的交流,总算是对压力测试有了个简要的了解 ...

  9. 使用BCP导出导入数据

    bcp 实用工具可以在 Microsoft SQL Server 实例和用户指定格式的数据文件间大容量复制数据. 使用 bcp 实用工具可以将大量新行导入 SQL Server 表,或将表数据导出到数 ...

  10. TSql Output 用法

    第一部分:TSql Output 关键字有两种应用场景 1,作为存储过程的参数类型,从存储过程中返回数据 2,返回受 INSERT.UPDATE.DELETE 或 MERGE 语句影响的各行中的信息, ...