How to Make a Smooth Animated Menu with jQuery | Build Internet!
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

tutorial

Menu animado con jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we'll aim to do just that by building a menu and animate it with

How to Make a Smooth Animated Menu with jQuery

I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial. 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.

角丸のスライドダウングローバルナビをCSSで作る。

excellent flash site of a web development company

Javascript navigation control to manage alphabetical lists

"Navigation is an important part of web design from a usability perspective. However, links and navigation menus also provide opportunities to improve the visual appearance of the site, or to add some interesting effects. If you’re looking to create a navigation menu that stands out from the crowd, jQuery provides plenty of options. In this post we’ll feature 25 tutorials that will show you how to jQuery and CSS to create some interesting effects."

Nice styling of items for a restaurant menu or the like.

css for a restaurant menu price list

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make "filtering by category" a little more interesting with just a little bit of jQuery

5o exemples de menus de navigation Internet de qualité

How to Paginate Data with PHP

from NETTUTS

An explanation of how to paginate data using PHP -- code is included.

A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I last wrote about anything CSS-related. The one I’ll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.

Quick and easy Breadcrumb tutorial using CSS!

CSS menus of all types with downloadable code files

This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages. Rather than limit the amount of elements shown on the sever side, we decided to go with a client side solution for usability and SEO reasons. It also turned out nice to look at and fun to play with. It is smart in the sense that it collapses based upon the amount and length of the elements in the set. The breadcrumb uses a semitransparent .png overlay to achieve the gradient effect seen on the elements. Visually, it helps to show a "peek" at what is underneath.

miga de pan dinámica

Among designers, there are often discussions on the placement of actions in web forms that span several web pages. The quintessential question underlying this debate is: can an action that leads people to the previous step of a process be placed to the right of an action that leads users to the next step of a process?

previous next uie luke wroblewski

Prev & Next buttons... whats best and what isn't!

下拉菜单

s a very simple and flexible HTML ma

While a lot of Tabs-Scripts claim to be accessible it turns out, most of them are really not. While developing this jQuery Plugin with my coworker Artur Ortega, we tried to find a single existing Javascript powered Tabs-Interface that Artur, using his Screenreader, would actually be able to use properly. We eventually gave up the search.

jquery tabs

Using breadcrumb trails is a fairly straightforward affair, and there are only a few guidelines to consider before deciding to implement them on a website. Let’s take a look at some common mistakes to avoid.

By Jacob Gube On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website

Good Call-To-Action Buttons

