Submit your widget

Horizontal slide out menu with grid-like thumbnail layout

Created 5 years ago   Views 27318   downloads 6296    Author tympanus
 Horizontal slide out menu with grid-like thumbnail layout
View DemoDownload 61.7 KB
77
Share |

This is a horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices.

This is a simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item is clicked and the sub-items fade in. When clicking on another item, the height of the submenu will adjust and the content will fade in and out while switching.

Some media query examples show how to make the menu responsive and change the view to a touch-friendly vertically stacked navigation.

THE HTML

<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
    <div class="cbp-hsinner">
        <ul class="cbp-hsmenu">
            <li>
                <a href="#">Lovely Spirits</a>
                <ul class="cbp-hssubmenu">
                    <li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
                    <li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
                    <li><a href="#"><img src="images/3.png" alt="img03"/><span>Heavenly Ale</span></a></li>
                    <li><a href="#"><img src="images/4.png" alt="img04"/><span>Juicy Lemonade</span></a></li>
                    <li><a href="#"><img src="images/5.png" alt="img05"/><span>Wise Whiskey</span></a></li>
                    <li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
                </ul>
            </li>
            <li>
                <a href="#">Delicious Beverages</a>
                <ul class="cbp-hssubmenu cbp-hssub-rows">
                    <li><a href="#"><img src="images/7.png" alt="img07"/><span>Lovely Slurp</span></a></li>
                    <li><a href="#"><img src="images/8.png" alt="img08"/><span>Lemony Grappa</span></a></li>
                    <li><a href="#"><img src="images/9.png" alt="img09"/><span>Eggy Liquor</span></a></li>
                    <li><a href="#"><img src="images/10.png" alt="img10"/><span>Fresh Juice</span></a></li>
                    <li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
                    <li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
                    <li><a href="#"><img src="images/3.png" alt="img03"/><span>Heavenly Ale</span></a></li>
                    <li><a href="#"><img src="images/4.png" alt="img04"/><span>Juicy Lemonade</span></a></li>
                    <li><a href="#"><img src="images/5.png" alt="img05"/><span>Wise Whiskey</span></a></li>
                    <li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
                    <li><a href="#"><img src="images/1.png" alt="img01"/><span>Delicate Wine</span></a></li>
                    <li><a href="#"><img src="images/2.png" alt="img02"/><span>Fine Spirit</span></a></li>
                </ul>
            </li>
            <li>
                <a href="#">Fine Liquors</a>
                <ul class="cbp-hssubmenu">
                    <li><a href="#"><img src="images/10.png" alt="img10"/><span>Fresh Juice</span></a></li>
                    <li><a href="#"><img src="images/6.png" alt="img06"/><span>Sweet Rum</span></a></li>
                    <li><a href="#"><img src="images/9.png" alt="img09"/><span>Eggy Liquor</span></a></li>
                </ul>
            </li>
            <li><a href="#">Our Mission</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Read more:http://tympanus.net/codrops/2013/05/17/horizontal-slide-out-menu/