IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Responsive Nav : votre menu responsive compatible mobiles et tablettes
Grâce aux transitions CSS3

Le , par FirePrawn

47PARTAGES

Le responsive design est devenu bien plus qu'une mode, c'est une véritable bonne habitude à prendre lorsque l'on veut un site propre.
Avec le marché des mobiles et des tablettes qui ne cessent de croître, rendre son site lisible et adaptable à n'importe quelle résolution est très important.

Responsive Nav est un plugin JavaScript ultra léger (1.7kb minifié) qui va vous permettre de manière très simple de créer un menu responsive.
En effet ce plugin utilise les transitions CSS3 pour adapter la taille du menu à la résolution.
Le plugin permet également l'utilisation d'événements liés au tactile ce qui rend le menu utilisable sur smartphone et tablette.
Il est totalement indépendant et fonctionne sur tous les navigateurs (y compris Internet Explorer 6 oui monsieur !) ainsi que sur tous types de smartphones ou tablettes.

Pour l'utiliser il vous suffit d'ajouter un "markup" sur votre menu :

Code html : Sélectionner tout
1
2
3
4
5
6
7
8
<nav class="nav-collapse"> 
  <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Contact</a></li> 
  </ul> 
</nav>

Il faut bien sûr instancier le plugin :

Code html : Sélectionner tout
1
2
3
4
<!-- Put this right before the </body> closing tag --> 
<script> 
  var nav = responsiveNav(".nav-collapse"); 
</script>

Vous disposez ensuite de toute une série d'options personnalisables ainsi que de plusieurs méthodes (comme pour redimensionner votre menu par exemple).

Pour plus d'informations je vous invite à consulter le site officiel sur lequel vous trouverez des exemples ainsi que de la documentation.

Télécharger Responsive Nav.

Source : thechangelog.com

Et vous ?

Faites-vous du responsive design ?
Avez-vous déjà créé des sites fonctionnant également sur mobile et/ou tablette ?

Une erreur dans cette actualité ? Signalez-nous-la !