14 สุดยอด Free Text Editor ที่ Programmer นิยมใช้มากที่สุด

<br /> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 1. Notepad++</h2> <div> <br /></div> <div> นับว่าเป็น Free <span style="background-color: white; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;">Text Editor ที่นิยมใช้มากที่สุด เพราะใช้งานง่ายมากๆ ที่สำคัญ Support ภาษาไทยด้วย ผมใช้ตัวนี้มานานแล้ว คอนเฟิร์มเลยครับ ว่า น่าใช้มาก   </span><span style="text-align: left;"> </span></div> <div style="text-align: left;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_132g5vw3ght_b" style="color: #2b6690;"><img height="368" src="http://docs.google.com/File?id=dcwmstfp_132g5vw3ght_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> </div> <h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"> Notepad++</h2> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br /> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <img alt="Notepad++" class="alignnone size-full wp-image-1996" height="170" src="http://rabbitinblack.com/wp-content/uploads/2012/03/notepadplusplus.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Notepad++" width="220" /></div> <div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;"> Download ที่นี่ : <a href="http://notepad-plus-plus.org/download/" style="color: #ff4f92; text-decoration: none;" target="_blank">Notepad++</a></div> <br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 22px;"> </div> <h2 style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <span style="font-size: 30px;">2 .</span><span style="font-size: x-large;"> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; line-height: 50px;">Sublime Text</span></span></h2> <div style="font-size: 15px;"> <img height="396" id="il_fi" src="http://burtonator.files.wordpress.com/2008/01/200801181502.jpg" style="color: #333333; padding-bottom: 8px; padding-right: 8px; padding-top: 8px;" width="640" /> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 50px;"><br /> </span></div> <br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> </div> <h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"> Sublime Text</h2> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br /> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <img alt="Sublime Text" class="alignnone size-full wp-image-2003" height="154" src="http://rabbitinblack.com/wp-content/uploads/2012/03/sublimetext.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Sublime Text" width="600" /></div> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> จริง ๆ แล้ว Sublime Text นั้นก็มีในแบบเสียเงิน แต่สำหรับคนเริ่มต้นแล้ว เท่าที่ฟรีของมันก็เพียงพอแล้วครับ</div> <div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;"> Download ที่นี่ : <a href="http://rabbitinblack.com/2012/03/free-text-editor-web-developer/www.sublimetext.com/" style="color: #ff4f92; text-decoration: none;" target="_blank">Sublime Text</a></div> <br /> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <br /> </h2> <div> <br /></div> <div> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 3. Programmer's Notepad</h2> <div> <br /></div> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Programmer's Notepad is a light weight Notepad replacement that is aimed at programmers and web monkeys.</span><br /> <span style="font-family: Georgia, 'Times New Roman', Times, serif;"><span style="font-size: 15px; line-height: 22px;"><br /> </span></span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_133fw56rfc5_b" style="color: #2b6690;"><img height="269" src="http://docs.google.com/File?id=dcwmstfp_133fw56rfc5_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> </div> <h2 style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; display: inline; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 20px; line-height: 50px; margin-bottom: 12px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; padding-top: 6px;"> Programmer’s Notepad</h2> <span style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px;"></span><br /> <div style="color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; line-height: 19px; margin-bottom: 18px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <img alt="Programmer's Notepad" class="alignnone size-full wp-image-2000" height="94" src="http://rabbitinblack.com/wp-content/uploads/2012/03/programmernotepad.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; border-width: initial; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px;" title="Programmer's Notepad" width="724" /></div> <div class="linkto-box" style="border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; color: #333333; font-family: Helvetica, 'Lucida Grande', Arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 17px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 7px; padding-left: 10px; padding-right: 10px; padding-top: 9px;"> Download ที่นี่ : <a href="http://www.pnotepad.org/download/" style="color: #ff4f92; text-decoration: none;" target="_blank">Programmer’s Notepad</a></div> <br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 4. TotalEdit</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">TotalEdit is a free for commercial and non commercial use text editor for Windows. It supports all features expected out of a programmer's text editor like syntax coloring, code folding and line numbering</span><br /> <img alt="TotalEdit Now Completely Free" height="204" longdesc="http://www.codertools.com/TotalEdit%20Now%20Completely%20Free" src="http://www.codertools.com/web2/images/products/totaledit-case-small.png" width="150" /><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_134d2tjhjd4_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_134d2tjhjd4_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> Some of the features that make it stand apart from the crowd are backup and version comparison - you can compare the currently edited file with its previous version from within TotalEdit, a built-in spell checker and its fully portable mode - you can run it off a USB stick.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.codertools.com/download.aspx" style="color: #2b6690;">Download TotalEdit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 5. Notepad2</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">If what you want is a blaring fast text editor that starts instantly at the touch of a mouse and that gets things done as fast as possible, then Notepad2 is for you. Notepad2 is aimed at coders who need a little more oomph than the generic Notepad in Windows.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_135rznfhjmk_b" style="color: #2b6690;"><img height="279" src="http://docs.google.com/File?id=dcwmstfp_135rznfhjmk_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It supports a number of programming languages. Hit F12, select the scheme and press OK. If you wish to replace the generic Notepad with Notepad2, here are the instructions <a href="http://blogs.msdn.com/omars/archive/2004/04/30/124093.aspx" style="color: #2b6690;">for Windows XP</a> and <a href="http://www.mattberther.com/?p=828" style="color: #2b6690;">for Windows Vista.</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.flos-freeware.ch/notepad2.html" style="color: #2b6690;">Download Notepad2</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 6. XML Notepad 2007</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">It is sadistic to force humans to edit XML files. But still, lot of people are unfortunate enough to do this on a regular basis especially java programmers. XML Notepad to your rescue.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_136f7hxgrd2_b" style="color: #2b6690;"><img height="365" src="http://docs.google.com/File?id=dcwmstfp_136f7hxgrd2_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> XML Notepad has a simple interface with a tree view of tags on left and their values displayed on right. Use this one as it reduces the chances of human errors in generating properly validated XML files.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.microsoft.com/downloads/details.aspx?familyid=72d6aa49-787d-4118-ba5f-4f30fe913628&displaylang=en#Overview" style="color: #2b6690;">Download XML Notepad 2007</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 7. ConTEXT</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">ConTEXT is a free and recently made open source programmer's text editor.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_137h4sft2ft_b" style="color: #2b6690;"></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_138hbvvsfg2_b" style="color: #2b6690;"></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_139gs43brch_b" style="color: #2b6690;"><img height="311" src="http://docs.google.com/File?id=dcwmstfp_139gs43brch_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> ConTEXT is very light weight, is simple to use and hardly uses any RAM. It supports a large number of programming languages like C/C++, Delphi/Pascal, Java, Java Script, Visual Basic, Perl/CGI, HTML, CSS, SQL, FoxPro, 80x86 assembler, Python, PHP, Tcl/Tk, XML, Fortran, Foxpro and InnoSetup scripts.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.contexteditor.org/downloads.html" style="color: #2b6690;">Download ConTEXT</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 8. jEdit</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">jEdit is written in Java can can run on Windows, Linux and Mac OSX.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_142d43jnxdj_b" style="color: #2b6690;"><img height="368" src="http://docs.google.com/File?id=dcwmstfp_142d43jnxdj_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> jEdit is highly configurable and customizable using macros and plugins. It carries all standard and advanced features like syntax highlighting, auto indentation, file management and bookmarks. It provides keyboard shortcuts for almost anything. So go for this if you are a keyboard ninja.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.jedit.org/" style="color: #2b6690;">Download jEdit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 9. Komodo Edit</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Komodo Edit is a text editor from ActiveState - a company famous for its port of Perl, Python and TCL to Windows. Komodo Edit is a free and open source text editor (or should rather be called a mini IDE).</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_150dw455cd7_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_150dw455cd7_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It supports many features that one would find in IDEs like code completion and call tips. It supports CSS, HTML, JavaScript, XML, Perl, PHP, Python, Ruby, Tcl, RHTML, Template-Toolkit, HTML-Smarty and Django template styles. If you are coming from a Vim or Emacs background, you can also set Komodo Edit to emulate Vim or Emacs key bindings.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.activestate.com/komodo_edit/" style="color: #2b6690;">Download Komodo Edit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 10. SourceEdit</h2> <div> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_151dqkhgfxh_b" style="color: #2b6690;"><img height="394" src="http://docs.google.com/File?id=dcwmstfp_151dqkhgfxh_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> SourceEdit will appeal more to the web developer community because of it built-in FTP manager and support for previewing the HTML code in the web browser directly from within SourceEdit. It supports languages like ASP, PHP, Java, C/C++, C#, Visual Basic, Pascal, Perl, Cold Fusion, SQL, HTML, CSS and XML. Web developers will also find its color mixer quite useful. This software is highly customizable. All keyboard shortcuts can be changed to suite your taste. All color coding for any language can be changed and SourceEdit will remember to use that color coding next time you launch a text file of that programming language.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.brixoft.net/download.asp#ID1" style="color: #2b6690;">Download SourceEdit</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 11. PSPad</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">PSPad is another code editor that would be of interest to web developers because of its built-in FTP client. You can log in to an FTP server, browser files, edit and save them to the server all from within PSPad.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_144g8t6wjfh_b" style="color: #2b6690;"><img height="349" src="http://docs.google.com/File?id=dcwmstfp_144g8t6wjfh_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It highlights the matching closing and starting tag when you place your cursor at the middle of a tag. This one also has integrated TiDy library for formatting and checking HTML code, conversion to CSS, XML, XHTML. It also comes with a HEX editor and a diff tool.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.pspad.com/en/download.php" style="color: #2b6690;">Download PSPad</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 12. Crimson Editor</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Crimson Editor calls itself the professional source code editor for Windows.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_145fnhjh5ch_b" style="color: #2b6690;"><img height="418" src="http://docs.google.com/File?id=dcwmstfp_145fnhjh5ch_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> It is lightning fast in loading and can run of a floppy disk. It supports syntax highlighting for HTML, C/C++, Perl, Java, Matlab and LaTeX. Full features of Crimson Editor can be found <a href="http://www.crimsoneditor.com/english/features.html" style="color: #2b6690;">here</a> .</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.crimsoneditor.com/" style="color: #2b6690;">Download Crimson Editor</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 13. VIM</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">When it comes to text editors, there are two holy grails - vim and emacs. Both are really great text editors, but both are complex and hence there is a slightly steep learning curve that you have to climb over before using them.</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_147fqpphddr_b" style="color: #2b6690;"><img height="509" src="http://docs.google.com/File?id=dcwmstfp_147fqpphddr_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> Vim stands for 'vi improved' denoting that it is an improved version of the earlier used vi editor. Vim can run in a wide variety of platforms including Windows, Linux and Mac OSX. The screenshot shown above is of Graphical vim (gvim).<br /> This <a href="http://en.wikipedia.org/wiki/Vim_%28text_editor%29" style="color: #2b6690;">Wikipedia page</a> would be a good starting place to know about vim. The <a href="http://www.vim.org/" style="color: #2b6690;">official vim site</a> and the <a href="http://vim.wikia.com/wiki/Main_Page" style="color: #2b6690;">vim tips wiki</a> page are also of great help to anyone starting out with vim.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.vim.org/download.php" style="color: #2b6690;">Download Vim</a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <br /></div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 30px; font-weight: normal; line-height: 32px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> 14. Emacs</h2> <span style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;">Emacs like vi has a very long history dating back to the 1970s. Emacs was written by hard core programmers intended to be used by hard core programmers - the type of people who would understand stuff like "emacs is an extensible, customizable, self-documenting, real-time display editor".</span><br /> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://docs.google.com/File?id=dcwmstfp_148hjmjzsd4_b" style="color: #2b6690;"><img height="375" src="http://docs.google.com/File?id=dcwmstfp_148hjmjzsd4_b" width="490" /></a></div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> The <a href="http://www.gnu.org/software/emacs/emacs.html" style="color: #2b6690;">GNU Emacs home page</a>, the <a href="http://www.gnu.org/software/emacs/tour/" style="color: #2b6690;">emacs tour</a> and <a href="http://xahlee.org/emacs/emacs.html" style="color: #2b6690;">this tutorial</a> are great places to start learning emacs.</div> <div style="background-color: white; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px;"> <a href="http://www.gnu.org/software/emacs/emacs.html#Obtaining" style="color: #2b6690;">Download Emacs</a></div> <br class="Apple-interchange-newline" />

