纯CSS实现六边形布局菜单效果

最新推荐文章于 2023-05-20 23:51:44 发布

weixin_30470857

最新推荐文章于 2023-05-20 23:51:44 发布

阅读量370

点赞数

原文链接：http://www.cnblogs.com/youtianxia/p/3844203.html

版权

利用所学的CSS技术，写了一个有点小难的布局实例，一个六边形的个性导航菜单，为了更加生动，这里在CSS中加入了hover效果，鼠标放在菜单上的时候，菜单变换背景，本例代码中无任何JS代码，完全CSS技术实现，值得参考。

<!DOCTYPE html>
<html>
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>纯CSS实现六边形布局菜单效果丨</title>
<style>
.wrap{margin:100px;width:303px;}
.nav{width:100px;height:58px;background:#339933;display:inline-block;position:relative;line-height:58px;text-align:center;color:#ffffff;font-size:14px;text-decoration:none;float:left;margin-top:31px;margin-right:1px;}
.nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-bottom:30px solid #339933;left:0px;top:-30px;}
.nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-top:30px solid #339933;bottom:-30px;left:0px;}
.a0{margin-left:100px;}
.a1{margin-left:50px;}
.nav:hover{background:#8CBF26;color:#333333;}
.nav:hover s{border-bottom-color:#8CBF26;}
.nav:hover b{border-top-color:#8CBF26;}
</style>
</head>
<body>
    <div class="wrap">
    <a class="nav a0" target="_blank" href="#" _fcksavedurl="#"><s></s>菜单1<b></b></a>
    <a class="nav a1" target="_blank" href="#" _fcksavedurl="#"><s></s>菜单2<b></b></a>
    <a class="nav a2" target="_blank" href="#" _fcksavedurl="#"><s></s>菜单3<b></b></a>
    <a class="nav a3" target="_blank" href="#" _fcksavedurl="#"><s></s>菜单4<b></b></a>
    <a class="nav a4" target="_blank" href="#" _fcksavedurl="#"><s></s>菜单5<b></b></a>
    <a class="nav a5" target="_blank" href="#" _fcksavedurl="#"><s></s>菜单6<b></b></a>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/youtianxia/p/3844203.html

weixin_30470857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现六边形布局菜单效果

利用所学的CSS技术，写了一个有点小难的布局实例，一个六边形的个性导航菜单，为了更加生动，这里在CSS中加入了hover效果，鼠标放在菜单上的时候，菜单变换背景，本例代码中无任何JS代码，完全CSS技术实现，值得参考。<!DOCTYPE html><html><head><FCK:meta http-equiv="Content...
复制链接

扫一扫