效果展示 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. Linux grep命令和正则表达式

    介绍 grep是一个功能强大的文本搜索命令,可以用它来搜索某个文件中是否包含指定的搜索内容,它可以利用正则表达式来做复杂的筛选操作,它还可以为其它命令传输给管道的筛选,比如我们常用到的分析单个进程的操 ...

  2. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（一）Hello World!

    ReactMixhttps://github.com/xueduany/react-mix自从昨天发布起来,得到了不少小伙伴的热捧,很高兴帮助大家解决了憋在心中很久的问题“如果我只会HTML,Css, ...

  3. java 堆栈分析

    再次,研究了一个下午的jhat好jmap.从一开始惊呆.懵懂于那样大量而无聊乏味的数据,到现在有那么一点点收货.赶紧记录下来.没办法,悟性太低... C:\Users\Administrator> ...

  4. H5常用代码：适配方案2

    前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接 ...

  5. 关于STM32的外部引脚中断的问题

    今天想用自己以前的比较干净的工程模板做一个东西,,,,,,,在添加上引脚中断的时候,,突然想知道自己配置的中断优先级是否正确执行,,,,, 以前刚学习32的时候测试过是可以的,,不过今天发现了一个大问 ...

  6. Atitit 信用卡与会员卡（包括银行卡）的发展之路

    Atitit 信用卡与会员卡(包括银行卡)的发展之路 实现跨机构卡片内金额的流动解决方案 1.1. 财务卡片本质上都是会员卡1 1.2. 卡片的发展阶段1 2. 实现跨机构卡片内金额的流动解决方案(加 ...

  7. JavaScript对浏览器的URL进行编码、解码

    关于url编码,js有三个函数.有三个解码方法,escape,encodeURI,encodeURIComponent().有三个解码方法,unescapse,decodeURI,decodeURIC ...

  8. git回滚到任意版本

    git回滚到任意版本 先显示提交的log $ git log -3 commit 4dc08bb8996a6ee02f Author: Mark <xxx@xx.com> Date: We ...

  9. 动手搭个wordpress

    看到很多人都是自己搭建博客服务器,然后一切都在自己的掌控之下,这样就不存在什么迁移,数据安全之类的问题,当然需要自己搞个空间了,不过现在都便宜的不行,$15/year,也是醉了.我不怎么写博客,但是个 ...

  10. 《C与指针》第八章练习

    本章问题 1.根据下面给出的声明和数据,对每个表达式进行求值并写出它的值.在对每个表达式进行求值时使用原先给出的值(也就是说,某个表达式的结果不影响后面的表达式).假定ints数组在内存中的起始位置是 ...