Как добиться этого меню?

Question

Существуют ли какие-либо учебные пособия (возможно, какая-то инфраструктура JavaScript?), В которых объясняется, как создать меню верхнего уровня, подобное следующему?

http://www.clinique.co.uk

Где раскрывающаяся часть может быть любой ширины и может содержать изображения / ссылки.

Answer 1

Я бы предложил сначала изучить jQuery .Это очень легко изучить, и есть множество отличных плагинов!

Например: Плагины меню .

Если вы используете ASP.NET, тоРик Страл (помимо официального сайта jQuery) имеет отличный пост в блоге: http://www.west -wind.com / weblog / posts / 459197.aspx .

Answer 2

Попробуйте jQuery .Это значительно упрощает создание пользовательских интерфейсов JavaScript.Существует также большое количество плагинов для него.

И даже если вы не можете найти учебник для создания меню, подобного тому, которое есть на этом сайте, вам должно быть просто адаптировать обычное выпадающее меню -при условии, что вы знаете JavaScript и CSS.

Например, в большинстве раскрывающихся меню используются вложенные элементы UL для создания иерархического меню / списка.Элементы LI представляют каждый элемент меню, который может содержать что угодно, от текстовой метки до подменю.Базовая навигационная панель с выпадающими меню может выглядеть следующим образом:

<ul>
    <li>
        <a href="#">menu 1</a>
        <div class="menu">
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#">menu 2</a>
        <div class="menu">
            <ul>
                <li>foo2</li>
                <li>bar2</li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#">menu 3</a>
        <div class="menu">
            <ul>
                <li>foo3</li>
                <li>bar3</li>
            </ul>
        </div>
    </li>
</ul>

Чтобы создать желаемый вид, вы просто добавляете изображения в свои элементы menu и применяете соответствующий CSS:

        <div class="menu">
            <ul>
                <li>foo</li>
                <li>bar</li>
            </ul>
            <img src="your-image" />
        </div>