蜂巢式导航菜单代码实例
分类:实例代码
分享一段代码实例,它实现了类似蜂巢式导航菜单。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; border-left: 35px solid transparent; border-right: 35px solid transparent; margin-top: -1px<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; margin-top: 0px<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; } .hex .hex_middle { width: 70px; height: 30px; line-height: 30px; background: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; border-left: 35px solid transparent; border-right: 35px solid transparent; margin-top: -1px<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; margin-top: 0px<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; } .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<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; margin-top: 0px<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; } .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<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; margin-top: 0px<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <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 #f0f0f0; 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: #f0f0f0; text-align: center; font-family: "宋体"; color: #333333; } .hex .hex_bottom { width: 0; border-top: 20px solid #f0f0f0; 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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>; } </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">微博</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 even" 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">应用商店</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">支付</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">P2P业务</div> <div class="hex_bottom"></div> </div> <div class="hex hex-row even" name="hexBlcok"> <div class="hex_top"></div> <div class="hex_middle">VOIP业务</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">安全杀毒</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="ClearFloat"></div> </div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $("#hexDiv").find("div[name='hexBlcok']").on("click",function(){ $(this).addClass("hexActive"); $(this).siblings("div[name='hexBlcok']").removeClass("hexActive"); }); </script> </body> </html>
蜂巢式导航菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于蜂巢式导航菜单代码实例就介绍到这了。
蜂巢式导航菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看。