效果展示 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. Unity3D逻辑热更新，第二代舒爽解决方案，L#使用简介

    热更新 天下武功,无坚不破,唯快不破 热更新就是为了更快的把内容推到用户手中. 之前,我设计了C#Light,经过半年多的持续修补,勉强可用,磕磕绊绊.感谢那些,试过,骂过,用过的朋友,在你们的陪伴下 ...

  2. winform 通过webservice向服务器提交图片需要注意的地方

    最近一个winform项目中需要通过拍照或者上传本地文件或者截图的方式把产品图片上传到服务器,最后选择了服务器部署webservice的方式来进行.其中遇到了一些问题记录下来. 不多说,直接上服务端代 ...

  3. EF架构~在T4模版中为所有属性加默认值

    回到目录 在项目开发过程中,出现了一个问题,就是新添加一个非空字段后,原来的程序逻辑需要被重新修改,即将原来的字段添加到程序里,这种作法是非常不提倡的,所以,我通过T4模版将原来的实体类小作修改,解决 ...

  4. PHP中Trait特性

    Trait是自 PHP 5.4.0 起添加的一个新特性,是 PHP 多重继承的一种解决方案.例如,需要同时继承两个 Abstract Class, 这将会是件很麻烦的事情,Trait 就是为了解决这个 ...

  5. 《Effective Java》—— 对于所有对象都通用的方法

    本节主要涉及Object中通用的一些方法,比如equals,hashCode,toString,clone,finalize等等 覆盖equals时请遵守通用约定 equals方法实现的等价关系: 自 ...

  6. Linux运维之道（大量经典案例、问题分析，运维案头书，红帽推荐）

    Linux运维之道(大量经典案例.问题分析,运维案头书,红帽推荐) 丁明一 编   ISBN 978-7-121-21877-4 2014年1月出版 定价:69.00元 448页 16开 编辑推荐 1 ...

  7. MySql数据库乱码解决方法

    MySql数据库乱码解决方法 解决乱码问题一个原则:存取系统使用一致的编码规则. 多使用mysql的原生命令行,这样才能做更多的事情. ​ 第一步: 确认应用系统需要使用的编码 java的默认编码是跟 ...

  8. 使用BCP导出导入数据

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

  9. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  10. KendoUI系列：DatePicker

    1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...