We love jQuery! And one of the things its being used a LOT for at the moment is some lovely animated navigation elements.
We used to see some navigation elements designed in Flash – but now that it isn’t supported on any Apple mobile devices you’d have to be a complete lunatic to develop navigation elements in Flash (we recently started a discussion about this on LinkedIn which ran and ran!)
Adobe has cottoned on to this and has recently launched a preview of a new product – Edge – which animates using HTML5, jQuery and CSS3
Read our thoughts on Adobe Edge
Anyway – just as it looked like we would never be able to animate navigation elements of our sites again – along come HTML5, CSS3 and jQuery to save the day. Hurrah! Check out this lovely sliding jQuery menu on Fresh Egg’s new homepage
So – how’s it done then? There’s LOADS of jQuery navigation bar tutorials out there on the web, with more being added every day. Some of them are great, but there are a lot to sift through.
So – we’ve saved you the job by providing a list of our Top 10 jQuery Navigation Bar Tutorials below.
Of course – if you want to learn jQuery in depth – come along to our next jQuery course here in Brighton.
Top 10 jQuery Navigation Bar Tutorials
1) Apple Style Menu with Added Animation
This menu bar is in the same style as the Apple website and has a nice clean design, but has been improved with a nice sliding jQuery animation:
Demo | Tutorial
Read more
Posted by Aaron Charlie in jQuery Training, Web Design Training on August 19th, 2011 | 3 Comments »
Why not try our jquery training?
As the Flash / HTML5 debate goes on, people are looking for ways to achieve the same level of functionality that flash provides, without depending on an external plug-in. This may be possible for simple interactions, but the problem is making solutions that are cross-browser compatible, which can be really difficult. JQuery is a strong contender in the race to find solutions. Not always cross compatible there is a vast array of downloads and tutorials out there at the moment that can solve many of the problems.
Silicon Beach Training provide jQuery training, CSS Training, JavaScript Training, HTML5 Training, in Brighton, Sussex, UK
What is JQuery?
jQuery is one of the most famous, free and open source JavaScript library in use today. jQuery is a lightweight, cross-browser JavaScript library which is designed to simplify the client-side scripting of HTML.
Today numerous jQuery plugins has been developed and are available on the Internet to create dynamic effects which are much easier than any other flash tool.
Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.
This post lists some useful jQuery Plugins and tutorials that focus on JavaScript category browsing.
How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
JQuery drop-down
Check out this tutorial and download to see how you can create a drop-down with HTML5 and CSS3. In this tutorial you will also use jQuery to handle the effects and add finishing touches.
Using CSS3 there is no need to use of several background images and possibly an additional wrapping container or two and it relies (almost) purely on some of the new style properties, such as rounded corners and drop-shadows for example, that are available to supporting browsers. Not all browsers (IE being a usual suspect!) support these new rules, but it is possible to provide provide fall-back solutions for the browsers that can’t handle the new styles.
Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
Very simple jQuery Dropdowns
simple drop-downs with JQuery
If you want something really simple then check this one out. This tutorial will provide you with very stripped down code and minimal styling, yet still have all the functionality typically needed.
It includes:
- Cross-browser compatible (even IE 6)
- Multi-level and retains “trail”
- Very minimal styling (easy to adapt)
- Very minimal JavaScript (short bit of jQuery)
Simple JQuery dropdown tutorial
jQuery Drop Line Tabs
jQuery Drop Line Tabs
This tutorial shows you how to create a menu that 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.
jQuery Drop Line Tabs tutorial
Read more
Posted by Heather Buckley in jQuery Training, Web Design Training on January 27th, 2011 | 2 Comments »
