CSS3 多级菜单，支持转换效果和动画
fmms
13年前
<p><strong>支持转换和动画效果的 CSS3 多级菜单实例</strong></p> <p>在这里我们将创建一个很棒的 CSS3 菜单，使用 UL-LI 。<a href="/misc/goto?guid=4958529203056951636" rel="nofollow" target="_blank">在线演示</a>，<a href="/misc/goto?guid=4958529203158131912" rel="nofollow" target="_blank">源码下载</a></p> <p>首先是一个简单的 HTML (index.html)：</p> <pre class="brush:html; toolbar: true; auto-links: false;"><!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>CSS3 multilevel menu with transition and animation | Script Tutorials</title> <link href="css/layout.css" type="text/css" rel="stylesheet"> <link href="css/menu.css" type="text/css" rel="stylesheet"> </head> <body> <header> <h2>CSS3 multilevel menu with transition and animation</h2> <a href="http://www.script-tutorials.com/css3-multilevel-menu-with-transition-and-animation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <div class="container"> <ul id="nav"> <li> <a href="#">Parent link #1</a> <a href="#">Sub #11</a> <a href="#">Sub #12</a> <a href="#">Sub #13</a> <a href="#">Sub #14</a> </li> <li> <a href="#">Parent link #2</a> <a href="#">Sub #21</a> <a href="#">Sub #22</a> <a href="#">Sub #23</a> <a href="#">Sub #24</a> </li> <li> <a href="#">Parent link #3</a> <a href="#">Sub #31</a> <a href="#">Sub #32</a> <a href="#">Sub #33</a> <a href="#">Sub #34</a> </li> <li> <a href="#">Parent link #4</a> <a href="#">Sub #41</a> <a href="#">Sub #42</a> <a href="#">Sub #43</a> <a href="#">Sub #44</a> </li> </ul> </div> </body> </html></pre> <p>然后是 CSS (css/menu.css)</p> <pre class="brush:css; toolbar: true; auto-links: false;">ul#nav { border: 1px solid #454545; display: block; height: 400px; margin: 0; padding: 15px; width: 160px; -moz-border-radius: 9px; -ms-border-radius: 9px; -webkit-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; background: -moz-linear-gradient(#f1f7ff, #d9e1ec); background: -ms-linear-gradient(#f1f7ff, #d9e1ec); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f7ff), color-stop(100%, #d9e1ec)); background: -webkit-linear-gradient(#f1f7ff, #d9e1ec); background: -o-linear-gradient(#f1f7ff, #d9e1ec); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec')"; background: linear-gradient(#f1f7ff, #d9e1ec); } @-moz-keyframes custom_effect { 0% { background:rgba(255, 255, 255, 0.0); height: 60px; } 33% { background:rgba(255, 255, 255, 0.0); height: 160px; } 66% { background:rgba(255, 255, 255, 1.0); } 100% { background:rgba(190, 220, 255, 0.8); height: 135px; } } @-webkit-keyframes custom_effect { 0% { background:rgba(255, 255, 255, 0.0); height: 60px; } 33% { background:rgba(255, 255, 255, 0.0); height: 160px; } 66% { background:rgba(255, 255, 255, 1.0); } 100% { background:rgba(190, 220, 255, 0.8); height: 135px; } } ul#nav li { -moz-border-radius: 9px; -ms-border-radius: 9px; -webkit-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; background-color:transparent; border: 1px solid #454545; display: block; height: 60px; line-height: 60px; margin-bottom: 15px; overflow: hidden; } ul#nav li:hover { -moz-animation-name: custom_effect; -moz-animation-duration: 0.4s; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: custom_effect; -webkit-animation-duration: 0.4s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; background:rgba(190, 220, 255, 0.8); height: 135px; } ul#nav a { border-style: none; border-width: 0; color: #181818; cursor: pointer; float: left; font-size: 13px; font-weight: bold; line-height: 30px; margin-top: 100px; padding-left: 18px; text-align: left; text-decoration: none; text-shadow: 0 1px 1px #FFFFFF; vertical-align: middle; -moz-transition: all 0.1s 0.4s; -ms-transition: all 0.1s 0.4s; -o-transition: all 0.1s 0.4s; -webkit-transition: all 0.1s 0.4s; transition: all 0.1s 0.4s; } ul#nav a:hover { text-decoration: underline; } ul#nav li a:first-child { display: block; float: none; line-height: 60px; margin-top: 0; } ul#nav li:hover a:first-child { line-height: 60px; } ul#nav li:hover a { margin-top: 0; }</pre> <p>没了，连图片都不需要，酷吧:)</p> <p>大概效果图</p> <p><img title="d1.png" border="0" alt="d1.png" src="https://simg.open-open.com/show/a931c1548989846642d63828221f01ce.png" width="128" height="128" /></p> <p><a href="/misc/goto?guid=4958529203056951636" rel="nofollow" target="_blank">在线演示</a>，<a href="/misc/goto?guid=4958529203158131912" rel="nofollow" target="_blank">源码下载</a> </p>