RSS

Tutoriaux

Créer un menu web 2.0 de style Digg-like

Tutoriaux - CSS

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:

Digg-Like

É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>

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.

 
Coins arrondis

...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;
}
 

É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;
}
 
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
Digg! Reddit! Del.icio.us! Mixx! Free and Open Source Software News Google! Live! Facebook! Technorati! StumbleUpon! Spurl! Furl! Blogmarks! Yahoo! Mister-Wong! DZone! Free Joomla PHP extensions, software, information and tutorials.

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (0)

Flux RSS pour les commentaires

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy

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 ...

Connexion