^{<rp id="1sljc"></rp>}

支持IE8的純css3開發(fā)的響應式設計動畫菜單教程

2024-07-11 08:30:23

字體：大中小

來源：轉載

供稿：網友

　　這是一個響應式設計的菜單。單擊列表圖標，當你顯示屏大小可以完全水平放下所有菜單項時，菜單水平顯示（如圖1）。當你的顯示屏不能水平放置所有菜單項時，菜單垂直顯示（如圖2）。而且顯示的時候是以動畫的型式顯示。效果相當?shù)暮谩?/p>

圖1

圖2

　　下面是實現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復制內容到剪貼板

<div class="container"> <!--[if lte IE 8]>
<style>
.iconicmenu > label{ border-width: 7px;
background: #eee; }
.iconicmenu:hover ul{
left: 8px; /* show menu onmouseover in IE8 and below */ }
</style>
<![endif]--> <div class="iconicmenu">
<input type="checkbox" id="togglebox" /> <ul>
<li><a targe="_blank" href="http://www.survivalescaperooms.com/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li> <li><a targe="_blank" href="http://www.survivalescaperooms.com/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>
<li><a targe="_blank" href="http://www.survivalescaperooms.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li> <li><a targe="_blank" href="http://www.survivalescaperooms.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>
<li><a targe="_blank" href="http://www.survivalescaperooms.com/Shili/css3%E8%8F%9C%E5%8D%95">JavaScript</a></li> <li>
<label for="togglebox"> </label>
</li> </ul>
<label class="toggler" for="togglebox"> Menu</label>
</div> </div>