通過特定鏈接擴展搜索欄

Question

我試圖讓一個搜索欄擴展到某些鏈接。一旦您點擊我已有的放大鏡圖像並在「登錄」鏈接上展開，它就會展開。 它不必工作！這只是爲了演出。

爲了獲得更多的視覺您可以訪問我的網頁here，看看我的意思是對放大鏡圖示和登錄。

要獲得更多關於我想要的設想，請訪問here。這正是我想以各種方式想要的......更適合我的網站。當我下載這些文件時，我感到困惑，因爲它有太多的元素以至於我不需要，並且找出哪些不需要的東西有點混亂。如果有人知道如何去構造這個，那將是完美的。

我有我的導航CSS是：

/* Navigation bar */ 
#navi { 
height: 40px; 
width: 961px; 
background: #1e416f; 
font-size: 14px; 
color: white; 
text-transform: uppercase; 
margin: 0 0 20px 0; 
} 

#navi a:hover { 
background: white; 
color: #1e416f; 
} 

#navi .logo { 
margin: 0; 
padding: 0; 
float: left; 
} 

#navi .logo a { 
float: left; 
width: 56px; 
height: 40px; 
background: url(/imgs/navi/caul_white_nav.png) center no-repeat; 
text-indent: -9999px; 
} 

#navi .logo a:hover { 
background: url(/imgs/navi-hover/caul_blue_nav.png) center no-repeat; 
background-color: white; 
} 

#primary-nav, #tools-nav { 
list-style: none; 
margin: 0; 
padding: 0; 
} 

#primary-nav li, #primary-nav a, #tools-nav li, #tools-nav a { 
float: left; 
} 

#primary-nav a, #tools-nav a { 
color: white; 
text-decoration: none; 
padding: 0 10px; 
border-right: 1px solid white; 
line-height: 40px; 
} 

#tools-nav a:hover { 
color: #1e416f; 
} 

#primary-nav li:first-child a, #tools-nav li:first-child a { 
border-left: 1px solid white; 
} 

#tools-nav { 
float: right; 
} 

#tools-nav .icon a { 
text-indent: -9999px; 
} 

#tools-nav .email a { 
background: url(/imgs/navi/mail.png) no-repeat scroll center center transparent; 
width: 20px; 
} 

#tools-nav .email a:hover { 
background: url(/imgs/navi-hover/hover_mail.png) no-repeat scroll center center transparent; 
width: 20px; 
} 

#tools-nav .twitter a { 
background: url(/imgs/navi/twitter.png) no-repeat scroll center center transparent; 
width: 20px; 
} 

#tools-nav .twitter a:hover { 
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat scroll center center transparent; 
width: 20px; 
} 

#tools-nav .search a { 
background: url(/imgs/navi/search.png) no-repeat scroll center center transparent; 
width: 20px; 
} 

#tools-nav .search a:hover { 
background: url(/imgs/navi-hover/hover_search.png) no-repeat scroll center center transparent; 
width: 20px; 
} 

和我有關HTML：

<!-- NAVIGATION --> 
<div id="navi"> 
<h1 class="logo"><a href="#">CAUL/CBUA</a></h1> 

<ul id="primary-nav"> 
    <li><a href="#">Directories</a></li> 
    <li><a href="#">Committees</a></li> 
    <li><a href="#">Resources</a></li> 
    <li><a href="#">About</a></li> 
</ul> 

<ul id="tools-nav"> 
    <li class="login"><a href="#">Log In</a></li> 
    <li class="email icon"><a href="#">Email</a></li> 
    <li class="twitter icon"><a href="#">Twitter</a></li> 
    <li class="search icon"><a href="#">Search</a></li> 
</ul> 
</div> 

Answer 1

您不必使用插件這個功能是jQuery的幾行

$("#search-icon").click(function(){ 
    $("#search-field").animate({width: "500px"}, 500).show(); 
}); 

看到這個小提琴http://jsfiddle.net/N8q2J/

編輯： 所以這裏是你的文件應該是什麼樣子 HTML文件，其中要添加搜索欄

• 在頭

  $（文件）。就緒（函數（）{（「＃search-icon」）。click（function（）{（「＃search-field」）。animate（{width：「500px」}，500）.show（）; }）; }）;
• 在你想要顯示

搜索欄的身體和CSS文件

添加有規則

.search-icon{ 
    width: 30px; 
    height: 30px; 
    float: left; 
} 
.search-field{ 
    height: 20px; 
    float: left; 
    width: 2px; 
} 
.hidden{ 
    display: none; 
} 
.expand{ 
    width: 300px; 
} 

Answer 2

那麼，它很簡單

在文本框中放置一個包裝。

<div class="textwrapper" style="position:absolute;top:100px;left:300px;width:50px;"> 
<input type="text" style="width:100%;" /> 
</div> 

請注意，包裝具有絕對位置，因此您可以將它放置在搜索欄的右邊。

最初，把它的寬度爲0

而且在搜索欄的點擊設置動畫，如：（開業）

$('.textwrapper').animate({width: 50, marginLeft: 250}, {duration: 1000}); 

，並關閉它，你可以

$('.textwrapper').animate({width: 50, marginLeft: 300}, {duration: 1000}); 

這可能不完美的工作，但可以引導你在正確的方向。