css3和html5打造的超酷的旋转效果的导航菜单
- 作者：网页模板
- 大小：0.027MB
- 点击次数：
- 发布时间：2014-02-19 12:26
特效介绍
css3和html5打造的超酷的旋转效果的导航菜单，下拉菜单旋转显示，search框获取焦点会自动延长，效果很酷。但是，由于目前浏览器的局限性，请用IE9以上版本或者火狐或者谷歌等浏览器浏览才会有效果。
使用方法
1、在head区插入下面代码<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->2、在body中插入下面代码
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
<nav>
<ul class="fancyNav">
<li id="home">
<a href="#home" class="homeIcon">
<div class="home-top"></div>
<div class="home-top-r"></div>
<div class="home-door-l"></div>
<div class="home-door-r"></div>
</a>
</li>
<li id="news"><a href="#news">前端设计</a>
<ul>
<li><a href="">HTML5</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">JQUERY</a></li>
</ul>
</li>
<li id="about"><a href="#about">编程语言</a>
<ul>
<li><a href="">PHP</a></li>
<li><a href="">JAVA</a></li>
<li><a href="">wordpress</a></li>
<li><a href="">CodeIgniter</a></li>
</ul>
</li>
<li id="services"><a href="#services">生活</a></li>
<li id="contact"><a href="#contact">留言板</a></li>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
<div style="display:block;clear:both;"></div>
</ul>
</nav>
- 本文标签：
- css3导航,html5导航
