10个高级CSS3的下拉菜单
fmms 12年前
<h3>1) <a href="/misc/goto?guid=4958330267361600190" target="_blank">CSS Mega Dropdown</a></h3> <p>Mega dropdown is a pure CSS dropdown menu which is easily customizable and features 5 included color schemes (red, blue, orange, green, grey).</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330268157353844"><img class="aligncenter size-full wp-image-657" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css3-mega-dropdown-menu-e1329681314576.jpg" width="550" height="279" /></a></p> <h3 style="text-align:left;">2) M<a href="http://codecanyon.net/item/metro-css3-mega-menu/1402313?ref=downv&ref=downv&clickthrough_id=44996900&redirect_back=true" target="_blank">etro CSS3 Mega Menu</a></h3> <p style="text-align:left;">This is a CSS3 Menu inspired in the new Microsoft Metro UI. It comes with 4 different “box” layouts, 5 images animations and more nice features. Is very easy to use and install, well documented and no JavaScript/jQuery.</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330269966855358"><img class="aligncenter size-full wp-image-658" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css3-metro_mega-menu-e1329681416232.png" width="550" height="279" /></a></p> <h3 style="text-align:left;">3) F<a href="/misc/goto?guid=4958330270763530994" target="_blank">riendly CSS3 Megamenu</a></h3> <p style="text-align:left;">An easy-to-use CSS Mega Menu with both vertical and horizontal implementations. Unlimited possible sub menus with CSS 3 transitions giving you a javascript-like menu with only CSS</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330271550154537"><img class="aligncenter size-full wp-image-659" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css3-friendly_megamenu-e1329681592300.jpg" width="550" height="279" /></a></p> <h3 style="text-align:left;">4) CSS<a href="/misc/goto?guid=4958330272341676328" target="_blank">3 Mega Drop Down Menu</a></h3> <p style="text-align:left;">This <strong>Mega Drop Down Menu</strong> is a flexible and easy to integrate solution to build your custom menus. The drop down relies only on CSS /XHTML and comes with a fully working contact form.</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330273127682333"><img class="aligncenter size-full wp-image-661" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css3-mega-drop-down-menu-e1329681773806.jpg" width="550" height="279" /></a></p> <h3 style="text-align:left;">5) <a href="/misc/goto?guid=4958330273913212486" target="_blank">CSS3 Mega Menus</a></h3> <p style="text-align:left;"><strong>Drop Down Mega Menu</strong> created with CSS3 markup. This menu doesen’t need any images. Easy to customize and ready to create your own version.</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330274708582636"><img class="aligncenter size-full wp-image-662" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css3-mega-drop-menu-e1329681900948.jpg" width="550" height="279" /></a></p> <h3 style="text-align:left;">6) S<a href="/misc/goto?guid=4958330275499815055" target="_blank">ticky Header</a></h3> <p style="text-align:left;"><strong>Sticky Header</strong> is the top navigation bar that remains at the top of the page even when a user scrolls the page. This makes navigating to other parts of the site easy.</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330276288448854"><img class="aligncenter size-full wp-image-663" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/sticky-header-e1329682069609.jpg" width="550" height="279" /></a></p> <h3 style="text-align:left;">7) M<a href="/misc/goto?guid=4958326759958705579" target="_blank">enu with CSS3 Effects and Notification Bubbles</a></h3> <p style="text-align:left;">This <strong>Menu with CSS3 Effects and Notification Bubbles</strong> has everything you need. The functionality is divided in different parts and that makes it very powerful.</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330277815782726"><img class="aligncenter size-full wp-image-664" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css3-menu-e1329682146263.jpg" width="550" height="279" /></a></p> <h3 style="text-align:left;">8 ) <a href="/misc/goto?guid=4958330278610449947" target="_blank">CSS Ultimate Menus</a></h3> <p style="text-align:left;">These Menus feature 3 different dropdown styles, Product view, multi-column view and single column view, it has different classes for different levels and could support endless dropdowns</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330279408772184"><img class="aligncenter size-full wp-image-665" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/css-ultimate-e1329682237634.jpg" width="550" height="279" /></a></p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330279408772184"> </a></p> <h3 style="text-align:left;">9) <a href="/misc/goto?guid=4958330280927756487" target="_blank">jQuery CSS3 Sticky Mega Menu Bar</a></h3> <p style="text-align:left;">The plugin also works as a Multi Level dropdown Mega Menu, and comes in 15 different menubar templates, 2 menu templates and infinite menu levels.</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330281713639372"><img class="aligncenter size-full wp-image-666" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/jquery-css3-e1329682345583.png" width="550" height="279" /></a></p> <h3 style="text-align:left;">10) <a href="/misc/goto?guid=4958330282514520991" target="_blank">HTML5 CSS3 Drop Down Menu</a></h3> <p style="text-align:left;">Super flexible and semantic <strong>HTML5 /CSS3</strong> drop down menu, absolutely <strong>no JavaScript</strong>. Very easy and quick to implement!</p> <p style="text-align:center;"><a href="/misc/goto?guid=4958330283312949775"><img class="aligncenter size-full wp-image-667" alt="" src="http://webinsightlab.com/wp-content/uploads/2012/02/html-css3-dropdown-menu-e1329682465910.jpg" width="550" height="279" /></a></p>