When designing call to actions on a website (one of the important factors that determine your website's conversion rate) what are the strategic considerations you should keep in mind.

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.

Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down. Thus, the timing should be: 1. Wait 0.5 seconds. 2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds. 3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

Summary: Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.

Big, 2-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users' choices.

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table.

Nice editable table through jQuery

ナビゲーションメニューのデザイン実例30+ | Admix Web

パンくずいろいろ

7. Experimental Examples 実験的なパンくず

Make a Mega Drop-Down Menu with jQuery

SitePoint's Craig Buckler blogged yesterday about what he sees as the next big thing in web design: mega drop-down

Typically, a mega menu is a single drop-down that appears on hover, shows all the options in one large panel, groups options into related categories, uses icons or other graphics to help the user.

megadropdown

Mega drop-downs are half-way between the two concepts and similar to the ribbon introduced in Microsoft Office 2007

At Filament Group, we build elegant communications and interactions that help people understand, work, and collaborate effectively across a variety of media - from web sites to wireless, to interactive exhibits and print.

the iPod-style menu provides easy navigation of complex nested structures with any number of levels. The entire menu sits within a fixed-size area, and when a node is selected, by default a "Back" link appears below the menu to allow navigation to previous (parent) menus, or set options to show breadcrumb links above the menu options to both deliver feedback and allow quick access to nodes higher up in the hierarchy. A lateral iPod-style slide transition reinforces the notion that you're moving forward into more granular data, or backward into higher-level data. This menu is specifically useful in traversing deeply nested hierarchies, particularly those more than three levels deep. It also provides a more usable alternative to multi-level fly-out menus, which can present challenges to those with limited manual dexterity.

Cool Menu

nicely designed autosuggest results drop down!

"I always thought that the main navigation would be one of the most important elements of a website. I couldn’t believe it, so I set off to look for minimalist websites that didn’t use navigation. Sure enough, I found plenty." -- Dustin Boston

There is something elegant about simply working within the confines of a specific ruleset and achieving what you set out to do. Horizontally centered menus without css hacks.

There are many ways to design a navigation menu - and since almost all websites have some form of navigation - designers have to push their creative limits to build one that's remarkable and outstanding. In this article, you'll find a showcase of beautiful, creative, and stylish navigation menus for your inspiration.

There are many ways to design a navigation menu - and since almost all websites have some form of navigation - designers have to push their creative limits to build one that's remarkable and outstanding. In this article, you'll find a showcase of

Kacie Kinzer set out to discover how big city folk relate to their surroundings by releasing a number of cute, helpless robots onto the streets of New York with nothing but a sign asking passers-by to assist them in getting to their destination. Over the course of the following months the Tweenbots were successful in rolling from their start point to their far-away destination assisted only by strangers. Every time the robot got caught under a park bench, ground futilely against a curb, or became trapped in a pothole, some passerby would always rescue it and send it toward its goal. Never once was a Tweenbot lost or damaged. Often, people would ignore the instructions to aim the Tweenbot in the “right” direction, if that direction meant sending the robot into a perilous situation. One man turned the robot back in the direction from which it had just come, saying out loud to the Tweenbot, “You can’t go that way, it’s toward the road.”

heel leuk

Cardboard robots prove that crowdsourcing works and that people are nice.

The Reeves and Nass of the mini-robots. This is such a great result.

In New York City, we are very occupied with getting from one place to another. I wondered: could a human-like object traverse sidewalks and streets along with us, and in so doing, create a narrative about our relationship to space and our willingness to interact with what we find in it? More importantly, how could our actions be seen within a larger context of human connection that emerges from the complexity of the city itself? To answer these questions, I built robots. Tweenbots are human-dependent robots that navigate the city with the help of pedestrians they encounter. Rolling at a constant speed, in a straight line, Tweenbots have a destination displayed on a flag, and rely on people they meet to read this flag and to aim them in the right direction to reach their goal. Given their extreme vulnerability, the vastness of city space, the dangers posed by traffic, suspicion of terrorism, and the possibility that no one would be interested in helping a lost

Web page button designs

Button Design Showcase

Button design is something that may be considered a small detail and doesn't often get a lot of attention, but well-designed buttons can make a big difference in the overall look of a site. In this post we'll look at 40 buttons that come in a variety of shapes, sizes, styles and colors. If you enjoying seeing great examples of button design, you may also like: 50+ Gorgeous Navigation Menus 50 Gorgeous Navigation Menus - Part 2 GoodBarry

Features jeremycowart.com as an example of a site that uses unique flash techniques.

15 Unique Flash Gallery Techniques

スクロールしたとき、いつでも画面Topに戻るボタンを表示するjQueryのプラグイン

Navigation

Spoonfed Design is a blog for designers and developers to get inspired, learn new techniques, and pick up new ideas or resources.

very good collection of menus and interesting collection

Jquery Info

Wie sollte ein benutzerfreundliches Dropdown aussehen? Mit Beispiel.

Recently we showed you some exceptional CSS navigation techniques and we’d like to follow that up with an article about JavaScript-based navigation examples that you can use. Keep in mind that some of these techniques might not work if the client browser has JavaScript turned off (on average, 5% of users have JS disabled according to W3 web statistics).

15 Excellent jQuery Navigation Techniques and Solutions

Along with content, most would agree that navigation is one of the most important aspects of any website. That's why it's crucial to make site navigation

Search Result page

Structure and navigation must support each other and integrate with search and across subsites. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.

Here we go again, enjoy my collection of navigation menu. * Accordion Menu * Dock Menu * Navigation/Drop Down Menu * Slide Menu * Tree View Accordion Menu * Dynamic drive Accordion menu Dynamic drive Accordion menu | Demo * jQuery Accordion Menu i-MarcojQuery Accordion Menu | Demo * Horizonal Accordion Menu Horizonal Accordion Menu | Demo * Bassistance jQuery Accordion Bassistance jQuery Accordion | Demo * Designreviver Horizontal Accordion Designreviver Horizontal Accordion | Demo * Phatfusion Image Menu Phatfusion Image Menu | Demo Dock Menu * iconDock iconDock | * jQ Dock jQ Dock | Demo * CSS Dock Menu jQuery + Fisheye CSS Dock Menu jQuery + Fisheye | Demo * MacStyleDock MacStyleDock | Demo * Mootool Fisheye Mootool Fisheye | Demo * Dojo Fisheye Dojo Fisheye | Demo * euDock euDock | Demo * cornerDock cornerDock | Demo

30 Javascript Menu Plugins and Scripts | Queness

Flash design is being used less and less within web design nowadays, ads and games aside. We all know how about its down sides, and everyone certainly hates the “Click here to open in Full Screen” links that are, fortunately, not being used as much as in years gone by. There is no denying it though, visually Flash is beautiful. Is it time for a revival? Below we have 22 Flash Menu and Navigation Tutorials, they can all be used for all website designs, whether it be CSS or Flash.

Doporučení, která se týkají dobré navigace a používání webu

Rachel Nabors details how we can help user through navigation and contextual design.

objects slide into frame

nice animation on movements - good attention to detail

Martini Asti jest doskonałym winem na każdą okazję. Świeży smak i aromat winogron Moscato, kwintesencja włoskiego winiarstwa.

nav flash graphic pimpsite

buttons

36 Eye-Catching Menu Structures by 1stwebdesigner

Faceted search, or guided navigation, has become the de facto standard for e-commerce and product-related websites, from big box stores to product review sites. But e-commerce sites aren’t the only ones joining the facets club. Other content-heavy sites such as media publishers (e.g. Financial Times: ft.com), libraries (e.g. NCSU Libraries: lib.ncsu.edu/), and even non-profits (e.g. Urban Land Institute: uli.org) are tapping into faceted search to make their often broad-range of content more findable. Essentially, faceted search has become so ubiquitous that users are not only getting used to it, they are coming to expect it.

Interesting breakdown of some cool CSS approaches.

css3対応ブラウザ限定技

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. Step1. HTML First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation. view plaincopy to clipboardprint? 1. <ul class="topnav"> 2. <li><a href="#">Home</a></li> 3. <li> 4. <a href="#">Tutorials</a> 5. <ul class="subnav"> 6. <li><a href="#">Sub Nav Link</a></li> 7. <li><a href="#">Sub Nav Link</a></li> 8. </ul> 9. </li> 10. <li> 11. <a href="#">Resources</a> 12. <ul class="subnav"> 13. <li

Advanced docking using jQuery

Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience. Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said: “Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.” In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project.

10 Tips to Create a More Usable Web

How to Create a CSS Menu Using Image Sprites

All of a sudden I have a keen interest in getting a GPS.

ウェブデザインを作るためのPhotoshopチュートリアル16選

Tutorials for creating web designs are a great way to learn new techniques and get inspired by new design concepts. Since Photoshop is the design tool of choice

Tutorials for creating web designs are a great way to learn new techniques and get inspired by new design concepts. Since Photoshop is the design tool of choice for many web designers, I thought it would be useful to show you, what I believe, are the best Photoshop tutorials for creating web designs and web design elements.

TUTORIALES PARA DISEÑO WEB CON PHOTOSHOP MUY RECOMENDABLE

(no description)

Just about every website uses the regular navigation concepts we're all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn't new, it's certainly not common.

Best Practices and Solutions | Design Showcase | Smashing Magazine. A module tab is a User Interface (UI) design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control.

discussion of the use of module tabs or subtabs within a page

The most extensive post I've seen on Tabs, ever. Well done SM.

Module tabs are seeing an increase of use as websites and web applications push for optimizing web page screen areas without sacrificing the amount of information presented at once. For example, in weblogs, they are used in secondary content sections (such as the sidebar) to present relevant and interesting information such as a listing of blog posts which users can interact with to get to web pages quicker. This inevitably allows for an unobtrusive and compact manner of presenting content. This article discusses the use of the module tabs design pattern for use in websites and web-based applications. We share with you some best practices to consider when using module tabs, a listing of real-world examples of websites the take advantage of module tabs, as well as tutorials and free downloadable scripts for building and deploying module tabs in your sites.

Simple Tabs w/ CSS & jQuery

css jQuery menu

menu

背景色をアニメーションで変更

メニューの背景画像をアニメーションで切り替えてくれるjQuery

Cool rollover / hover effect

Blend Images on hover for CSS Backgrounds

jQuery plugin effect for CSS backgrounds

Verschiedene Künstler zeigen ihren Arbeitsplatz

Super cool micro-site done in PV3D

web design navigation. core nav, doc nav, classification path etc

recusos de diseño, navegación

The navigation is a key element in web design, when creating your website it's crucial to use the appropriate menu in context. The following collection

jQuery Sliding Tab Menu for Sidebar Tutorial | Queness - http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial

jQuery Sliding Tab Menu for Sidebar Tutorial

usar javascript con jquery para usar en menus

Not too long ago I wrote a tutorial on how to create a drop down menu with CSS & jQuery, today I would like to go over how to create a simple navigation

We saw different methods and techniques that truly speak to the designer’s capabilities and creativity. A great way to distinguish yourself from the crowd is to have a truly unique user interface. Although there are many possibilities, you should carefully plan each project on its own. Not all techniques provide a solution for everything. Some of them are very helpful and easy to implement, but some lack usability and simplicity.

ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種

interesting option go to near the bottom with "We're Done" Demo

When designing a new site, web designers usually face the age-old question: vertical or horizontal navigation? There are pros and cons to both solutions. One

Horizontal Scrolling was considered evil before, but now it’s considers as one of a unique way ( mostly for showcasing Things) of approach in web design, And it seems that in most cases it is really put to use in an intelligent way, horizontal scrolling is not good idea in every situation, but when done properly they can really make a website standout, after checking out these samples you can see how it can actually be an interesting interface

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).

