今天闲来无事就使用 jQuery 制作了一款导航产品，给大家分享一下。
jQuery蜂巢状布局导航标签代码是一款六边形蜂窝效果的CSS布局，适合做导航或者关键词展示使用。也可以做网站上的标签云。
效果图
实现原理
主要使用 transform 图片旋转。具体可以参考我的这篇文章：http://www.xttblog.com/?p=498
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>：www.xttblog.com 蜂巢tab切换实例</title>
<meta http-equiv="keywords" content="">
<meta http-equiv="description" content="">
<meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
<meta name="renderer" content="webkit">
<style type="text/css">
.Ct{
width:1000px;
margin:0 auto;
}
.ywPart1{
width: 310px;
margin: 0 auto;
padding: 20px 10px 20px 30px;
}
/**：蜂巢样式***/
.hex {
float: left;
margin-left: 2px;
margin-bottom: -18px;
cursor: pointer;
}
.hex .hex_top {
width: 0;
border-bottom: 20px solid #f0ce8b;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
margin-top: -1px/9/0;
margin-top: 0px/0;
}
.hex .hex_middle {
width: 70px;
height: 30px;
line-height: 30px;
background: #f0ce8b;
text-align: center;
font-family: "宋体";
color: #333333;
}
.hex .hex_bottom {
width: 0;
border-top: 20px solid #f0ce8b;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
margin-top: -1px/9/0;
margin-top: 0px/0;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 38px;
}
.hex-row.odd {
margin-right: 38px;
}
.hex.hexActive .hex_top {
width: 0;
border-bottom: 20px solid #86ccac;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
margin-top: -1px/9/0;
margin-top: 0px/0;
}
.hex.hexActive .hex_middle {
width: 70px;
height: 30px;
line-height: 30px;
background: #86ccac;
text-align: center;
font-family: "宋体";
color: #FFFFFF;
}
.hex.hexActive .hex_bottom {
width: 0;
border-top: 20px solid #86ccac;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
margin-top: -1px/9/0;
margin-top: 0px/0;
}
/**蜂巢样式***/
</style>
</head>
<body>
<div class="Ct">
<div class="ywPart1" id="hexDiv">
<!--
描述：蜂巢
-->
<div class="hex hexActive" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">首页</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle"></div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">java</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">html5</div>
<div class="hex_bottom"></div>
</div>
<div class="hex hex-row even" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">c++</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">数据库</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">敏捷管理</div>
<div class="hex_bottom"></div>
</div>
<div class="hex hex-row" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">业余杂谈</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">css3</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">js</div>
<div class="hex_bottom"></div>
</div>
<div class="hex" name="hexBlcok">
<div class="hex_top"></div>
<div class="hex_middle">其他</div>
<div class="hex_bottom"></div>
</div>
<div class="ClearFloat"></div>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#hexDiv").find("div[name='hexBlcok']").on("click",function(){
$(this).addClass("hexActive");
$(this).siblings("div[name='hexBlcok']").removeClass("hexActive");
});
</script>
</body>
</html>
： » jQuery 实现蜂窝导航菜单
原创文章，作者：6024010，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251200.html