Расширение строки поиска по определенным ссылкам

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/

EDIT: так вот то, что ваши файлы должны выглядеть HTML файл, в котором вы хотите добавить строку поиска

• в заголовке

  $ (документ) .ready (функция() { $ ("# 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

И щелчку SearchBar анимировать нравится: (Чтобы открыть)

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

и закрыть его, вы можете

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

В мае этого года не работает отлично, но может направлять вас в правильном направлении.