1

Подскажите, как сделать так, чтобы форма с результатами поиска показывалась под инпутом поиска, как в твиттере. (Посмотрел исходный код - там все занесено в один div). Сам вопрос в том, как сделать, чтобы блок был под инпутом, а инпут в <li>.(После само меню представляет собой li список, при уменьшении окна браузера сжимается). Цель - сделать так, чтобы был див под инпутом, который в теге <li> меню (после div должен быть, не в меню и ниже его). Заранее спасибо! Вот пример, как должно выглядеть картинкой.

alt text

2 ответа 2

3

Если вы имеете в виду то, что при наборе фразы в поле поиска автоматически появляются возможные результаты, то это ни что иное, как jQuery UI Autocomplete. К примеру, на этой демонстрационной странице, начните вводить названия птиц (на англ.) - crow (ворона) или eagle (орёл) - и увидите результат работы.

5
  • 1
    В результаты поиска можно бедут я как понимаю и картинку с фото пользователя ?
    – OverLoader
    12 авг 2012 в 9:57
  • @OverLoader, Любую информацию: текст, ссылки, графику etc.
    – Deonis
    12 авг 2012 в 10:08
  • 1
    А что в поиске который находиться в Твиттере используется ?
    – OverLoader
    12 авг 2012 в 12:52
  • 1
    @OverLoader, учитывая, что они используют jQuery, можно предположить, что Autocomplete так же пользуются. Хотя, организовать этот процесс зная ajax - не так уж сложно и самому.
    – Deonis
    12 авг 2012 в 12:57
  • 1
    Огромное спасибо!Разобрался!
    – OverLoader
    12 авг 2012 в 12:59
2

Всплывающий блок должен быть абсолютно позиционирован относительно пункта меню, при наведении на который, всплывает само меню. Следовательно, всплывающий блок в стилях должен иметь position:absolute и "сдвиг" вниз на высоту пункта меню, а для того, что-бы позиционирование происходило относительно родительского блока, у пункта меню должен быть position:relative.

CSS:

.menu,.menu li,.under-menu li{
    display:block;
    height:20px;
}
.menu li{
    float:left;
    position:relative;
}
.under-menu li{
    float:none;
}
.under-menu{
    position:absolute;
    top:20px;
    left:0;
    display:none;
}
.menu li:hover .under-menu{
    display:block;
}

HTML:

<ul class="menu">
    <li>
        Пункт #1
    </li>
    <li>
        Пункт #2
        <ul class="under-menu">
            <li>Подпункт 1</li>
            <li>Подпункт 2</li>
            <li>Подпункт 3</li>
            <li>Подпункт 4</li>
            <li>Подпункт 5</li>
        </ul>
    </li>
</ul>

Наглядный пример.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.