Панель поиска после клика

Question

Панель поиска после клика

0

Я пытаюсь поместить кнопку поиска в навигационное меню, которое при нажатии на нее отображает панель поиска в навигационном меню. В основном это будет выглядеть примерно так:

Нормальное состояние

После нажатия

Есть ли какие-нибудь учебники, которые могли бы помочь мне достичь этого? Спасибо!

Nesta 08 окт. 2013, в 01:24

Источник

0

Я бы предложил jQuery, но может быть способ использовать CSS для этой проблемы.
y-- 07 окт. 2013, в 23:11

Теги:

jquery

css3

navigation

2 ответа

Ещё вопросы

Я бы предложил jQuery, но может быть способ использовать CSS для этой проблемы.

emdhie · Answer 1 · 2013-10-08T02-51-00.000Z

Попробуй это:

JS:

$(document).ready(function(){
  $ ("#searchForm"). hide ();
  $("#searchButton").click(function(){
       $("#searchForm").show();
  }); 
});

HTML: <form id="searchForm">myForm</form> <input type="submit" id="searchButton"/>

Colandus · Answer 2 · 2013-10-07T20-45-00.000Z

Вы можете сделать это только с CSS.

Лично я бы использовал position: relative по меню, а затем position: absolute на панели поиска. Положите right: 10px и bottom: -100px (смените пиксели на высоту строки поиска). HTML-код поиска должен находиться внутри меню.

Чтобы подвести итог, в меню вы добавите следующий css:

position: relative;

В строке поиска вы добавите следующий css:

position: absolute;
right: 10px;
bottom: -100px;

Где 100px - высота строки поиска.