PUBLIC MARKS from camel with tag menu

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.

créer un menu animé qui n’aura rien à envier à un menu “Flash”. Plutôt qu’un long discours, je vous donne rendez-vous sur cette page de test : http://snook.ca/technical/jquery-bg/

Easy CSS Progress Bar est un script qui permet l’affichage d’étapes… comme sur les sites de réservation… à l’étape 1, on renseigne villes et dates de départ et d’arrivée, à l’étape 2, on renseigne les coordonnées, etc. Avec ce script, vous créez autant d’étapes que vous le souhaitez, il n’y a aucune limite. Seul l’ajout d’un fichier CSS est nécessaire.. tout le reste se passe coté code HTML… il faudra simplement gérer des listes à puces de type “ul” “/ul” les “sous tag” “li”, “/li”.

Le Dock Menu c'est quoi ? C'est une ressource pour mettre ne place sur votre site / blog un menu transparent qui s'active au survol de votre souris. Le menu étant caché en haut de votre page. Le tout à l'aide d'un bout de CSS et de javascript.

Kwicks for jQuery is a plugin that simulates the insatiably attractive Mootools effect of the same name. From hence forth, "Kwicks" will be used in reference to this one, and not the other one.

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications. View the feature list below to see if jdMenu is the solution for you.

Every web designer tries to be creative when it comes to designing the main navigation of the website. Now we present you with 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Lets take a look at recent examples of these …

This page demonstrates the ActiveSpotLight FastFind Menu Script. ActiveSpotLight provides the javascript related to this project under the BSD License (See Below). This script is still under development and has been tested in FF1.5-2, IE 6-7, Opera 9, and Safari. The current build has the following issues in Safari: Arrows do not appear to show in-menu versus external links, as appear in the other browsers.

WebShare est une application française à installer sur votre serveur qui vous permet de : * Stocker vos fichiers comme vous le feriez sur votre disque dur * Organiser et déplacer au fichiers dans l’arborescences des dossiers * Visualiser les fichiers hébergés : images, textes, html, flash, … * Créer et éditer des fichiers textes et html dans une interface wysiwig * Créer rapidement des bookmarks sous forme de miniatures. * Insérer des flux rss * … Le projet est réellement bien conçu et le système est tout à fait bluffant. En effet, vous pouvez déplacer les fichiers en les glissant, vous disposez d’un menu contextuel complet, vous pouvez afficher les fichiers sous forme de miniatures, listes, ou en détails. Les images peuvent être visualisées sous forme de diaporama, directement dans le système et peuvent etre agrandies

Encore une ressource pour les fan de jQuery...voici un petit menu volant et draggable à mettre sur votre page. Idéal lorsque l'on veut rendre pratique la navigation dans un site ayant une arborescence hyper étendu du type photothèque...

Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page Features: * Lightweight: ~2 KB (~1.5 KB minified) * Unobtrusive: Plays nice with JS turned off, uses its own namespace * Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click) * Fully customizable: Menu styling can (and is intended to) be easily defined in external stylesheet * Fast: Menu container is rendered on page load, and only changes position on click

Le but de ce cours est de vous amener à construire un document XHTML 1.1 présenté en utilisant CSS. Non seulement vous saurez construire un tel document, mais vous aurez des notions de "bonnes pratiques" ainsi qu'un aperçu sur les standards du w3c. Ce site constitue le support de cours que je donne. Il s'inscrit dans une formation sur HTML dynamique, avant des cours sur php ou encore javascript. C'est pourquoi j'insiste nottamment sur les formulaires Le site est volontairement écrit en HTML, sans utiliser php, pour pouvoir distribuer les versions locales des pages. Si vous en avez besoin, demandez les. A la fin du cours, nous aurons construit une page : * En XHTML * En utilisant la mise en page CSS * Avec un menu à gauche de la page * Avec un formulaire * Avec une image * Avec du contenu texte

Pour répondre à la demande d'un collègue graphiste, j'ai developpé un equivalent au script mootools suivant (source PhatFusion) mais basé sur la librairie jQuery. le résultat me semblant réussi (bien qu'il soit surement possible d'optimiser le code de nombreuse manière) je vous le propose. Voir la démonstration Je tiens à signaler que ce script n'est pas obstrusif et que la désactivation du javascript et ou du css ne gène en rien la consultation et l'utilisation du menu

il fallait cacher les sous-menus et les afficher à la demande. Le tout devant être non obstrusif j'ai finalement décidé d'utiliser Jquery pour réaliser des menus déroulants. La solution est ainsi très élégante et ne requiert que peu de Javascript. Le balisage HTML reste également très propre et valide même si on peut encore améliorer ce côté-ci.

Voici un article sur un menu en accordéon aparament accessible. Son auteur s'est permis de réutiliser le script d'un menu anciennement composé de divs. Il a aussi recodé le javascript et les css et explique très pédagogiquement pour quelles raisons.

Devthought - Guillermo Rauch’s Blog » CSS+Javascript power. Fancy menu

Control.Tabs : Projects : LivePipe™

Phatfusion

Menu CSS - Sliding doors (Horizontal) - Peut-être une réponse ?

Accessibility and Usability improved Suckerfish Drop Down / Flyout- / DHTML-Menu - pfirsich-melba