css3实现美化菜单设计

来源：互联网发布：火车票选座位软件编辑：程序博客网时间：2024/05/23 11:52

许多网站的菜单都有其特色，我也用css3自己设计了一个菜单。时间匆忙只写了兼容webkit核的，不过效果还是比较美观的。下面贴出效果图（右边为选择时的效果）：

代码的主体当然是css样式表，其中要注意css选择器要少用id，可以用nth-child之类的写法代替，以便于代码的重用。代码写起来不复杂，难点是折页效果的实现，我采用的是3d旋转div的方法实现的。

html部分代码：

<body><div id = "page"><ul><li><div></div><a href = "javascript:void(0);">菜单 1</a></li><li><div></div><a href = "javascript:void(0);">菜单 2</a></li><li><div></div><a href = "javascript:void(0);">菜单 3</a></li><li><div></div><a href = "javascript:void(0);">菜单 4</a></li><li><div></div><a href = "javascript:void(0);">菜单 5</a></li><li><div></div><a href = "javascript:void(0);">菜单 6</a></li></ul></div></body>

其中夹在li中间的div就是实现折页效果的。

css部分：

body {background-color: rgb(14, 179, 192);}#page{position: absolute;left: 100px;width: 1100px;height: 600px;background-color: #eee;}#page ul{margin-left: -80px;list-style: none;z-index: 0;}#page ul li{margin-left: 10px;margin-top: 20px;width: 200px;}#page ul li a{display: block;width: 200px;color: white;opacity: 0.8;font-size: 30px;text-align: center;text-decoration:none; line-height: 60px;-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.5)}#page ul li div{position: absolute;width: 30px;height: 100px;-webkit-transform:translate(2px, -8px) rotateX(60deg) rotateY(30deg);-webkit-box-shadow:none;}#page ul li a:hover{-webkit-box-shadow:15px 15px 25px rgba(0, 0, 0, 0.5);font-size: 40px;}#page ul li a:active{-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);}#page ul li:nth-child(1){background-color: rgb(226,130,105);}#page ul li:nth-child(2){background-color: rgb(228,222,103);}#page ul li:nth-child(3){background-color: rgb(103,228,103);}#page ul li:nth-child(4){background-color: rgb(103,228,219);}#page ul li:nth-child(5){background-color: rgb(103,109,228);}#page ul li:nth-child(6){background-color: rgb(228,103,228);}#page ul li:nth-child(1) div{background-color: rgb(226,130,105);}#page ul li:nth-child(2) div{background-color: rgb(228,222,103);}#page ul li:nth-child(3) div{background-color: rgb(103,228,103);}#page ul li:nth-child(4) div{background-color: rgb(103,228,219);}#page ul li:nth-child(5) div{background-color: rgb(103,109,228);}#page ul li:nth-child(6) div{background-color: rgb(228,103,228);}

整体代码：

<!DOCTYPE html><html><head><style>body {background-color: rgb(14, 179, 192);}#page{position: absolute;left: 100px;width: 1100px;height: 600px;background-color: #eee;}#page ul{margin-left: -80px;list-style: none;z-index: 0;}#page ul li{margin-left: 10px;margin-top: 20px;width: 200px;}#page ul li a{display: block;width: 200px;color: white;opacity: 0.8;font-size: 30px;text-align: center;text-decoration:none; line-height: 60px;-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.5)}#page ul li div{position: absolute;width: 30px;height: 100px;-webkit-transform:translate(2px, -8px) rotateX(60deg) rotateY(30deg);-webkit-box-shadow:none;}#page ul li a:hover{-webkit-box-shadow:15px 15px 25px rgba(0, 0, 0, 0.5);font-size: 40px;}#page ul li a:active{-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);}#page ul li:nth-child(1){background-color: rgb(226,130,105);}#page ul li:nth-child(2){background-color: rgb(228,222,103);}#page ul li:nth-child(3){background-color: rgb(103,228,103);}#page ul li:nth-child(4){background-color: rgb(103,228,219);}#page ul li:nth-child(5){background-color: rgb(103,109,228);}#page ul li:nth-child(6){background-color: rgb(228,103,228);}#page ul li:nth-child(1) div{background-color: rgb(226,130,105);}#page ul li:nth-child(2) div{background-color: rgb(228,222,103);}#page ul li:nth-child(3) div{background-color: rgb(103,228,103);}#page ul li:nth-child(4) div{background-color: rgb(103,228,219);}#page ul li:nth-child(5) div{background-color: rgb(103,109,228);}#page ul li:nth-child(6) div{background-color: rgb(228,103,228);}</style></head><body><div id = "page"><ul><li><div></div><a href = "javascript:void(0);">菜单 1</a></li><li><div></div><a href = "javascript:void(0);">菜单 2</a></li><li><div></div><a href = "javascript:void(0);">菜单 3</a></li><li><div></div><a href = "javascript:void(0);">菜单 4</a></li><li><div></div><a href = "javascript:void(0);">菜单 5</a></li><li><div></div><a href = "javascript:void(0);">菜单 6</a></li></ul></div></body></html>

0 0