Question

Are there any tutorials (some JavaScript framework perhaps?) that will explain how to produce a top-level menu like the following?

http://www.clinique.co.uk

Where the drop down part can be any width and can contain images/links.

Answer 1

Try jQuery. It makes creating JavaScript UIs much easier. There are also a large number of plugins for it.

And even if you can’t find a tutorial to make a menu specifically like the one on that site, it should be simple to adapt a regular dropdown menu—granted that you know JavaScript and CSS.

E.g. most dropdown menus use nested UL elements to create a hierarchical menu/list. The LI elements represent each menu item, which can contain anything from a text label to a submenu. A basic nav bar with dropdown menus might look like this:

<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>

To create the look you want, you’d just add images to your menu divs and apply the appropriate CSS:

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