Menu

Slide Down Box Menu with jQuery and CSS3. In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation.

We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ...

If there is no submenu, the div can simply be left out. The CSS. CSS-only Menus. CSS3 Menu. Free CSS Menu Maker. What's New CSS3 Menu v4.9 (March 12, 2014) * New flat skins: Neat, Refined, Facet and Jalousie * New flat icon sets: Smart-grey and Smart-orange CSS3 Menu v4.7 (January 30, 2014) * New flat skins: Posh, Boundary * New flat icon sets: Smart-blue, Fantasy-green CSS3 Menu v4.6 (December 12, 2013) * New flat skins: Sparkle and Volume * New flat icon sets: Fantasy-white and Fantasy-red CSS3 Menu v4.5 (November 14, 2013) * New flat skins: Gleam, Sublime and Blurring * New flat icon sets: contour and geometric CSS3 Menu v4.4 (October 10, 2013) * New flat skins: Marker and Smoke * New flat icon sets: creative, rainbow and thumbtack CSS3 Menu v4.3 (September 18, 2013) * New flat skins: Metropolitan and Cloud * New flat icon sets: Stylish-Basic, Stylish-Computer, Stylish-Nature, Urban, Cartoon, Minimalist * New languages for site: Swedish and Japanese. * Bug fixes CSS3 Menu v4.2 (September 12, 2013) * New flat skins: Stitch, Flat Solid, Neoteric * Updated "Insert to Page" wizard. * Major and minor fixes.

Help . CSS Menu Generator. CSS Menu Generator. HTML Tools » CSS Menu Generator Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links.

For an example of a CSS menu, look at our navigation on the left. We currently have 3 different styles of menu available to generate, so for this first step, please choose the style you prefer by clicking on the appropriate radio button below then clicking the 'Proceed' button. Disclaimer: By using any of the free webmaster tools on this site you agree that it is you who has sole responsibility and liability for any errors that may occur to your website or web server as a result.