效果展示 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. Oracle常见名词解析

    创建用户 概述:在oracle中要创建一个新的用户使用create user语句,一般是具有dba(数据库管理员)的权限才能使用. create user 用户名 identified by 密码; ...

  2. js模仿新浪微博限制字数输入

    功能:实现新浪微博输入字数提醒功能:最多输入140个字,当输入字时,上面提示部分字数发生变化,如果字数小于25,字体颜色变红:当可输入字数为0时,强制不能输入,如果用中文输入法 一次性输入很多字,那么 ...

  3. Atitit.java c#这类编程语言的设计失败点attilax总结

    Atitit.java c#这类编程语言的设计失败点attilax总结 1. Npe1 2. Api粒度过小而又没有提供最常用模式1 3. checked exception(jeig n jyejy ...

  4. Android笔记——探究活动

    1.活动是什么       活动(Activity)是最容易吸引到用户的地方了,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一个应用程序中可以包含零个或多个活动,但不包含任何活动的应用程序 ...

  5. WPF入门教程系列十二——依赖属性（二）

    二. 依赖属性的优先级 由于WPF 允许我们可以在多个地方设置依赖属性的值,所以我们就必须要用一个标准来保证值的优先级别.比如下面的例子中,我们在三个地方设置了按钮的背景颜色,那么哪一个设置才会是最终 ...

  6. unity生成的WP8.1工程的Title本地化实现

    不同于WP本身工程的实现,unity的工程在package.appxmanifest文件中已经定义了 <Resources> <Resource Language="x-g ...

  7. VS报错：The build tools for v140 (Platform Toolset = 'v140') cannot be found

    VS低版本打开高版本常会出现的错: The build tools for v140 (Platform Toolset = 'v140') cannot be found. To build usi ...

  8. Oracle 11g系列：数据库

    1.创建Oracle数据库 创建Oracle数据库的最常用工具为Database Configuration Assistant(数据库配置助手),依次选择[开始]|[所有程序]|[Oracle-Or ...

  9. python--爬虫入门（八）体验HTMLParser解析网页，网页抓取解析整合练习

    python系列均基于python3.4环境  基本概念 html.parser的核心是HTMLParser类.工作的流程是:当你feed给它一个类似HTML格式的字符串时,它会调用goahead方法 ...

  10. Android基于mAppWidget实现手绘地图（十三）–如何显示/隐藏任意类型的地图对象

    这个很简单,想要显示或隐藏任意类型的地图对象,首先要对地图对象进行分类.不同类型的地图对象放置到不同的地图图层上,然后控制地图图层的显示/隐藏即可. 实例: Layer sportsLayer = m ...