20个jQuery导航菜单设计实例教程

经典网页设计 2010年06月19日

对于我们前端设计师来讲,jQuery太过强大了。基本上,你需要用到的一些JS特效,直接在官方库中寻找即可。不再需要你去编写js,不需要再去考虑ie678/ff等兼容性问题。是的,我承认,我们已经越来越离不开它了。20个导航菜单实例设计,精典需要收藏

Create a Slick Tabbed Content Area using CSS & jQueryDemo | Details

Tabbed content is a great way to handle this issue and has been widely used on blogs recently. In this tutorial, author will show is how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally achieving the same thing using the jQuery library.

Navigation18 in Excellent jQuery Navigation Menu Tutorials

How to Make a Smooth Animated Menu with jQueryDemo | Details | Download

The author builds a menu and animates it with some smooth effects.

Navigation13 in Excellent jQuery Navigation Menu Tutorials

CSS Sprites2 – It’s JavaScript TimeDemo | Details

In this tutorial, author will show you how to create a navigation menu using jQuery to compete with flash based navigation.

Navigation15 in Excellent jQuery Navigation Menu Tutorials

jQuery Random Link Color AnimationsDemo | Details

In this tutorial author will show how to create menu using random colors to add a bit more dynamism and flair as jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.

Navigation20 in Excellent jQuery Navigation Menu Tutorials

Animated Drop Down Menu with jQueryDemo | Details | Download

In this tutorial, author will show you how to use jQuery for making Drop down menus are a really convient way to fit a large menu into a really small initial space.

Navigation19 in Excellent jQuery Navigation Menu Tutorials

Create an apple style menu and improve it via jQueryDemo | Details | Download

In this tutorial, Author will show you how to create the Apple-flavored Leopard-text-indent style in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

Navigation11 in Excellent jQuery Navigation Menu Tutorials

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQueryDemo | Details | Download

In this tutorial, author will show us what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. Author will also use jQuery to handle the effects and add the finishing touches for us.

Navigation1 in Excellent jQuery Navigation Menu Tutorials

How to Build a Lava-Lamp Style Navigation MenuDemo | Details | Download

In this tutorial, author will tell us on how to build a lava-lamp style menu using a JavaScript library.

Navigation2 in Excellent jQuery Navigation Menu Tutorials

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQueryDemo | Details | Download

In this tutorial, author will tell us how To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery.

Navigation3 in Excellent jQuery Navigation Menu Tutorials

Making Accordion Menu Using jQueryDemo | Details | Download

In this tutorial, author will show us how to create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Navigation4 in Excellent jQuery Navigation Menu Tutorials

jQuery idTabsDemo | Details | Download

In this tutorials author will show you how to use idtabs. idTabs is simple and easy to use.

Navigation5 in Excellent jQuery Navigation Menu Tutorials

Create a multilevel Dropdown menu with CSS and improve it via jQueryDemo | Details | Download

In this tutorial author will show you how to make a multilevel dropdown menu with a sleek touch

Navigation6 in Excellent jQuery Navigation Menu Tutorials

Using jQuery for Background Image AnimationsDemo | Details

In this tutorial author will show you how to create background image imagination with the help of jQuery.

Navigation7 in Excellent jQuery Navigation Menu Tutorials

Superfish – “menu jQuery plugin”

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript)

Demo | Details | Download

Navigation8 in Excellent jQuery Navigation Menu Tutorials

Drop down menu with jQueryDemo | Details

Here’s a drop down animated menu example made with jQuery.

Navigation9 in Excellent jQuery Navigation Menu Tutorials

Creating a Floating HTML Menu Using jQuery and CSSDemo | Details | Download

Author will show us how to make floating menus that move as you scroll a page. This is done using HTML, CSS and jQuery, and it’s fully W3C-compliant.

Navigation10 in Excellent jQuery Navigation Menu Tutorials

jQuery & CSS Example – Dropdown MenuDemo | Details

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

Navigation12 in Excellent jQuery Navigation Menu Tutorials

Designing the Digg Header: How To & DownloadDemo | Details | Download

In this tutorial, author will show you how to create a navigation menu just like the one used in Digg.

Navigation14 in Excellent jQuery Navigation Menu Tutorials

jQuery Tabbed NavigationDemo | Details

In this tutorial, author will tell us how to create jQuery tabbed navigation.

Navigation16 in Excellent jQuery Navigation Menu Tutorials

Color Fading Menu with jQueryDemo | Details | Download

In this tutorial, author will show you how to create a color fading efect with the help of jQuery.

Navigation17 in Excellent jQuery Navigation Menu Tutorials

网友评论
Top