That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that

jQueryでアニメーションするナビボタン。綺麗。

オサレなナビゲーションサンプル

CSS?

navigation flash (on dessine des formes pour voir des rubriques)

Buen tutorial de como crear un bonito menú "dropdown", usando jQuery y CSS.

Drop-down menu (also known as pull-down menu) is an essential in most web design. It plays important role in the creation of an effective and user friendly

This looks a lot like what you normally use

really good

inspiration for my own site

Naview is a navigation preview tool for rapid information architecture prototyping from Volkside. It helps information architects design and visualise a new navigational structure and aims to bridge the gap between card sorting and IA user testing.

Another example of a validation prototype tool

Volkside | Naview - Navigation preview tool for rapid IA prototyping

Navigation preview tool for rapid IA prototyping

quick prototypes of hierarchical menus. via katja.

scroll que segue o mouse! :)

So, in this tutorial, we will learn how to create a scroll menu. We will achieve the following objectives: Keep html as simple as possible, and let jQuery and CSS do the rest. Scoll up and down according to mouse-Y axis Use jQuery.color plugin to animate the background-color changes - download jQuery.color (Yes, you will need this to animate the background color, I thought it will do it by default, obviously it doesn't! )

jQuery big Horizontal scroll menu

How to build faster loading websites utilizing image sprites and CSS.

Using CSS sprites allows you to greatly increase your websites speed by using single image files that contain multiple graphics. This tutorial will show you how to use CSS sprites of your own!

Using CSS sprites allows you to greatly increase your websites speed by using single image files that contain multiple graphics. In other words, when you have many images to be used, instead of having them as different individual files, we combine them into one. Therefore, the client computer only downloads one image for all the different graphics to be displayed.

uery Tutorials For More Int

30+ menus de navegação

jQuery Horizontal Menu

jQuery 橫向動態導航選單

portfolios designed using google maps

The Good, The Bad, & The Ugly of User Interface Design UI Trends (uitrends.com) is intended to be 1. a dynamic light-weight repository for interesting user interface designs and trends for website and web applications 2. a place to comment on and discuss user interface designs and trends 3. a source of inspiration for designers and developers

site where you can vote up or down a trend in ui design

Hello again, it’s time for comprehensive programming article. Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In this post I’ve selected 14 jQuery navigation menu tutorials that you can learn from them how to impalement your own jQuery based navigation and have some great effects.

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a

A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a Lista desplegada como arbol.

10 incredible JQuery navigation menus

Here are 30+ fresh and amazing jQuery plugins and tutorials which i have hand-picked from jQuery articles or plugins published in last 30 days on the interwebs. If you are looking for latest on jQuery, then this is a must read for you.

Good navigation gets you places. More importantly, good navigation gets you places without a headache. Even though there are certain exceptions, most websites would be dead in the water without sensible navigation between pages.

navigation usability inspiration

Lava Lamp on tab navigation and content

ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu.

By http://bit.ly/Tweets2Delicious

In this column, I’ve presented five best practices for designing filters for faceted search results. Of these, I think the first—choosing either drill-down or parallel selection—is the most important. If you choose your filter value-selection paradigm correctly, you are already half way there.

Five best practices for designing filters for faceted search results. Of these, I think the first—choosing either drill-down or parallel selection—is the most important.

Recently, Office Depot redesigned their search user interface, adding attribute-based filtering and creating a more dynamic, interactive user experience. Unfortunately, Office Depot’s interaction design misses some key points, making their new search user interface less usable and, therefore, less effective. That’s the bad news. The good news is that the Office Depot site presents us with an excellent case study for demonstrating some of the important best practices for designing filters for faceted search results, as follows:

Recently, Office Depot redesigned their search user interface, adding attribute-based filtering and creating a more dynamic, interactive user experience. Unfortunately, Office Depot’s interaction design misses some key points, making their new search user interface less usable and, therefore, less effective. That’s the bad news. The good news is that the Office Depot site presents us with an excellent case study for demonstrating some of the important best practices for designing filters for faceted search results, as follows: 1. Decide on your filter value-selection paradigm—either drill-down or parallel selection. 2. Provide an obvious and consistent way to undo filter selection. 3. Always make all filters easily available. 4. At every step in the search workflow, display only filter values that correspond to the available items, or inventory. 5. Provide filter values that encompass all items, or the complete inventory. By following the attribute-based filtering desi

I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. Take a look at my top navigation, you should see that the “Blog” link is in its active state. This technique is what you will be learning today. Take a look at the demo below to get a preview of what you will be creating. Also if you would like to download the PSD that we will be working with, go right ahead.

html+cssだけで、jsもphpも使わずメニューの現在地を取得する方法

nice menu tutorial

The importance of download speed, for most Web users, has long been established (King 2008). Fast response times foster higher flow states (Skadberg

In a recent usability survey, researchers from Southern Illinois University found that after ease of use, men prefer fast download speed to easy navigation. Women prefer ease of use, easy navigation, and accessibility. The researchers hypothesize that these different usability criteria are due to differences in how men and women use the Web

vitesse accès conditionne utilisation services

In a survey of 301 undergraduates on the importance of different web usability criteria, researchers from Southern Illinois University found that after ease of use, men prefer fast download speed over easy navigation (Pearson & Pearson 2008). Women prefer ease of use, easy navigation, and accessibility. Figure 1 shows the differences among genders for the most important factors in assessing web usability.

"In a recent usability survey, researchers from Southern Illinois University found that after ease of use, men prefer fast download speed to easy navigation. Women prefer ease of use, easy navigation, and accessibility. The researchers hypothesize that these different usability criteria are due to differences in how men and women use the Web." (via Zeldman.com)

David Walsh Blog Become a complete programmer with PHP, CSS, MooTools, jQuery, and ∞.

css sliding doors technique

backbutton

jQuery BBQ enables simple, yet powerful bookmarkable #hash history via a cross-browser window.onhashchange event. In addition, jQuery BBQ provides a full jQuery.deparam() method, along with both fragment and query string parse and merge utility methods.

jQuery BBQ enables simple, yet powerful bookmarkable #hash history via a cross-browser window.onhashchange event.

Collezione menu jQuery

One of the most important website element without content or design is navigation. You have to make site navigation intuitive, engaging and useful. jQuery is an excellent choice for achieving this. Check out these 26 incredible jQuery plugins for creating excellent website navigation. Download the pre-built scripts and add the code along with the jQuery framework to quickly and easily enhance your web designs. In this useful list for every webdesigner and developer you’ll find 26 tutorials that will show you how to create amazing navigation with jQuery and CSS.

Lista de Itens em formato dropdown

iHwy jquery listmenu plugin - dropdown menu navigation for lists - http://www.ihwy.com/labs/demos/current/jquery-listmenu-plugin.aspx

crea menu da liste di dati varie

8 different ways to beautifully style your HTML lists with CSS

I like to be confident with post titles, but the reality in this case is a *possible* solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).

Navi scroll

inline-block;

Beautiful And Creative Navigation Menus

Have you ever seen a tabbed content area in a sidebar that was a little jerky? The jerkiness can be caused by a bunch of things, like the content in the

The plan is to build a tabbed area, something pretty simple to do from scratch with jQuery, and then make it behave better. Of course, we’ll keep it simple, and keep the markup clean and semantic. The guts of the functionality will be based on calculating heights and animating between those heights on the fly.

Menus Websites

I am not an SEO expert. I said not long ago that I believe it's mostly just a matter of common sense. However, I do find the subject interesting. Being the #1

I am not an SEO expert. I said not long ago that I believe it’s mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should. One of the SEO principals that really seems to make sense to me, is having the most important content on the page as close to the top of the HTML markup as possible.

Tutorial on creating an Animated Navigation Bar Using HTML, CSS & jQuery.

Barra de navegação com animação ao passar o mouse (jQuery)

Rotating tabbed box

Great tutorial that helps explain the logic behind the jquery used to create a general tabbed box.

Advanced jQuery Tabbed Box

code for an html and css dropdown menu

Learn to build a Mega Drop Down Menu from scratch with CSS & jQuery. Easy to learn in 6 steps - Requires basic knowledge of CSS and jQuery.

A new trend for ecommerce sites in having what they call “mega drop down menus”. According to usability expert Jakob Nielson, mega drop down menus tested to be more efficient for large scale websites. I decided to experiment with different ways of implementing this technique and would like to share how I achieved this method.

Desizn Tech: Web Design, Graphic Design, Photography and Tech Blog. Have bookmarked at CSS Menu entry. Worthwhile checking out the rest of the site. Some useful freebies.

10 Image Free Sexy CSS Menu and How to Create One - http://desizntech.info/2009/05/10-image-free-sexy-css-menu-and-how-to-create-one/

CSS Menu and How to Create One

Simple Css Menu rounded

今回は、JQueryを使って簡単に導入できるドロップダウンメニューをいろいろとご紹介。 ブログなどでも利用できるシンプルなものをなるべくピックアップしてまとめてみました。 初心者の方には、マウスオーバー時のメニューのでかたがそれぞれ微妙に違っていたりするので、好みのエフェクトを見つけて使ってみてもいいかもしれませんね。 Simple jQuery Dropdowns デモ | ダウンロード シンプルで、簡単に使えそうですね。 Simple jQuery Dropdowns droppy – Nested drop down menus デモ | ダウンロード マウスオーバーでメニューが上から下にピロっとでます。 droppy - Nested drop down menus Create a multilevel Dropdown menu with CSS and improve it via jQuery デモ | ダウンロード こちらのメニューもいい感じのエフェクトがかかってます。 Create a multilevel Dropdown menu with CSS and improve it via jQuery Superfish デモ | ダウンロード アルファがかかったエフェクトがいい感じです。 Superfish SuckerFish Style デモ こちらもアルファがかかったエフェクトです。 SuckerFish Style jQuery & CSS Example – Dropdown Menu デモ こちらは、シンプルなドロップダウンメニュー jQuery & CSS Example - Dropdown Menu jQuery Simple Drop-Down Menu Plugin デモ | ダウンロード jQuery Simple Drop-Down Menu Plugin Drop down menu with jquery デモ Drop down menu with jquery mcDropdown jQuery Plug-in デモ | ダウンロード セレクトボックスも、JQueryでカスタマイズできます。 mcDropdown jQuery Plug-in jquery.combob

jQueryで作るドロップダウンメニュー。メニューが画像の場合、つてのがやっぱないんだよなぁ…。

Bubble Effect with CSS | AEXT.NET

Bubble Effect with CSS | AEXT.NET - http://aext.net/2009/11/bubble-effect-with-css/

In this tutorial we will see how to create an AJAX website without lose the reference to the URL. What is that not lose the reference? If you have created some full AJAX website you have realized when you change the web content, the URL is not updated, so, the URL reference is lost. Services like Gmail uses it to increase the navigation’s user experience.

15 Handpicked Fresh and Useful jQuery Tutorials

สุดยอดรวมสคริปต์ดีๆที่ไม่ควรพลาด

jQuery has really simplified the work flow for web designers. Even someone with basic javascript understanding can use it. These tutorials are proof of that. In

There are plenty of drop-down menus using javascript and CSS already available, but most of them are either too basic (with CSS) or too complicated (with Javascript). That’s why I publish this drop down menu solution which is using CSS only, but it has a smooth drop effect and the css sprites that changes the toggle icon jQuery-likely. Honestly, this is the most completed menu solution using CSS which comes along with awesome effects.

Usability Testing Resources

The navigation might be the single most important aspect of a web design's usability. Without a navigation, you would be stuck on the home page for a very long

30 Website Navigations that Make You Wanna Click It

How To: Breadcrumbs in Wordpres

Wer`s dreidimensional mag.....

Digital Podge 2009 - infographic-style website

The use simple datavis to show the website infos

Great charts & infographics

CSS is a very important element of what we call a structurally sound web design. CSS turns strips of code and interactive features into a working design. This

CSS is a very important element of what we call a “structurally sound” web design. CSS turns strips of code and interactive features into a working design. This is especially true for CSS based menus. Giving your users a creative way to interact with pages, categories, and other aspects of your site is a great way to keep them coming back. Not only that, but your navigation will be easily accessible since it will stand-out. Your users won’t get lost, they’ll always know how to get to where they need. If you want to find out the different CSS features you can incorporate into your navigation, it’s important that you view other menus as inspiration, and you know how they work. Below we’ve hand-selected 30 Best CSS Techniques for a Unique Navigation that are sure to bring creativity to your menu.

Today we are making a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects. ДЛя babyset

When designing a large website, especially one that contains a store, you may be required to design a system for ordering online, or a multi-step process of another...

Muy interesante

Filtering Blocks | CSS-Tricks - http://css-tricks.com/filtering-blocks/

30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials - http://www.1stwebdesigner.com/inspiration/cutting-edge-examples-css-navigation/

10 Ways to Install Accordion Menus in Your Wordpress Theme | Pro Blog Design - http://www.problogdesign.com/design/10-ways-to-install-accordion-menus-in-your-wordpress-theme/

Today you will learn 10 ways to install accordion menus in your Worpress theme! This will help to organize your blog, make your site look more professional, and possibly save you some precious real estate in your layout. Real estate on a blog is as important as it is in the real world (especially in congested areas), you need to make the most out of your space as you can. Accordion menus get their name from the instrument of the same name. Much like the bellows going in and out as someone plays music on an accordion, an accordion menu expands and contracts from user interaction, one section at a time. This way top level names are listed at all times, but sub-categories and child items are only exposed as each section is expanded. Your visitors only see what they need to at any given time.

Hier wird von Photoshop bis XHTML erklärt, wie man ein Website-Navigation mit Sprites aufbaut.

jQuery “flash like” menu

When you rollover one item of your menu, the font-size expand to 225%, the color fade to yellow and the other items are giving more space to the hovered item, when you roll out it will take its place back in the menu.

How to Make a CSS Sprite Powered Menu | Build Internet! - http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/

Tutorial de un menu on sprites

Web Design, Development, and Business

CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル

In this tutorial we are making sweet AJAX-powered tabs with CSS3 and the newly released version 1.4 of jQuery

Sweet AJAX Tabs With jQuery 1.4 & CSS3 – Tutorialzine - http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/

onglet et navigation

要jQuery

これはかっこいいな！

hot!

tahání myší

Кто сказал, что реклама это плохо?! Нет, она может быть такой.

sweet interaction

Nice "mega-menu" style plugin for jQuery

An horizontal navigation menu written in jQuery, with an useful space for secondary content coming out on rollover.

dropdown menu

Web designs with exceptional forms of navigation « CreativityDen - http://blog.creativityden.com/web-designs-with-exceptional-navigation/

Speckyboy

In May last year we published an article entitled 22 CSS Button Styling Tutorials and Techniques, it proved to be pretty popular, and the most amazing thing about that post is that none of the tutorials even touch on the subject of CSS3.. What a difference a year makes!

ナビゲーションメニューのデザインショーケースの紹介。この記事からリンクしている「ウェブデザインにおける効果的なコミュニケーションの取り方」は、先日紹介した「Clear And Effective Communication In WebDesign」の意訳版ですね。

Smashing

This is a Tech weblog discussing programming, Web design and usability, and random things found on the Web. The site is maintained by Youssef ELALAOUI.

7 Vertical Menus With jQuery Effects

Ventanas desplegables

the Pure Grips example is the best one

25 Mega Menus for Your Design Inspiration

Navigation is a critical element to any website. Mega menus are a current trend that take drop down menus a step further in attempt to make it easier for visitors to navigate through a large site.

Worth reading when willing to experiment and investigate jQuery. Hopefully that's soon.

Facebook , Footer BAR

Design inspiration twitter clone

Fixed Fade Out Menu: A CSS and jQuery Tutorial | Codrops - http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/

Overlay toolbar

Tutoriais para usar o CSS 3 agora

CSS3はゆっくり、しかし、確実に主流のウェブデザインにこっそり入っていますが、小線量でますます多くのデザイナーがそれを使用していますが、確かに、それははずみがついています。 本当にウェブデザインのためのおもしろい時間です。 数週間前では、私たちはCreating ButtonsがCSS3ボールをただ回転させ始めるように20CSS3 TutorialsとTechniquesと呼ばれる記事を発表して、今回、CSS3が提供する素晴らしい新しい資産を利用する何らかのメニューとナビゲーションのテクニックに焦点を合わせます。 念頭で剥き出してください。だいたいこれらのチュートリアルが荒野の用法のために書かれていなくて、それらが、より実験的です、何に関するデモンストレーションがあることができるかということであることは、達成されて、近い将来、使用されるでしょう。 これらのチュートリアルからのデモのすべてが完全によくChromeとSafari(それにしても小さい方の食い違いで)、Firefoxで2、3の(特に3.6にひどく見えさえするZurbs OS X Dock)との戦いをします、そして、IEはかなり驚いたことにデモの大部分を予想より良くしました。

CSS3 is slowly but surely creeping into mainstream web design, more and more designers are using it, albeit in small doses, but it is certainly gathering momentum. It is an exciting time for web design. A few weeks back we published an article called 20 CSS3 Tutorials and Techniques for Creating Buttons, just to start the CSS3 ball rolling, this time around we focus on some menu and navigation techniques that make use of the wonderful new properties that CSS3 offers.

menus de navegação com css3

A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a

A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.

Cool collapsing column trick

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

An accordion grid created using CSS & Jquery

sweet magical slider behind the menuitems with jquery

with rounded CSS3 corners

Page de démo présentant des menus déroulants créés uniquement avec un fichier CSS 3 (sans javascript)

criar um fundo único deslize para fora do menu

so cute! I want to do this.

A very impressive demo of reflection and shaddown on icons

2008年も残すところあとわずかですね。 今回は、今年のウェブデザイン総まとめ第一段といたしまして、ナビゲーションメニューのデザインをお送りします。 ウェブデザインには、欠かせないナビゲーションメニュー。とてもきれいなサンプルがいっぱいです。

ナビゲーション、メニューのデザイン

ナビゲーションメニューデザインの参考リンク集

plugin menu zoom

Herramienta para test de navegación rápidos en páginas web

モックアップのユーザビリティーをテストできるサイト

test de usabilidad que los diseñadores web

Vimium - the hacker's browser http://vimium.github.com/ (via @Woork)

vimperator for chrome!

Vimium is a Google Chrome extension which provides keyboard shortcuts for navigation and control in the spirit of the Vim editor. Watch this video to get a feel for how it works:

Vimium is a Google Chrome extension which provides keyboard shortcuts for navigation and control in the spirit of the Vim editor.

Apparently, the bindings only work when the page would run javascript anyway, so e.g. you can't use them with raw images.

コードも使用画像もフリーでダウンロードできるナビゲーションメニューいろいろ。

Belos modelos de navegação vertical

hover { text-decoration: none; } .button:active { position: relative; top: 1px;

As we build more and more Ajaxy applications, and our apps reside on a single page, the browser’s native back button can get more and more broken. This episode will show you how to re-enable the back button on your apps.

Beautiful Background Image Navigation with jQuery - http://bit.ly/d84kmv – jQuery (jquery) http://twitter.com/jquery/statuses/13483563601

メニューとともに背景画像もかっこよく切り替わるナビゲーションを作るチュートリアル記事です。

Perfect example of implementation. See source code.

mega menu

Menus de web originals

Designinterviews

Sweet Pages: A jQuery Pagination Solution http://bit.ly/dpE0Rp #jquery

เพจิเนชั่นแบบเม็ดกลมๆ

ทำ Pagination แบบ Slider (คือถ้าล้นหน้ามันจะไปเพิ่มเพจด้านข้างให้) ด้วย jQuery

Sweet Pages: A jQuery Pagination Solution – Tutorialzine - http://tutorialzine.com/2010/05/sweet-pages-a-jquery-pagination-solution/

navigation for my company

15+ FREE iPhone Apps to Navigate Your World resources list from mashable

mashable.com: free apps to navigate the world

Tricks, tips and Techniques on blogging, using CSS, HTML and javascript, latest technology updates, software reviews.

#Dynamic #Page / Replacing Content #jquery http://j.mp/bX66a9

great CSS tutorials

Annotated link http://www.diigo.com/bookmark/http%3A%2F%2Fcss-tricks.com%2Fdynamic-page-replacing-content

Dynamic

Let’s say you wanted to make a website where clicking buttons in the nav would dynamically load some content. Kind of like the organic tabs thing, only the content is loaded dynamically. Say something like this: There is no excuse for the navigation of a website to be completely broken without JavaScript enabled. So the best approach here is just to create these pages and the navigation as plain ol’ semantic HTML. You know, like it’s 2001. The navigation links to the files that contain that content, and are fully formed functional pages on their own.

Cambio de secciones con efecto fade in/out

iPhoneの電話帳みたいなナビゲーションを実現するjQueryプラグイン

他のライブラリ不要。アニメーションするアコーディオンのスクリプト

アコーディオン

Accordion V2はjQueryやPrototypeなどの他のスクリプトに依存することなく、単独で動作するスクリプトで、対応ブラウザはIE6, 7, 8, Fx2, 3, Op, Safari, Chromeとなっています。

ツールチップやページナビゲーションなどちょっとしたプラグインばかりです。

これくらいなら作ったほうがなんか安心。

mobile-google inspired floating toolbar

Great roundup of good looking navigation patterns.

If you are a web designer, you will agree that to keep the interst of the visitors, design of the website must be clear and intuitive. And, of course, the key to

In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box.

Menu Fabuloso

super effet avec rotation des éléments. A approfondir urgent !!!

Friday Links 18/06/10

an article and examples about breadcrumbs

css

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery - http://bit.ly/dgoSRM – Smashing Magazine (smashingmag) http://twitter.com/smashingmag/statuses/15767323261

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

dropdown menu with gradient bg

Single sprite (What's that?) navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn't it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more...

# Upload image

jQuery Stack menu like Apple Snow Leopard Dock.

Apple-Style Slider - http://devgrow.com/slidernav-jquery-plugin/

上下滚动插件

SliderNav

A-to-Z menu, easy way to quick scroll in long A-Z list

Sistema de menus do WordPress 3.0

WordPress 3.0 will introduce a new navigation menu system. Sure, there are some limitations with this system. However, with a set standard, new plugins will likely emerge to fill in the gaps.

add_action( 'init', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'primary-menu', __( 'Primary Menu' ) ); }

In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery.

TAllows fade/animate effects using single image and offset CSS. Easy to implement.

fade in e out em background

smooth scrool

fastladder iphone viewer に使えそう

jQueryとjQueryプラグインを使った中央表示、自動リサイズレイアウトのデモ？

This is Centratissimo: all centered and auto-resizable layout with some jQuery experiments by musings.it - v

Centratissimo is a web template with smooth scrolling features between pages and auto-resize capabilities relative to the actual screen-size, so that it results always perfectly centered. It's an all-centered and auto-resizable layout with some jQuery experiments.

This is Centratissimo: all centered & auto-resizable layout w/some jQuery experiments by musings.it http://bit.ly/dBZ34B RT @musingspuntoit

jQueryとjQueryプラグインを使った中央表示、自動リサイズレイアウトのデモ？

This is Centratissimo: all centered and auto-resizable layout with some jQuery experiments by musings.it - v

Centratissimo is a web template with smooth scrolling features between pages and auto-resize capabilities relative to the actual screen-size, so that it results always perfectly centered. It's an all-centered and auto-resizable layout with some jQuery experiments.

A website's navigation allows visitors to get from page to page and discover content. That makes it pretty important, I would say. However, some designers feel

30 Examples of Excellent Website Navigation | Inspiration http://bit.ly/cSrik5

25 Beautiful Examples of jQuery and CSS Drop-down Menu Tutorials

jQueryとCSSで実装されたドロップダウンメニューのチュートリアル集

プルダウンメニュー25選。

Insipiração

アイコン付きメニュー20選

アイコン付きメニューサイトまとめ。

When done right, adding visual cues to your main menu can prove very useful in making things just a tad more appealing to visitors. Let's have a look at some sites that make great use of icons in their navigation menus.

July 16, 2010 Navigation design is one of those things you simply cannot overlook. When looking for specific information on a website, a lot of people will look at the main or sub navigation or use the search bar (if present).

Today jQuery is the hottest design related topic among the web designers. A number of tutorials comes in every month so web designers always wait for this type

idea for soccer site

Awesome Bubble Navigation with jQuery