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

效果展示 http://hovertree.com/texiao/nav/3/jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果展示 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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120329.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C语言基础:哪儿来的32766

    这篇文章通过一个简单的示例程序来介绍一下如何结合使用IDE来学习C语言。

  • git 清除用户名密码

    清空所有用户名和密码:gitconfig–system–unsetcredential.helper只用这一个命令就可以,如果不好使可以参照下面命令查看config配置:gitconfig–list查看git用户名:gitconfiguser.name清除缓存的用户名和密码:gitcredential-manageruninstall更改全局用户名:g…

  • CAP定理整理_craig定理

    CAP定理整理_craig定理CAP定理是分布式系统设计中最基础、最关键的理论,CAP定理又称CAP原则,指的是在一个分布式系统中,Consistency(一致性)、Availability(可用性)、Partitiontolerance(分区容错性),最多只能同时三个特性中的两个,三者不可兼得CAP的定义Consistency(一致性):“allnodesseethesamedataatthe…

    2022年10月30日
  • java getmethod 使用_java – 使用子类作为方法参数调用getMethod「建议收藏」

    java getmethod 使用_java – 使用子类作为方法参数调用getMethod「建议收藏」是否可以调用一个方法,其中参数对象或参数类是一个子类,并且该方法本身将超类作为参数?我试图调用这个方法publicvoidsetNewProblem(Problemproblem);具体实现了抽象类的问题.不幸的是,我得到了NoSuchMethodException异常.我调用这样的调用:Methodmethod=model.getClass().getMethod(“set”+p…

  • 程序员斗图专用表情包,做技术群里最靓的仔!「建议收藏」

    程序员斗图专用表情包,做技术群里最靓的仔!「建议收藏」我们斗图的,不是!我们搞技术的,每天在群里面除了不聊技术,什么都聊!今天小编收集了一堆程序员专用的斗图表情!!分分钟成为一名程序员中的斗图大神!虽然工作敲代码挺枯燥的,要是有了这些神图,就增加很多欢乐了,用图碾压对方,这个爽哦~~哈哈,废话截止,你用的最多的是哪张表情呢?我自己是一名从事了5年前端的老程序员,辞职目前在做讲师,今年年初我花了一个月整理了一份最适合2019年学习的web前…

  • Vue进阶(幺零七):arr.forEach() 跳出循环

    Vue进阶(幺零七):arr.forEach() 跳出循环我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如要退出整个循环呢?使用break会报错,使用return也不能跳出循环。使用break将会报错:vararr=[1,2,3,4,5];varnum=3;arr.forEach(function(v){if(v==num){break;}console.log(v);});使…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号