Bubble.js est un framework conçu suite à plusieurs analyses des systèmes de navigations mobiles existants.

Pourquoi utiliser Bubble ? Bubble introduit le concept du menu flottant. Il est déplaçable par l'utilisateur et peut être positionner n'importe où sur les bords gauche ou droit de la fenêtre de navigation.

Le menu est constitué de 8 bulles pouvant posséder une infinité de sous-menu ( voir la doc ). La position des bulles s'adaptent en fonction de la position de la bulle principale.

Il n'a jamais été aussi rapide et facile de naviguer dans un menu en descendant ou en remontant la hiérarchie.

Bubble.js est super mobile friendly. Grâce à l' optimisation des animations CSS3 et de l'utilisation de standard d'animation, les transitions sont fluides et rapides.

Bubble est aussi conçu pour les ordinateurs, sur un double clic de la souris le menu viens à vous. Vous n'avez même plus à bouger la souris pour naviguer sur votre site/page.

Grâce à un mark-up simple ( voir Doc ) vous pouvez entièrement personnaliser le contenu et le style de chaque bulle. Vous pouvez bien sûr choisir le nombre de bulles ( maximum 8 ) que vous voulez afficher à chaque étapes.

Bubble permet à vos utilisateurs mobile de naviguer sur internet avec une seule main.

Bubble permet aussi l'utilisation d' icônes dans le menu. Les icônes sont souvent plus parlante qu' un mot. La navigation est alors plus rapide et aussi plus agréable pour l'utilisateur.

Bubble.js ne pèse que 15ko, il n'inifluencera pas le temps de chargement de votre page. Cependant Bubble.js a besoin de Jquery pour fonctionner.

Insérer dans votre balise head

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="bubble.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Insérer bubble.min.js à la fin de code page html

<script src="bubble.min.js"></script>

Vous pouvez télécharger les fichiers ici :
bubble.min.js
bubble.css
Démo

Notez qu'il faudra probablement modifier les liens "href" et "src" en fonction des dossiers de votre projet.

Fonctionnement du Mark-Up

Pour le bon fonctionement de bubble, il faut suivre un mark-up ( marquage). Si le marquage n'est pas suivi, Bubble ne fonctionnera pas correctement ou ne fonctionnera pas du tout.

Le marquage fonctionne en imbrication. La bubble principale a pour id="bubbleM". Puis la première sous bubble a pour id="bubble1". Si on veut créer un sous menu à partir de "bubble1" on insère entre les balises <div> une nouvelle bulle ayant pour identifiant id="bubble1-1" si on veut une second bulle au même niveau il faut créer une nouvelle bulle ayant pour id="bubble1-2". Si on veut rajouter encore un sous menu à la bulle d' id="bubble1-2" on crée une nouvelle bulle entre ses balises <div> qui aura pour id="bubble1-2-1". On peut procéder comme ceci à l'infini. Si vous n' inserez pas de sous menu dans une bulle il est conseillé de mettre alors un lien.

Pour un exemple plus concret veuillez télécharger le fichier de démo.

Insérer dans votre balise head

<nav id="bubbleM" class="bubble">
     <div id="menu">
          <div id="bubble1" class="bubble"><a href=""></a></div>
          <div id="bubble2" class="bubble">
               <div id="bubble2-1" class="bubble"><a href=""></a></div>
               <div id="bubble2-2" class="bubble">
                    <div id="bubble2-2-1" class="bubble"><a href=""></a></div>
                    <div id="bubble2-2-2" class="bubble"><a href=""></a></div>
               </div>
          </div>
          <div id="bubble3" class="bubble"><a href=""></a></div>
     </div>
     <div class="open-panel">
          <span class="first-bar"></span>
          <span class="second-bar"></span>
          <span class="third-bar"></span>
     </div>
     <h4 class="txtmenu">Menu</h4>
</nav>