61 Unusual Navigation Menus In CSS, Flash And JavaScript

<p><a class="aligncenter" href="http://www.1stwebdesigner.com/inspiration/unusual-navigation-menu/"><img alt="61 Unusual Navigation Menus In CSS, Flash And JavaScript" class="alignleft size-full wp-image-29262" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/bigthumbs/new-ones/navigation-preview_small.jpg" title="61 Unusual Navigation Menus In CSS, Flash And JavaScript Photo" width="150"></a> <span style="font-family:Arial">What is one of the aspect of a website that always needed? It is the navigation menu. <strong>Navigation menu</strong> is a useful part of  the website because it leads the user to different part of the website. Interaction to the website is the main use of the navigation menu.More and more great looking and user-friendly navigation menus are being created that gives  life to the websites. </span></p> <p><span style="font-family:Arial">I'll be featuring 61 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.</span><br> <strong><span style="text-decoration:underline"><span style="font-family:Arial"> </span></span></strong></p> <h2><strong><span style="text-decoration:underline">CSS – Based Navigation Menu</span></strong></h2> <p><strong> </strong></p> <p><strong> </strong></p> <p><strong>1. <a href="http://www.loodo.com.br/" target="_blank">Loodo.com</a></strong></p> <p>Casino-like game or snakes and ladders with the touch of colorful menu.</p> <p><a class="aligncenter" href="http://www.loodo.com.br/" target="_blank"><img alt="61 Unusual Navigation Menus In CSS, Flash And JavaScript" class="alignbottom size-full wp-image-29436" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-loodo.jpg" title="61 Unusual Navigation Menus In CSS, Flash And JavaScript Photo" width="570"></a></p> <p><strong>2. <a href="http://www.change.org/" target="_blank">Change.org</a></strong></p> <p>The calmness of the choice of color with the emboss feeling of the menu to reveal the submenus is a great choice for its advocacy change.</p> <p><a class="aligncenter" href="http://www.change.org/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29438" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-change.jpg" width="570"></a></p> <p><strong>3. <a href="http://acko.net/" target="_blank">Acko.net</a></strong></p> <p>Steven Wittens gives us another perspective or view of this menu.</p> <p><a class="aligncenter" href="http://acko.net/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29440" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-acko.jpg" width="570"></a></p> <p><strong>4. <a href="http://www.uxbooth.com/" target="_blank">UXBooth.com</a></strong></p> <p>UX Booth uses stylish yet simple menu.</p> <p><a class="aligncenter" href="http://www.uxbooth.com/"><img alt="" class="alignbottom size-full wp-image-29445" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-uxbooth.jpg" width="570"></a></p> <p><strong>5. <a href="http://macrabbit.com/" target="_blank">MacRabbit.com</a></strong></p> <p>MacRabbit uses a mac os or apple concept to its design.</p> <p><a class="aligncenter" href="http://macrabbit.com/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29446" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-mcrabbit.jpg" width="570"></a></p> <p><strong>6. <a href="http://www.joyent.com/" target="_blank">Joyent.com</a></strong></p> <p>Joyent uses simple, business looking menu that offers their works.</p> <p><a class="aligncenter" href="http://www.joyent.com/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29448" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-joyent.jpg" width="570"></a></p> <p><strong>7. <a href="http://www.nopokographics.com/english/" target="_blank">Nopoko Graphics</a></strong></p> <p>Elegance and simplicity of this portfolio gives you.</p> <p><a class="aligncenter" href="http://www.nopokographics.com/english/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29450" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-nopographics.jpg" width="570"></a></p> <p><strong>8.  <a href="http://www.icondesigner.net/" target="_blank">Icon Designer.com</a></strong></p> <p>Large images-based menu that will attract and will draw users attention. Not the usual menu that you see.</p> <p><a class="aligncenter" href="http://www.icondesigner.net/"><img alt="" class="alignbottom size-full wp-image-29451" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-icondesigner.jpg" width="570"></a></p> <p><strong>9. <a href="http://designsensory.com/" target="_blank">Designsensory.com</a></strong></p> <p>Drop down navigation that uses two colors that presents the active link to the passive one.</p> <p><a class="aligncenter" href="http://designsensory.com/"><img alt="" class="alignbottom size-full wp-image-29453" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-designsensory.jpg" width="570"></a></p> <p><strong>10.<a href="http://www.smallstone.com/index.php"> Smallstone.com</a></strong></p> <p>Small Stone recordings, a U.S. record label, uses a radio-like or  that so-called a the so-called <em>Space Echo</em> Roland SE-201 menu.</p> <p><a class="aligncenter" href="http://www.smallstone.com/index.php"><img alt="" class="alignbottom size-full wp-image-29454" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-smallstone.jpg" width="570"></a></p> <p><strong>11. <a href="http://tnvacation.com/" target="_blank">TNVacation</a></strong></p> <p>Feel of country or map-like that will let you travel to the whole website.</p> <p><a class="aligncenter" href="http://tnvacation.com/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29872" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/css-based-navigation-menu-tennessee.jpg" width="570"></a></p> <p><strong>12. <a href="http://aclevertwist.com/" target="_blank">Clever Twist </a></strong></p> <p>Rounded, apple application-like menu that offers application for your iPhones.</p> <p><a class="aligncenter" href="http://aclevertwist.com/"><img alt="" class="alignbottom size-full wp-image-29457" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-clevertwist.jpg" width="570"></a></p> <p><strong>13. <a href="http://clearleft.com/" target="_blank">Clear Left</a></strong></p> <p>Clearleft uses a calendar concept that makes a what-to-do stuff on a particular day feel.</p> <p><a class="aligncenter" href="http://clearleft.com/"><img alt="" class="alignbottom size-full wp-image-29458" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-clearleft.jpg" width="570"></a></p> <p><strong>14. <a href="http://www.tulumarka.com/galerije" target="_blank">Tulumarka</a></strong></p> <p>Pressed looking  to see the selected menu.</p> <p><a class="aligncenter" href="http://www.tulumarka.com/galerije" target="_blank"><img alt="" class="alignbottom size-full wp-image-29459" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-tulumarka.jpg" width="570"></a></p> <p><strong>15. <a href="http://arstechnica.com/" target="_blank">Ars Technica</a></strong></p> <p>Menu pressed reveals a submenu. Dark yet simple feel.</p> <p><a class="aligncenter" href="http://arstechnica.com/"><img alt="" class="alignbottom size-full wp-image-29462" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-arstechnica.jpg" width="570"></a></p> <p><strong>16. <a href="http://www.45royale.com/about/" target="_blank">45royale inc.</a></strong></p> <p>Nice hover effects  with this simple and clean menu.</p> <p><a class="aligncenter" href="http://www.45royale.com/about/"><img alt="" class="alignbottom size-full wp-image-29464" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-45royale.jpg" width="570"></a></p> <p><strong>17. <a href="http://www.cssbeauty.com/" target="_blank">CSS Beauty</a></strong></p> <p>The size of the letters are so cute and  not usual but that's what will caught your attention.</p> <p><a class="aligncenter" href="http://www.cssbeauty.com/"><img alt="" class="alignbottom size-full wp-image-29465" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-cssbeauty.jpg" width="570"></a></p> <p><strong>18. <a href="http://designintellection.com/portfolio/" target="_blank">Design Intellection</a></strong></p> <p>A good way to use a block navigation that shows an effective  hover effects.</p> <p><a class="aligncenter" href="http://designintellection.com/portfolio/"><img alt="" class="alignbottom size-full wp-image-29468" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-designintellection.jpg" width="570"></a></p> <p><strong>19. <a href="http://microformats.org/" target="_blank">Microformats</a></strong></p> <p>Leaf like plus the cool green color that suits into your eyes. From green to black that gives you on what menu you are.</p> <p><a class="aligncenter" href="http://microformats.org/"><img alt="" class="alignbottom size-full wp-image-29471" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-microformats.jpg" width="570"></a></p> <p><strong>20. <a href="http://www.ronnypries.de/#all" target="_blank">ronnypries.de</a></strong></p> <p>One of the best concept is to use a floor plan to navigate your users to the entire website is what Ronny Pries did.</p> <p><a class="aligncenter" href="http://www.ronnypries.de/#all"><img alt="" class="alingnbottom size-full wp-image-29473" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-ronnie.jpg" width="570"></a></p> <p><strong>21. <a href="http://www.tvrdek.cz/en" target="_blank">Jiri Tvrdek</a></strong></p> <p>Fruit bearing tree is one of the creative way to use a navigation menu.  It is like your harvesting a fruit and lead you to the taste or the content of the website.</p> <p><a class="aligncenter" href="http://www.tvrdek.cz/en"><img alt="" class="alignbottom size-full wp-image-29478" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-tvdrek.jpg" width="570"></a></p> <p><strong>22. <a href="http://www.mattdempsey.com/" target="_blank">Matt Dempsey</a></strong></p> <p>Brush strokes with the interchange of the colors over choosing a menu is what  Matt Dempsey did.</p> <p><a class="aligncenter" href="http://www.mattdempsey.com/"><img alt="" class="alignbottom size-full wp-image-29479" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-matt.jpg" width="570"></a></p> <p><strong>23. <a href="http://www.cognigencorp.com/" target="_blank">Cognigen</a></strong></p> <p>Presents a pressed and clear view of the navigation.</p> <p><a class="aligncenter" href="http://www.cognigencorp.com/"><img alt="" class="alignbottom size-full wp-image-29480" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-cognigen.jpg" width="570"></a></p> <p><strong>24. <a href="http://www.districtsolutions.co.uk/candidates/" target="_blank">District Solutions</a></strong></p> <p><a href="http://www.districtsolutions.co.uk/candidates/" target="_blank"></a>Vertical tab that looks like a folder that really works on this website.  Rarely use but really great to work with.</p> <p><a class="aligncenter" href="http://www.districtsolutions.co.uk/candidates/"><img alt="" class="alignbottom size-full wp-image-29481" height="700" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-districtsolution.jpg" width="570"></a></p> <p><strong>25. <a href="http://www.jeffsarmiento.com/" target="_blank">Jeff Sarmiento</a></strong></p> <p>Sloping Navigation that creates a creativity and a punk style looking menu that Jeff Sarmiento used.</p> <p><a class="aligncenter" href="http://www.jeffsarmiento.com/"><img alt="" class="alignbottom size-full wp-image-29483" height="350" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-jeff.jpg" width="570"></a></p> <p><strong>26.<a href="http://www.racket.net.au/" target="_blank"> Racket</a></strong></p> <p>It is like a hierarchy of menu up to its roots.  One of a kind navigation that added to the creativity of the website.</p> <p><a class="aligncenter" href="http://www.racket.net.au/"><img alt="" class="alignbottom size-full wp-image-29484" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-racket.jpg" width="570"></a></p> <p><strong>27. <a href="http://dfw-upa.org/" target="_blank">DFW</a></strong></p> <p>Icons gives emphasis on the interaction to the menu.</p> <p><a class="aligncenter" href="http://dfw-upa.org/"><img alt="" class="alignbottom size-full wp-image-29486" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/navigation-menu-css-dfw.jpg" width="570"></a></p> <p> </p><h2><span style="text-decoration:underline">Flash based Navigation Menu</span></h2> <p><strong>28. </strong><a href="http://iipvapi.com/" target="_blank"><strong>Iipvapi</strong><br> </a></p> <p>Photo clipping navigation menu with touch of hover color effects used in a Photo Clipping path services.</p> <p><a class="aligncenter" href="http://iipvapi.com/"><img alt="" class="alignbottom size-full wp-image-29715" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-iipvapi.jpg" width="570"></a></p> <p><strong>29. </strong><a href="http://moodstream.gettyimages.com/" target="_blank"><strong>Moodstream | Getty Image</strong><br> </a></p> <p>It is designed to squeeze your creative juices<a href="http://moodstream.gettyimages.com/" target="_blank"> </a>by tweaking the mood sliders navigation.</p> <p><a class="aligncenter" href="http://moodstream.gettyimages.com/"><img alt="" class="alignbottom size-full wp-image-29718" height="450" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-moodstream.jpg" width="570"></a>.</p> <p><strong>30. </strong><a href="http://www.notforgottenmovie.com/" target="_blank"><strong>Not Forgotten – The Movie</strong><br> </a></p> <p>Devilish, freaky and rise to the dead theme of the navigations presented into <a href="http://www.notforgottenmovie.com/" target="_blank"> </a>tarot-like cards.  The card will be put in fire if you clicked on it.</p> <p><a class="aligncenter" href="http://www.notforgottenmovie.com/" target="_blank"><img alt="" class="alginbottom size-full wp-image-29722" height="450" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-forgotten.jpg" width="570"></a></p> <p><strong>31.</strong><a href="http://waterlife.nfb.ca/" target="_blank"><strong>Waterlife</strong><br> </a></p> <p>The fluid navigation menu that brings you to the motion of a lake.</p> <p><a class="aligncenter" href="http://waterlife.nfb.ca/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29724" height="450" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-waterlife.jpg" width="570"></a></p> <p><strong>32. </strong><a href="http://www.narrowdesign.com/" target="_blank"><strong>Nick Jones</strong><br> </a></p> <p>Nick Jones uses a simple yet dynamic navigation for his portfolio. It's like pulling things up and down.</p> <p><a class="aligncenter" href="http://www.narrowdesign.com/" target="_blank"><img alt="" class="alignbottom size-full wp-image-29723" height="450" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-nickjones.jpg" width="570"></a></p> <p><strong>33. </strong><a href="http://www.marcecko.com/#/?query=08c77e3874039c55254ad8118086b967" target="_blank"><strong>Marc Ecko</strong><br> </a></p> <p>Marc Ecko presents an art gallery navigation that lets visitors to  tour for  art and philosophy.</p> <p><a class="aligncenter" href="http://www.marcecko.com/#/?query=08c77e3874039c55254ad8118086b967"><img alt="" class="alignbottom size-full wp-image-29729" height="450" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-marcecho.jpg" width="570"></a></p> <p><strong>34. </strong><a href="http://www.hbo.com/" target="_blank"><strong>HBO</strong><br> </a></p> <p>HBO , a tv-movie network, creates an interactive selection of movies for its navigation.</p> <p><a class="aligncenter" href="http://www.hbo.com/"><img alt="" class="alignbottom size-full wp-image-29735" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-hbo.jpg" width="570"></a></p> <p><strong>35. </strong><a href="http://www.gotmilk.com/#/gotmilkbrand/" target="_blank"><strong>Got Milk?</strong><br> </a></p> <p>An interesting navigation in a ribbon with a simple hover effect. When an icon hovered, the content menu is presented.</p> <p><a class="aligncenter" href="http://www.gotmilk.com/#/gotmilkbrand/"><img alt="" class="alignbottom size-full wp-image-29741" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-gotmilk.jpg" width="570"></a></p> <p><strong>36. </strong><a href="http://www.agencynet.com/" target="_blank"><strong>AgencyNet</strong><br> </a></p> <p>Stunning and amazing navigation design studio based in New York City, NY and Fort Lauderdale, FL.</p> <p><a class="aligncenter" href="http://www.agencynet.com/"><img alt="" class="alignbottom size-full wp-image-29744" height="570" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-agencynet.jpg" width="570"></a></p> <p><strong>37. </strong><a href="http://www.2advanced.com/" target="_blank"><strong>2Advanced Studios</strong><br> </a></p> <p>Stylish neo ancient navigation design with a background mural that leads us to another world.</p> <p><a class="aligncenter" href="http://www.2advanced.com/"><img alt="" class="alignbottom size-full wp-image-29753" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-2advanced.jpg" width="570"></a></p> <p><strong>38. </strong><a href="http://www.nickad.com/" target="_blank"><strong>NickAD</strong><br> </a></p> <p>Nick Ad uses a flexible but easy to use navigation. The stars that changes to a navigation when it clicks anywhere in the page.</p> <p><a class="aligncenter" href="http://www.nickad.com/"><img alt="" class="alignbottom size-full wp-image-29757" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-nickad.jpg" width="570"></a></p> <p><strong>39. </strong><a href="http://okaydave.com/" target="_blank"><strong>Dave Werner</strong><br> </a></p> <p>A creative person uses his own works to lead the users on his portfolio.</p> <p><a class="aligncenter" href="http://okaydave.com/"><img alt="" class="alignbottom size-full wp-image-29761" height="400" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-dave.jpg" width="570"></a></p> <p><strong>40. <a href="http://www.sectionseven.com/index2.html" target="_blank">Section Seven Inc</a>.</strong></p> <p>Section Seven has a colorful pamphlet like navigation with a sub menu written on it.</p> <p><a class="aligncenter" href="http://www.sectionseven.com/index2.html"><img alt="" class="alignbottom size-full wp-image-29764" height="400" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-sectionseven.jpg" width="570"></a></p> <p><strong>41. </strong><a href="http://www.cathybeck.com/" target="_blank"><strong>Cathy Beck</strong><br> </a></p> <p>A navigation that open and close like a scroll when choosing a menu.</p> <p><a class="aligncenter" href="http://www.cathybeck.com/"><img alt="" class="alignbottom size-full wp-image-29777" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-cathy.jpg" width="570"></a></p> <p><strong>42. </strong><a href="http://www.beside.ca/" target="_blank"><strong>Beside</strong><br> </a></p> <p>Beside uses a rainbow navigation that puts your colorful fantasies.</p> <p><a class="aligncenter" href="http://www.beside.ca/"><img alt="" class="alignbottom size-full wp-image-29779" height="250" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-besides.jpg" width="570"></a></p> <p><strong>43. </strong><a href="http://www.christiansparrow.com/" target="_blank"><strong>Christian Sparrow</strong><br> </a></p> <p>A cardboard concept of its portfolio. The navigation hovers a pencil-like drawing.</p> <p><a class="aligncenter" href="http://www.christiansparrow.com/"><img alt="" class="alignbottom size-full wp-image-29781" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-christian.jpg" width="570"></a></p> <p><strong>44. </strong><a href="http://www.enila.fr/" target="_blank"><strong>Enila.fr</strong><br> </a></p> <p>Small squares that put together that acts as the navigation and collaboration of works.</p> <p><a class="aligncenter" href="http://www.enila.fr/"><img alt="" class="alignbottom size-full wp-image-29783" height="400" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-enila.jpg" width="570"></a></p> <p><strong>45. </strong><a href="http://www.havaianas.com/#" target="_blank"><strong>Havaianas</strong><br> </a></p> <p>A colorful map that has the touch of the slipper texture that Havaianas proud about.</p> <p><a class="aligncenter" href="http://www.havaianas.com/#"><img alt="" class="alignbottom size-full wp-image-29784" height="400" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-havaianas.jpg" width="570"></a></p> <p><strong>46. </strong><a href="http://www.sqcircle.com/" target="_blank"><strong>Square Circle</strong><br> </a></p> <p>A table filled with stuffs that are related to the menu such as telephone for contact us, magazine for portfolio, newspaper for news and others. Real thing that use for navigation is a great thing.</p> <p><a class="aligncenter" href="http://www.sqcircle.com/"><img alt="" class="alignbottom size-full wp-image-29785" height="570" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-square.jpg" width="570"></a></p> <p><strong>47. </strong><a href="http://www.tbwahakuhodo.co.jp/" target="_blank"><strong>TBWA\HAKUHODO</strong><br> </a></p> <p>A great, artistic scenario use for navigation. Every element is a wonderful piece that gives life to the website. Rarely used but magnificent.</p> <p><a class="aligncenter" href="http://www.tbwahakuhodo.co.jp/"><img alt="" class="alignbottom size-full wp-image-29787" height="570" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/flash-based-navigation-menu-tb.jpg" width="570"></a></p> <p><strong><br> </strong></p> <h2><strong><span style="text-decoration:underline">JavaScript – Based Navigation Menu</span></strong></h2> <p><strong> </strong></p> <p><strong> </strong><a href="http://www.tbwahakuhodo.co.jp/"></a></p> <p><strong> </strong></p> <p><strong>48. </strong><a href="http://agamicreative.com/" target="_blank"><strong>Agami Creative</strong><br> </a></p> <p>Simple and eye pleasing of this navigation with the touch of  paint colors.</p> <p><a class="aligncenter" href="http://agamicreative.com/about/"><img alt="" class="alignbottom size-full wp-image-29795" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-agami.jpg" width="570"></a></p> <p><strong>49. </strong><a href="http://dragoninteractive.com/" target="_blank"><strong> Dragon Interactive</strong><br> </a></p> <p>It looks like the navigation is made up of Flash but it's not.  Clean, cool and stylish navigation with a hover effects of colors that made this navigation really pretty.</p> <p><a class="aligncenter" href="http://dragoninteractive.com/"><img alt="" class="alignbottom size-full wp-image-29797" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-dragon.jpg" width="570"></a></p> <p><strong>50. </strong><a href="http://www.whitehouse.gov/" target="_blank"><strong>The White House</strong><br> </a></p> <p>White House really holds up a lot of information for the public. It is easily manage with this drop down menu to contain all the contents.</p> <p><a class="aligncenter" href="http://www.whitehouse.gov/"><img alt="" class="alignbottom size-full wp-image-29798" height="350" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-whitehouse.jpg" width="570"></a></p> <p><strong>51. </strong><a href="http://www.ericj.se/" target="_blank"><strong>Eric Johansson</strong><br> </a></p> <p>Eric Johansson uses a JavaScript sliding menu to travel on it's website.</p> <p><a class="aligncenter" href="http://www.ericj.se/"><img alt="" class="alignbottom size-full wp-image-29801" height="570" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-eric.jpg" width="570"></a></p> <p><strong>51. </strong><a href="http://www.helmy-bern.cz/" target="_blank"><strong>Helmy Bern</strong><br> </a></p> <p>The navigation layout is in a grunge theme that also has a jQuery drop down effects.</p> <p><a class="aligncenter" href="http://www.helmy-bern.cz/"><img alt="" class="alignbottom size-full wp-image-29806" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-helmy.jpg" width="570"></a></p> <p><strong>52. </strong><a href="http://www.netdreams.co.uk/index.php/what-we-do/web-services/" target="_blank"><strong>Internet Dreams</strong><br> </a></p> <p>The creative hover effect is not usual but it gives a distinguish look over what menu users choose in.</p> <p><a class="aligncenter" href="http://www.netdreams.co.uk/index.php/what-we-do/web-services/"><img alt="" class="alignbottom size-full wp-image-29813" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-netdreams.jpg" width="570"></a></p> <p><strong>53.</strong><a href="http://www.panic.com/coda/" target="_blank"><strong> Panic -Coda</strong><br> </a></p> <p>Familiar and popular icons were used to navigate users easily.</p> <p><a class="aligncenter" href="http://www.panic.com/coda/"><img alt="" class="alignbottom size-full wp-image-29817" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-coda.jpg" width="570"></a></p> <p><strong>54. </strong><a href="http://www.taptaptap.com/" target="_blank"><strong>TapTapTap</strong><br> </a></p> <p>Restaurant menu-like navigation is really great. I really love this navigation because of its simplicity yet creative design.</p> <p><a class="aligncenter" href="http://www.taptaptap.com/"><img alt="" class="alignbottom size-full wp-image-29820" height="570" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-tap.jpg" width="570"></a></p> <p><strong>55. </strong><a href="http://www.arcinspirations.com/kobe/" target="_blank"><strong>Kobe</strong><br> </a></p> <p>This navigation uses a scroll to and scroll in plugin to create  an interesting transitions.</p> <p><a class="aligncenter" href="http://www.arcinspirations.com/kobe"><img alt="" class="alignbottom size-full wp-image-29830" height="150" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-kobe.jpg" width="570"></a></p> <p><strong>56. </strong><a href="http://bloghelpr.us/" target="_blank"><strong>BlogHelpr</strong><br> </a></p> <p>Floater design to use for navigation. It is the creative way to save the person in swimming into the website.</p> <p><a class="aligncenter" href="http://bloghelpr.us/"><img alt="" class="alignbottom size-full wp-image-29833" height="300" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-bloghelper.jpg" width="570"></a></p> <p><strong>57. </strong><a href="http://eyedraw.eu/" target="_blank"><strong>EyeDraw</strong><br> </a></p> <p>EyeDraw uses an expanding images whenever you hover the mouse over the menu.</p> <p><a class="aligncenter" href="http://eyedraw.eu/"><img alt="" class="alignbottom size-full wp-image-29838" height="400" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-eyedraw.jpg" width="570"></a></p> <p><strong>58. </strong><a href="http://www.andreashinkel.com/" target="_blank"><strong>Andreas Hinkel</strong><br> </a></p> <p>Andreas Hinkel uses Polaroid navigation for the animation effect.</p> <p><a class="aligncenter" href="http://www.andreashinkel.com/deutsch/home/home.html"><img alt="" class="alignbottom size-full wp-image-29845" height="400" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-adreas.jpg" width="570"></a></p> <p><strong>59. </strong><a href="http://www.museugulbenkian.org/eng/#archive/month/" target="_blank"><strong>Museu Gulbenkian</strong><br> </a></p> <p>The drag dock  navigation in the bottom is a great way to reveal and hide the menu and submenus.</p> <p><a class="aligncenter" href="http://www.museugulbenkian.org/eng/#archive/month/"><img alt="" class="alignbottom size-full wp-image-29851" height="350" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-museu.jpg" width="570"></a></p> <p><strong>60. </strong><a href="http://www.sapphiresound.ca/" target="_blank"><strong>Sapphire Sound</strong><br> </a></p> <p>The thumbnail used as a menu that has caption effect, custom scroll bar, and you also can see the fading, sliding animation.</p> <p><a class="aligncenter" href="http://www.sapphiresound.ca/"><img alt="" class="alignbottom size-full wp-image-29852" height="350" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-sapphiresound.jpg" width="570"></a></p> <p><strong>61. </strong><a href="http://www.slicemachine.com/" target="_blank"><strong>Design Slicing</strong><br> </a></p> <p>Transition effects is what  I really like on this navigation. The menu are set of questions that when hover are given answers.</p> <p><a class="aligncenter" href="http://www.slicemachine.com/"><img alt="" class="alignbottom size-full wp-image-29854" height="350" src="http://www.1stwebdesigner.com/wp-content/uploads/2010/10/javascript-based-navigation-menu-slicemachine.jpg" width="570"></a></p> <p>These are few navigation menu design that you can work out on your website but be sure that you don't want to get lost in the design and interactivity aspect of your navigation. Let your users be guided on the navigation you choose to deal with.</p><p>courtesy: <a href="http://www.1stwebdesigner.com/inspiration/unusual-navigation-menu/">http://www.1stwebdesigner.com/inspiration/unusual-navigation-menu/</a></p>

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

61 Unusual Navigation Menus In CSS, Flash And JavaScript

What is one of the aspect of a website that always needed? It is the navigation menu. Navigation menu is a useful part of  the website because it leads the user to different part of the website. …

Read more »