14 สุดยอด Free Text Editor ที่ Programmer นิยมใช้มากที่สุด

1. Notepad++ นับว่าเป็น Free  Text Editor ที่นิยมใช้มากที่สุด เพราะใช้งานง่ายมากๆ ที่สำคัญ Support ภาษาไทยด้วย ผมใช้ตัวนี้มานานแล้ว ค...

อ่านเพิ่มเติม »

22 Best jQuery Dropdown Menus

<h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Create The Fanciest Dropdown Menu You Ever Saw</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Brian Cray teaches you how to create this stunning website dropdown navigation menu. The dropdown menu uses HTML, CSS and Javascript. You can also include the hoverIntent JQuery plugin for extra juicy effects.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Create The Fanciest Dropdown Menu You Ever Saw" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/fancydropdown.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Create The Fanciest Dropdown Menu You Ever Saw</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Sexy Drop Down Menu w/ jQuery & CSS</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Sexy Drop Down Menu w/ jQuery & CSS" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/noupe.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Sexy Drop Down Menu w/ jQuery & CSS</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Sliding Jquery Menu</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.</div> <div class="google_container" style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 30px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; vertical-align: baseline; width: 610px;"> <div class="google" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: center; vertical-align: baseline;"> </div> </div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Sliding Jquery Menu" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/sliding.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Sliding Jquery Menu</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Perfect Signin Dropdown Box Like Twitter</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> In this tutorial author will make an entry to show you how to create a login drop down with Twitter style using jQuery.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://aext.net/example/twitterlogin/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Twitter with jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/twitter-dropdown.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Perfect Signin Dropdown Box Like Twitter</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> How to Build a Kick-Butt CSS3 Mega Drop-Down Menu</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="How to Build a Kick-Butt CSS3 Mega Drop-Down Menu" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/mega-drop-down-menu.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on PHow to Build a Kick-Butt CSS3 Mega Drop-Down Menu</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> CSS3 Dropdown Menu</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.webdesignerwall.com/demo/css3-dropdown-menu/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="CSS3 Dropdown Menu" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/css3-dropdown-menu.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://webdesignerwall.com/tutorials/css3-dropdown-menu/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on CSS3 Dropdown Menu</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Create Vimeo-like top navigation</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> What I like the most is the menu that drops down when you hover search box. It offers you different search options that you can choose and narrow your search.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Create Vimeo-like top navigation" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/vimeo.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Create Vimeo-like top navigation</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> “Outside the Box” Navigation with jQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> This tutorial fill in all your creativity needs by mimicking the OS X dock and stacks.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://d2o0t5hpnwv4c1.cloudfront.net/358_jquery/example%20files/all-examples.html" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Outside the Box Navigation with jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/mac-dock.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on “Outside the Box” Navigation with jQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/navCode.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Some of these common functions are logging in, registering or even resetting a password, yet quite often in many cases we still provide users the same old experience – a separate page for logging in, another for signing-up and yet again another if you’ve forgotten what your login details were.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://addyosmani.com/blog/formbox/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/addyosmani.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://addyosmani.com/blog/formbox/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> jQuery Drop Line Tabs</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI. The menu also manages to sneak in a little CSS3, making use of the “border-radius” property to give each link within the sub ULs rounded edges when the mouse hovers over them.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="jQuery Drop Line Tabs" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/drop.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_tabs/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on jQuery Drop Line Tabs</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Create a jQuery category drop down</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Create ‘Browse Community’ button found on 9Rules.com</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://papermashup.com/how-to-create-a-jquery-category-drop-down/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Create a jQuery category drop down" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/category.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://papermashup.com/how-to-create-a-jquery-category-drop-down/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Create a jQuery category drop down</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Fancy Drop Down Menus Using CSS and JQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Author created a fancy drop down menus with CSS and JQuery. He have another tutorial on 99points in which he used some animated navigation. He used jQuery animate function and CSS to put some stylish effects. Also he used a background for navigation.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.99points.info/2010/09/fancy-menus-using-jquery-and-css/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Fancy Drop Down Menus Using CSS and JQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/fancy.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.99points.info/2010/09/fancy-menus-using-jquery-and-css/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Fancy Drop Down Menus Using CSS and JQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Create Simple Dropdown Menu Using jQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> In this post, we are going to create a simple dropdown menu with the help of jQuery, take a look at the demo of it first.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Create Simple Dropdown Menu Using jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/dropdown.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Create Simple Dropdown Menu Using jQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Simple jQuery Dropdowns</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://css-tricks.com/simple-jquery-dropdowns/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Simple jQuery Dropdowns" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/dropdowns.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://css-tricks.com/simple-jquery-dropdowns/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Simple jQuery Dropdowns</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> A Different Top Navigation</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> They will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="A Different Top Navigation" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/top.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on A Different Top Navigation</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> jdMenu Hierarchical Menu Plugin for jQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://jdsharp.us/jQuery/plugins/jdMenu/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="jdMenu Hierarchical Menu Plugin for jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/jdMenu.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://jdsharp.us/jQuery/plugins/jdMenu/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on jdMenu Hierarchical Menu Plugin for jQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Professional dropdown #2</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> his menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers. This is a little long winded but necessary as IE5.5 and IE6 do not understand the child selector.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.stunicholls.com/menu/pro_dropdown_2.html" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Professional dropdown #2" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/pro.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.stunicholls.com/menu/pro_dropdown_2.html" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Professional dropdown #2</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Animated Drop Down Menu with jQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Animated Drop Down Menu with jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/clarklab.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Animated Drop Down Menu with jQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Reinventing a Drop Down with CSS and jQuery</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Reinventing a Drop Down with CSS and jQuery" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/reinventing.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Reinventing a Drop Down with CSS and jQuery</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> Creating an Outlook Navigation Bar using the ListView and Accordion Controls</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls.</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://mattberseth.com/blog/2007/12/creating_an_outlook_navigation.html" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="Creating an Outlook Navigation Bar using the ListView and Accordion Controls" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/outlook.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://mattberseth.com/blog/2007/12/creating_an_outlook_navigation.html" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on Creating an Outlook Navigation Bar using the ListView and Accordion Controls</em></strong></a></div> <div class="hl2" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: none; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-color: rgb(231, 231, 231); border-top-style: solid; border-top-width: 1px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; height: 1px; line-height: 21px; margin-bottom: 0.8em; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> </div> <h2 style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #333333; font-family: 'Droid Sans', sans-serif; font-size: 22px; line-height: 24px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; padding-top: 10px; vertical-align: baseline;"> jQuery (mb)Menu 2.7 (New!)</h2> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!</div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://pupunzi.open-lab.com/2009/01/18/mbmenu/" rel="nofollow" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><img alt="jQuery (mb)Menu 2.7 (New!)" height="150" src="http://slodive.com/wp-content/uploads/2010/12/drop-down/mb.jpg" style="background-attachment: initial; background-clip: initial; background-color: #f0f0f0; background-image: initial; background-origin: initial; border-bottom-color: rgb(225, 225, 225); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-image: initial; border-left-color: rgb(225, 225, 225); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(225, 225, 225); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(225, 225, 225); border-top-style: solid; border-top-width: 1px; font-family: inherit; font-style: inherit; height: auto; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-width: 650px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; vertical-align: baseline;" width="600" /></a></div> <div style="background-color: white; border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #252525; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin-bottom: 20px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"> <a href="http://pupunzi.open-lab.com/2009/01/18/mbmenu/" style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0099cc; font-family: inherit; font-style: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" target="_blank"><strong style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><em style="border-bottom-width: 0px; border-color: initial; border-image: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">More Info on jQuery (mb)Menu 2.7 (New!)</em></strong></a></div> Credit By : <a href="http://slodive.com/web-development/best-jquery-dropdown-menus/">http://slodive.com/web-development/best-jquery-dropdown-menus/</a>

22 Best jQuery Dropdown Menus

Create The Fanciest Dropdown Menu You Ever Saw Brian Cray teaches you how to create this stunning website dropdown navigation menu. The ...

อ่านเพิ่มเติม »