仿jq官方网站的蓝色大气导航和可伸缩的input框，不兼容IE6_导航菜单_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

仿jq官方网站的蓝色大气导航和可伸缩的input框，不兼容IE6

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2014-02-14 14:03:33 去下载去预览

特效介绍

jquery可伸缩input框特效

仿jq官方网站的蓝色大气导航和可伸缩的input框，不兼容IE6

使用方法

1、在头部引入：

01<link href="style/style.css" rel="stylesheet" type="text/css" />
02<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
03<script>
04$(function(){
05$("#text").focus(function(){
06    if($(this).val() == ""){
07        $("label").animate({opacity:0.5},500);
08        $(this).animate({width:"140px"},500);
09    }
10}).blur(function(){
11    if($(this).val() == ""){
12        $("label").animate({opacity:1},500);        
13        $(this).animate({width:"50px"},500);
14    }
15}).keyup(function(){
16        $("label").animate({opacity:0},1);
17})
18})
19</script>

2、把以下代码拷贝到你想引用的地方

01<div id="navigation" class="wrap">
02    <div id="nav_left" class="fl"></div>
03    <ul id="nav_main" class="fl">
04        <li><a href="###">Download</a></li>
05        <li><a href="###">API Documentation</a></li>
06        <li><a href="###">Blog</a></li>
07        <li><a href="###">Plugins</a></li>
08        <li><a href="###">Browser Support</a></li>
09        <li><a href="###">Search jQuery</a></li>
10    </ul>
11    <div id="nav_search" class="fl">
12        <label for="text">Search</label>
13        <div id="search_left_bg" class="fl"></div>
14        <input type="text" id="text" class="fl" />
15        <div id="search_line" class="fl"></div>
16        <input type="button" class="fl" />
17    </div>
18    <div id="nav_right" class="fl"></div>
19</div>