Tutoriels ⇒ HTML5 CSS3 facebook twitter youtube

Menu responsive | Menu responsive


Nous allons tenter de comprendre cette approche et en quoi elle est primordiale à travers un cas concret : la conception d'un menu de navigation responsive.

 Bootstrap est un framework CSS qui reprend les aspects graphiques de Twitter (boutons, formulaires, etc) et qui permet de rendre votre site responsive à l'aide d'un systême de grillage .

Etape 1

Téléchargez le framework à l'adresse suivante : http://getbootstrap.com/2.3.2>

Dans le header de votre fichier html :

Etape 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu respensive</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
</head>

Etape 3

Dans le corps <body>:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <button class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">
                Nom de mon site
            </a>
            <nav class="nav-collapse" role="navigation">
                <ul class="nav">
                    <li><a href="#">Lien #1</a></li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Lien #2 <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lien #2-a</a></li>
                            <li><a href="#">Lien #2-b</a></li>
                            <li><a href="#">Lien #2-c</a></li>
                        </ul>
                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Lien #3</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Lien #4</a></li>
                </ul>
            </nav>
        </div><!-- end of .container -->
    </div><!-- end of .navbar-inner -->
</div><!-- end of .navbar .navbar -->

Etape 4

Télécharger Juqery ici

Dans le footer :

<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

 

Démo

Avec Firefox (CTRL+SHIFT+M), vous pouvez voir que le menu est parfaitement responsive sur une résolution de 320*480.

 





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces