My account  |  Cart  |  Support  |  Forum
RESPONSIVE CSS FRAMEWORK

Drop down menus

The best solution to navigate the users through the website's content is drop down menu. Drop down menus have a great feature, because they help clean up a complex layout and are also a usable and attractive design element.
Two orientation types are available for the menus: horizontal and vertical. To create a vertical menu you need to add the "vertical" class to your menu div.

In mobile view dropdowns have a compact layout. Both horizontal and vertical menus have the same layout on mobile devices.
You can create N-level drop down menus by using one of the ready made styles. There are eight ready-made styles available for both horizontal and vertical menus. The last three menu styles support color classes.
Skin style classes
<div class="menu [style-1, style-2, style-3, style-4, style-5, style-6, style-7, style-8]">
    <ul class="main-level">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Color classes ONLY for style-6, style-7 and style-8
<div class="menu style-6 [orange, green, blue, purple, aqua, magenta]">
    <ul class="main-level">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Menu style-1

Include for menu style-1

// Common CSS file for the menus
<link rel="stylesheet" href="css/menus/JFMenu.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/menus/JFMenuStyle-1.css" />

// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->

// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->

// JS file for the menus
<script type="text/javascript" src="js/JFMenus.js"></script>

Usage for menu style-1

<div class="style-1 menu [vertical]">
    <ul class="main-level">
        <li><a href="#item1">Item 1</a></li>
        <li class="down"><a href="#item2">Item 2</a><span class="arrow-down"></span>
            <ul class="sub-level">
                <li><a href="#item2_1">Item 2_1</a></li>
                <li><a href="#item2_2">Item 2_2</a></li>
            </ul>
        </li>
        <li class="down"><a href="#item3">Item 3</a><span class="arrow-down"></span>
            <ul class="sub-level">
                <li><a href="#item3_1">Item 3_1</a></li>
                <li class="flyout"><a href="#item3_2">Item 3_2</a><span class="arrow-right"></span>
                    <ul class="sub-level">
                        <li><a href="#item3_2_1">Item 3_2_1</a></li>
                        <li class="flyout"><a href="#item3_2_2">Item 3_2_2</a><span class="arrow-right"></span>
                            <ul class="sub-level">
                                <li><a href="#item3_2_2_1">Item 3_2_2_1</a></li>
                                <li><a href="#item3_2_2_2">Item 3_2_2_2</a></li>
                                <li><a href="#item3_2_2_3">Item 3_2_2_3</a></li>
                            </ul>
                        </li>
                        <li><a href="#item3_2_3">Item 3_2_3</a></li>
                    </ul>
                </li>
                <li class="flyout"><a href="#item3_3">Item 3_3</a><span class="arrow-right"></span>
                    <ul class="sub-level">
                        <li><a href="#item3_3_1">Item 3_3_1</a></li>
                        <li><a href="#item3_3_2">Item 3_3_2</a></li>
                        <li><a href="#item3_3_3">Item 3_3_3</a></li>
                    </ul>
                </li>
            </ul>
        </li>        
        <li><a href="#item4">Item 4</a></li>
    </ul>
</div>
Top
More menu styles