jQuery SVG图标垂直导航菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery SVG图标垂直导航菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>

<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="menu-container">
	<menu>
		<menuitem>
		<img src="img/144211.svg" />
		avocado
		</menuitem>
		<menuitem>
		<img src="img/144207.svg" />
		banana
		</menuitem>
		<menuitem>
		<img src="img/144210.svg" />
		cherry
		</menuitem>
		<menuitem>
		<img src="img/144198.svg" />
		eggplant
		</menuitem>    
	</menu>
	<div class="sliding-bar"></div>
</div>

<script src="js/jquery-2.1.1.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)
	}
</script>
</body>
</html>

CSS代码(style.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","����","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;outline:none;text-decoration:none;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
*{box-sizing:border-box;font-family:Raleway;}
body{text-align:center;/*background-color:#f96;*/
}
.menu-container{display:inline-block;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);background-color:#fff;z-index:0;box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.menu-container menu{display:block;position:relative;width:15em;padding:.25em;border:2px solid #c99;margin:0;z-index:2;}
.menu-container menu menuitem{display:block;height:4em;line-height:4em;padding:0 1em;cursor:pointer;background:transparent;text-align:left;color:#666;font-weight:500;letter-spacing:.02em;}
.menu-container menu menuitem:hover{color:#000;}
.menu-container menu menuitem img{padding-right:1em;height:2em;vertical-align:middle;}
.menu-container .sliding-bar{position:absolute;background-color:#aef;transition:all .2s ease;z-index:1;opacity:0;}
.credit{position:absolute;bottom:1em;left:1em;font-size:13px;font-weight:500;color:#fff;}
.credit a{text-decoration:none;font-weight:600;color:#ff9;}

附件:下载该文件资源,减少时间成本(增值服务)