Ce menu horizontal est basé sur des propriétés CSS (avec la pseudo-classe :hover). Il ne fonctionne sur des navigateurs récents (exit IE6). Les rubriques et les sous-rubriques s’adaptent automatiquement en largeur et elles sont fonction de leur contenu. En survol d’une sous rubrique, la rubrique principale reste sélectionnée.
Pour faire disparaître les sous-rubriques, il suffit d’ajouter display:none à la sous-rubrique de la classe menu :
ul.menu li ul {
display:none; /* masques les sous-rubriques */
width: auto; /* largeur automatique */
/* remise à 0 des valeurs du parent */
margin: 0;
padding: 0;
/* end */
}
Maintenant, il nous suffit de mettre les sous rubriques en vertical car elles ont hérités de leur parent une mise en forme horizontale et de faire apparaître les sous-rubriques en survol de la rubrique.
Sous-rubrique en vertical
ul.menu li:hover ul {
display:block;
}
ul.menu li:hover ul li {
float:none;
/* remise à 0 des valeurs du parent */
width: inherit;
margin: 0;
}
En se déroulant, les sous rubriques sont en dessous et décalé. Pour cela il faut attribuer une position absolue aux sous-rubrique.
ul.menu li ul {
position:absolute;
width:auto; /* largeur automatique */
}
Votre menu est quasiment finalisé, il ne vous reste plus qu’à avoir un survol qui reste actif sur la rubrique. Il faut ajouter “ul.menu li:hover > a” à la déclaration “ul.menu li a:hover” comme sur l’exemple suivant :
ul.menu li a:hover, ul.menu li:hover > a {
color: #FFFFFF;
background: #ed7928;
}
Votre feuille de style finale est la suivante :
body {
font-family: Arial;
font: 12px;
}
ul.menu {
width: auto;
height: 35px;
line-height: 35px;
}
ul.menu li {
float: left;
height: 35px;
width: auto;
}
ul.menu li a {
padding: 0px 10px 0px 10px;
color: #FFFFFF;
background: #000000;
font-weight: bold;
margin: 0;
display: block;
}
ul.menu li a:hover, ul.menu li:hover > a {
color: #FFFFFF;
background: #ed7928;
}
ul.menu li ul {
display:none; /* masques les sous-rubriques */
width: auto; /* largeur automatique */
/* remise à 0 des valeurs du parent */
margin: 0;
padding: 0;
/* end */
}
ul.menu li ul li a {
background: #ed7928;
color: #FFFFFF;
display: block;
padding: 0px 10px 0px 10px;
margin: 0;
}
ul.menu li ul li a:hover {
background: #ffebd3;
color: #ed7928;
}
ul.menu li:hover ul {
display:block;
}
ul.menu li:hover ul li {
float:none;
/* remise à 0 des valeurs du parent */
width: inherit;
margin: 0;
}
ul.menu li ul {
position:absolute;
width:auto; /* largeur automatique */
}
Vol5 est une petite entreprise qui a eu une bonne idée. Basée en Californie, Vol5 a pour objectif de faire de belle chose pour des designers. Leur premier projet de Vol5(qui se prononce Volume five) est AppBooks, un carnet papier 100% recyclé pour vos croquis d’interface iPhone.
Code est une application pour développeur et propose d’étendre les fonctionnalités via les extensions. CSS Tools pour Coda permet de compresser ou decompresser vos fichiers CSS.
Raphaël est une librairie Javascript de 51kb qui simplifie considérablement votre travail pour la réalisation de graphique vectoriel sur vos sites Internet. Camembert, histogramme sont désormais accessible simplement et facilement.
Raphaël utilise SVG W3C recommandation et VML pour créer les graphiques vectoriels dont vous avez toujours rêvé. Cette librairie est supportée par Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Pour en savoir plus et voir des démos : raphaeljs.com
CloudMade en synergie avec OpenStreetMap, vous propose un projet de carte communautaire libre et gratuite. Ayant pour objectif de démocratiser les informations géographiques, CloudMade met a disposition des outils et des APIs pour les développeurs qui souhaitent créer des expériences riches et interactives, mais aussi des applications mobiles.
Things est un gestionnaire de tâche simple et sans difficulté d’utilisation. Vous n’oublierez plus rien ! Il est synchronisable avec sa version application pour os X et vous permet de partager des tâches.
Cette application permet de connecter votre iPhone à des services FTP, Web-DAV ou MobileMe pour télécharger des fichiers ou travailler en parallèle. iStorage vous permet de télécharger, téléderverser de votre iPhone vers votre site web, partager des fichiers, editer des fichiers textes ou images, lire des vidéos.
Colloquy pour iPhone et iPod touch est le plus populaire des client IRC. Cette application vous permettra de poster et de lire les messages mIRC en couleur, de rejoindre plusieurs chat rooms, de recevoir des notifications, …
Emulateur de terminal pour iPhone, iSSH propose l’ensemble des services SSH et telnet pour administrer un serveur avec un tunnel X serveur et VNC client. De plus cette application supporte le copier / coller de la version 3.0 de l’iPhone.
Analytics App est une application qui permet de se connecter à Google Analytics et d’accèder immédiatement à l’ensemble des statistiques et rapports. Sur la route, dans une réunion vous pouvez avoir accès à vos statistiques. C’est aussi simple que sur votre navigateur de bureau !
Google continue de lever le voile sur ses méthodes de classement et confirme que le méta tag “Keywords” n’est plus utilisé pour le classement des résultats de recherche. En effet, souvent détourné et non visible pour le visiteur, les ingénieurs ont préférés l’exclure. Néanmoins le post de Google confirme continuer à utiliser certains méta tag comme “Description” dans les résultats de recherche et dans l’affichage du résumé de résultat.
Ce point n’avait jamais été officiellement expliciter, c’est désormais chose faite !
Web Designers et développeurs ne sont pas obligés de connaître Cocoa Objective-C pour construire une application iPhone. La maison d’édition O’Reilly via son laboratoire propose un ouvrage open source sur la construction et la réalisation d’application iPhone apps (application web). L’auteur Jonathan Stark qui a écrit ce livre, dresse ici une excellente documentation. Il suffit d’avoir pour connaissance, html, css et Javascript. Dans cet ouvrage vous découvrirez toutes les astuces et la méthodes pour développer pas à pas votre application dans les règles de l’art. N’oubliez pas que notre agence de communication a réalisé 3 sites web iPhone : Oxynel iPhone site internet, My Suite Appart-Hôtels iPhone Réservation, Stéphane Rolland Haute Couture.
L’application Typekit est utilisable pour sélectionner et ajouter des typographies aux sites Internet sans problème de référencement. Cette application permet un rendu exceptionnel et pousse un peu plus loin l’agencement esthétique d’un site Internet.
En quelques clics, vous définissez votre typographie, les styles CSS auxquelles la typo doit s’appliquer. Cette application utilise les capacités des propriétés CSS donc aucun problème avec votre référencement.
Fonctionnant sans aucun problème avec les versions de Safari 3.1 et supérieur ou Firefox 3.5 et supérieur sur Windows, Macintosh et Linux. Cependant un support pour Internet Explorer est en cours de réalisation et sera disponible dans les versions futures.
Néanmoins, il est possible d’utiliser la balise @font-face incluse dans Firefox 3.5 et supérieur, et Internet Explorer 6 et supérieur.
Typekit va surement devenir l’application chouchou des Designers et Webmaster. L’équipe d’Oxynel vient d’ajouter la typographie “Terfens” au blog de l’agence de communication oxynel ! Pour l’instant encore en version confidentielle, cette dernière n’est disponible que sur invitation. Nous en avons 5 de disponibles donc n’hésitez pas à demander sur les commentaires.
Oxynel propose des solutions de communication sur tous les marchés de ses clients, mais souhaite surtout partager un partie de son savoir faire, de ses découvertes et de ses passions.
