jQuery漂亮图标的垂直导航菜单

时间：2023-01-27 21:01:36

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

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

源码下载

效果图如下：
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=&quot ...

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

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

随机推荐

  1. windows进程中的内存结构&lbrack;转载&rsqb;

    在阅读本文之前,如果你连堆栈是什么多不知道的话,请先阅读文章后面的基础知识. 接触过编程的人都知道,高级语言都能通过变量名来访问内存中的数据.那么这些变量在内存中是如何存放的呢?程序又是如何使用这些变 ...

  2. Java去除掉HTML里面所有标签的两种方法——开源jar包和自己写正则表达式

    Java去除掉HTML里面所有标签,主要就两种,要么用开源的jar处理,要么就自己写正则表达式.自己写的话,可能处理不全一些自定义的标签.企业应用基本都是能找开源就找开源,实在不行才自己写…… 1,开 ...

  3. &lbrack;ES6&rsqb; 22&period; Const

    'const' keyword is for creating a read only variable, something you can never change once created. ' ...

  4. UITableView Cell 弹簧动画效果

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath ...

  5. github import repository创建github仓库

    现在,假设我们从零开发,那么最好的方式是先创建远程库,然后,从远程库克隆. 首先,登陆GitHub,创建一个新的仓库,名字叫blog: 1.先创建一个项目仓库 2. 我们勾选Initialize th ...

  6. groovy regex groups&lpar;groovy正则表达式组&rpar;

    先看一个java正则表达式的例子. import java.util.regex.Matcher; import java.util.regex.Pattern; public class TestM ...

  7. 使用MUI&sol;html5plus集成微信支付需要注意的几点问题

    1)需要在服务器根目录放上证书,从微信开放平台下载 2)客户端组件目录名一定要按照微信要求

  8. 编程语言&comma;执行python程序&comma;变量&lpar;命名规范&rpar;

    编程语言 分类: ​ 计算语言/汇编语言/高级语言 计算语言: ​ 站在计算机的角度,说计算机能听懂的语言,就是直接用二进制编程,直接操作硬件 优点是最底层,执行速度最快 缺点是最复杂,开发效率最低 ...

  9. 如何用TortoiseSVN对文件进行操作

    我们如何用TortoiseSVN修改文件,添加文件,删除文件,以及如何解决冲突等. 添加文件 在检出的工作副本中添加一个Readme.txt文本文件,这时候这个文本文件会显示为没有版本控制的状态,如图 ...

  10. SQL多表查询总结

    前言 连接查询包括合并.内连接.外连接和交叉连接,如果涉及多表查询,了解这些连接的特点很重要.只有真正了解它们之间的区别,才能正确使用. 一.Union UNION 操作符用于合并两个或多个 SELE ...

相关文章