15个漂亮的jQuery导航菜单
fmms 13年前
<div> 目前， <strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">jQuery的菜单</strong>正变得越来越流行。我们可以使用jQuery创造美化菜单，通过一些鼠标操作让菜单变的有吸引力和有趣。 <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;"> jQuery菜单插件</strong>，用于创建与动态（动画）背景<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">菜单</strong>。每个菜单项可以是背景图像，这样，当鼠标从一个菜单项移动到另一个背景图像被替换使用的动画过渡。</p> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"> 设计网站导航使用jQuery的javascript菜单应干净和舒适的！今天我所收集的<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">30个最佳jQuery的</strong>菜单，如<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">jQuery的菜单导航</strong>，<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">jQuery的菜单列表</strong>，<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">jQuery的垂直菜单</strong>，<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">jQuery的滑动菜单，jQuery的浮动菜单</strong>，<strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">jQuery的横向菜单</strong></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">1. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186580662310772">Rocking and Rolling Rounded Menu with jQuery</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186582739616599">Demo</a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/8ac7112b6e0f44332f306e48e5a1b552.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/b43eaeb040e993fdae5a6220af9289a4.png" width="471" height="88" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">2. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186577833823972">Grungy Random Rotation Menu with jQuery and CSS3</a> |<a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186579916077168">Demo</a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/26a14ba26c5de88b0120943d9eeda247.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/c6d8ce770c0c25d708c068e13e35e522.png" width="518" height="88" /></a></p> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"> </p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">3. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186527904783000">How to Make a Smooth Animated Menu with jQuery</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186529974013514">Demo</a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/50c36d3e91c26f3c21222e52650bcbfc.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/7f3c99ee07ee014f5effccb37c54bb58.png" width="511" height="59" /></a></p> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"> </p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">4. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186583472535881">Slide Down Box Menu with jQuery and CSS3</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186585548412569">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186583472535881"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/592c802ba20ba814c91cecd38560317a.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/d6cb8cde4061055d7ca4ccaf392c7fcc.png" width="481" height="180" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">5. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186605328420489">Image Menu with Jquery</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186607413906136">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186605328420489"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/0cc481d698a20fdff035f02ebdbeba79.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/7382c74c60fd20832684b6846283ee50.png" width="471" height="154" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">6. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186637072582680">Create an apple style menu and improve it via jQuery</a> |<a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186639148394742">Demo</a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/e0dd0b129cf6fa270bb5a5ced28a7777.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/363e44177e98d65bbd57383c24f75899.png" width="504" height="46" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">7. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186648421292885">Sexy Drop Down Menu jQuery & CSS</a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/7c0ef61ac0135bf85f6df54e5762abf6.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/104c17dba3953c5932349aa6683f24d5.png" width="479" height="133" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">8. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186667365447131">Make a Mega Drop-Down Menu with jQuery</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958325740337405487">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186667365447131"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/6b756e5e6a8a106eb07f6a6f4942f8cf.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/c337d3459502f2eb06c04f6a6416b949.png" width="490" height="183" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">9. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186675831787817">Mega Drop Down Menus w/ CSS & jQuery</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186677922003166">Demo</a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/cdcae5442f7c199c4e267515a23fc5ba.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/e96754218382973f6b58b33454300a5c.png" width="458" height="216" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">10. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186297810295689">Beautiful Slide Out Navigation: A CSS and jQuery Tutorial</a>| <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186740903407885">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186297810295689"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/0896ee17e3730da64d94248b8ed518a0.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/e2388d03fa18e3ce1d7b602eb5c47f31.png" width="85" height="424" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">11. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186309952117938">Awesome Cufonized Fly-out Menu with jQuery and CSS3</a> |<a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186743685350397">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186309952117938"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/fc498b476bc20fa3d815c43bc7f094a1.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/6403d2b5544c1004d2abfd8864a8cb03.png" width="411" height="184" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">12. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186747262555329">Animated Drop Down Menu with jQuery</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186749364597311">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186747262555329"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/df3104ef5a6f1aa6562cfc2863b56e5b.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/43ffcfd1f84931b5f58fdddec7d88fc2.png" width="163" height="243" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">13. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186759881404453">Sliding Jquery Menu</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186761960702933">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186759881404453"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/ff1520a2e80fcb44e96ccd1498ac0077.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/e2ff7dbc82c8c346b3635394d2f09aa2.png" width="261" height="262" /></a></p> <h4><strong style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">14. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186771234479759">jQuery style menu with CSS3</a> | <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186773331493415">Demo</a><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958186771234479759"> <br style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" /> </a></strong></h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/b245ea2630115ea9fc02b0ae8157b2ee.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/aa1b31347921e6bc7e85c7cbc80429b1.png" width="134" height="272" /></a></p> <h4>15. <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958325154444352484">Making Better Select Elements with jQuery and CSS3</a> </h4> <p style="padding-bottom:0px;text-indent:0px;margin:5px auto;padding-left:0px;padding-right:0px;padding-top:0px;"><a style="border-bottom-color:#999999;padding-bottom:0px;border-top-color:#999999;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;border-right-color:#999999;border-left-color:#999999;text-decoration:underline;padding-top:0px;" href="https://simg.open-open.com/show/51afb15c7185ccb14d6a40410f4e3c20.png"><img style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:inline;padding-top:0px;" title="image" border="0" alt="15个漂亮的jQuery导航菜单 " src="https://simg.open-open.com/show/eac8ecd85b2cf1944cbe475c8317264f.png" width="379" height="287" /></a></p> <h5><a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958325755175089948">下载</a>| <a style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#0066cc;text-decoration:underline;padding-top:0px;" href="/misc/goto?guid=4958325755974483073">View Demo</a> </h5> </div> 转自iteye <br /> <br />