Menu avec le Bootstrap de Twitter
Bonjour à tous :zoubi:
je me suis intéressé récemment à ce framework CSS innovant.
J'ai d'abord lu un tuto et ensuite j'ai téléchargé la derniere version...
Tuto : version2.?
derniere version (en date de ce post) : v 3.1
le principe des colonnes n'ayant pas changé, le tuto est loin d’être obsolète...
Et en lisant sur http://getbootstrap.com les différences et améliorations on retombe vite sur ses pieds.
Par contre, y'a un truc sur lequel j'ai pas mal galéré, c'est le menu !
On va dire que j'y suis parvenu (non sans mal car les exemples manquent je trouve) et le résultat me convient bien ... sur Chrome et IE10 mais pas sur FF (dans sa version 27)
Alors meme que je pensais éviter ce genre de désagrément avec le framework ! :?
Voici la partie de mon site réalisé avec le bootstrap 3.1 : http://www.manu-jdr.fr/5e_index.php
regardez la différence avec FF ... les pills du menu n'ont pas la meme taille ! horreur 8O
Pour ceux qui ont réussi à mettre en place un menu plus propre ( et surtout fonctionnel à 100%) que le mien m'indiquent comment faire please...
Voici mon menu :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
| <?php
$path = $_SERVER['PHP_SELF'];
$file = basename ($path);
if ($file=='5e_index.php' OR $file=='5e_liste_news.php' OR $file=='5e_gary_gygax.php'){$li1='<li class="dropdown active">';}
else{$li1='<li class="dropdown">';}
if ($file=='5e_liste_membres.php' ){$li2='<li class="dropdown active">';}
else{$li2='<li class="dropdown">';}
if ( $file=="5e_liste_citations.php" OR $file=='5e_liste_liens.php' OR $file=='5e_liste_joueurs.php' OR $file=="5e_livre_or.php"){$li5='<li class="dropdown active">';}
else {$li5='<li class="dropdown">';}
?>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-collapse collapse">
<ul class="nav nav-pills nav-justified">
<?php echo $li1; ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Accueil <span class="glyphicon glyphicon-home"></span></a>
<ul class="dropdown-menu">
<li><a href="5e_index.php">Accueil DD5</a></li>
<li><a href="5e_liste_news.php">News</a></li>
<li><a href="index.php">Retour Portail</a></li>
<li class="divider"></li>
<li><a href="5e_gary_gygax.php">Gary Gygax</a></li>
</ul>
</li>
<?php echo $li2; ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Joueurs <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="5e_liste_membres.php">Liste des membres</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">MD</a>
<!--<ul class="dropdown-menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>-->
</li>
<!--<li class="divider"></li>-->
<!--<li class="dropdown">
<a href="#">Test</a>
<ul class="dropdown-menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>-->
<?php echo $li5; ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Goodies<span class="caret"></a>
<ul class="dropdown-menu">
<li><a href="piwigo" target="blank" >Photos</a></li>
<li><a href="5e_liste_liens.php">Liens</a></li>
<li><a href="5e_liste_citations.php" >Citations</a></li>
<li><a href="5e_liste_joueurs.php" >Liste des Joueurs</a></li>
<li><a href="#">Statistiques</a></li>
<li class="divider"></li>
<li><a href="5e_liste_romans.php">Romans</a></li>
<li><a href="#">Livres DD5</a></li>
<li><a href="5e_livre_or.php">Livre d'Or</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav> |
