Tutoriaux
Créer un menu web 2.0 de style Digg-like
Ce tutoriel expliquer comment créer une barre de navigation telle que l'on voit souvent dans plusieurs Digg-like telles Digg.com. Le tout est bien simple, une petite pognée de CSS et de HTML et le tour est joué. Le résultat devrait ressembler à ce qui suit:
Étape 1 - Le rendu HTML
Créer une nouvelle page HTML et copier le code suivant entre vos balises <body> et </body> :
<div id="topbar">
<a href="/toppage1.html"><span>All</span></a>
<a href="/toppage2.html" class="active"><span>News</span></a>
<a href="/toppage3.html"><span>Video</span></a>
<a href="/toppage4.html"><span>Images</span></a>
</div>
<div id="middlebar">
<a href="/midpage1.html"><span>Technology</span></a>
<a href="/midpage2.html"><span>World</span></a>
<a href="/midpage3.html"><span>Science</span></a>
<a href="/midpage4.html"><span>Gaming</span></a>
</div>
<a href="/toppage1.html"><span>All</span></a>
<a href="/toppage2.html" class="active"><span>News</span></a>
<a href="/toppage3.html"><span>Video</span></a>
<a href="/toppage4.html"><span>Images</span></a>
</div>
<div id="middlebar">
<a href="/midpage1.html"><span>Technology</span></a>
<a href="/midpage2.html"><span>World</span></a>
<a href="/midpage3.html"><span>Science</span></a>
<a href="/midpage4.html"><span>Gaming</span></a>
</div>
Le second lien "News" est associé à la classe css «active». Qui représente la page en cours. Si vous utilisez les variables URL et PHP afin d'implémenter une barre de navigation dynamique, il vous sera facile d'implanter le tout facilement. Le code pour implanter ceci devrait ressembler à quelques choses du genre :
<?php if(isset($_GET['news'])){ echo 'class="active"';} ?>
Étape 2 - Implanter les coins arrondi à vos boutons
Avant de continuer, je vais vous expliquer comment implanter ce superbe effet CSS. Le tout est très simple.
...dans le code HTML:
Images utilisées
<a href="/toppage1.html"><span>All</span></a>
Étape 3: CSS et #topbar
Créer un nouveau fichier css nommé style.css et copier le code suivant pour l'élément #topbar. N'oublier surtout pas de lier votre page html à votre fichier css.
#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
a.active{
height:23px;
line-height:23px;
background:url('/image/tb_a.png') right top no-repeat;
padding-right:10px;
}
a.active span{
background:url('/image/tb_span.png') left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
a.active{
height:23px;
line-height:23px;
background:url('/image/tb_a.png') right top no-repeat;
padding-right:10px;
}
a.active span{
background:url('/image/tb_span.png') left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
Étape 4: CSS et #middlebar
Dans le même fichier css, ajouter les lignes suivante pour l'élément #middlebar.
#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#middlebar a{
color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url('/image/mb_a.png') right top no-repeat;
}
#middlebar a span{
background:url('/image/mb_span.png') left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#middlebar a{
color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url('/image/mb_a.png') right top no-repeat;
}
#middlebar a span{
background:url('/image/mb_span.png') left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
Enregistrer le tout, et tester votre joli petit menu! N'est-ce pas beau ? Peut importe, le tout est très classe et à la mode web 2.0. Si vous avez des questions, laisser un commentaire nous nous fera un plaisir de vous répondre.
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
Flux RSS pour les commentairesEcrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...