AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Menu PA avec CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Hellie

avatar

✎ Blabla : 352
✎ Citation : je me suis toujours sentie seule... j'ai beau être entourée, je me sens toujours seule même quand j'étais avec lui...
✎ Age : 30
Localisation : au bord d'un pont, regardant le vide, prête à sauter...
Emploi/loisirs : Cas désespéré, passe ton chemin
Humeur : Curieusement bien

Feuille de personnage
Métier: Observateur
Age: 30
Relations ♥:

MessageSujet: Menu PA avec CSS   Ven 17 Avr 2015 - 17:49

Barre de menu dans PA avec CSS

Code:
<center><div class="barre_nav"><div class="nav_1"><div class="nav_txt">Début<br /><br /></div><br /><a href="http://grimmsworld.actifforum.com/t1-reglement-a-lire-et-a-signer">Règlement</a><br /><a href="http://grimmsworld.actifforum.com/t20-l-equipe-du-forum"> Le Staff</a><br /><a href="http://grimmsworld.actifforum.com/t3-fiche-absence">Absences</a><br /><a href="http://grimmsworld.actifforum.com/t2-fiche-predefinie">Présentation</a></div><div class="nav_2"><div class="nav_txt">S'intégrer <br /><br /></div><br /><a href="http://grimmsworld.actifforum.com/t7-comment-s-integrer-sur-le-forum">sur le forum</a><br /><a href="http://grimmsworld.actifforum.com/t101-la-feuille-de-personnage">Feuille perso.</a><br /><a href="http://grimmsworld.actifforum.com/t172-comment-ecrire-un-rp">Ecrire un RP ?</a><br /><a href="http://grimmsworld.actifforum.com/t19-spoiler-la-serie-grimm-plus-d-infos">Infos Grimm</a></div><div class="nav_3"><div class="nav_txt"> Partenariat<br /><br /></div><br /><a href="http://grimmsworld.actifforum.com/t4-devenir-partenaire">  Devenir partenaire</a><br /><a href="http://grimmsworld.actifforum.com/t17-nos-boutons-fiche">Nos Fiche & Boutons</a><br /><a href="http://grimmsworld.actifforum.com/t5-tous-nos-partenaire">  Nos amis</a><br /></div><div class="nav_4"><div class="nav_txt"> Les RP's<br /><br /></div><br /><a href="http://grimmsworld.actifforum.com/t13-les-rp-s-termines-abandonnes-ou-libre">Terminés, abandonnés</a><br /><a href="http://grimmsworld.actifforum.com/f50-les-rp-s">Répertoires</a><br /><a href="http://grimmsworld.actifforum.com/f49-les-liens">Les liens</a><br /></div><div class="nav_5"><div class="nav_txt">peu +<br /><br /></div><br /><a href="http://grimmsworld.actifforum.com/f23-jeux-detentes">Jeux détentes</a><br /><a href="http://grimmsworld.actifforum.com/f52-floodland">Floodland</a><br /></div></div></center>

CSS:
Code:
/* DEBUT BARRE DE NAVIGATION Page d'accueil */
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: black;
  background: #969696;
  font-size: 15px;
  height: 20px;
    box-shadow: 0px 0px 3px #000000;
}
.nav_txt:hover {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: black;
  background: #ffffff;
  font-size: 15px;
  height: 20px;
    box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: black;
  font-size: 12px;
  margin-left: 5px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  background:#ffffff;
  width:300px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
  width:600px;
  height:100px;
    overflow: hidden;
  position: relative;
    margin-bottom:-100px;
      z-index: 10;
  border-top: 1px solid #e6e7e7;
}
.nav_1 {
  width:120px;
  height:25px;
  background: #969696;
  float: left;
    box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:120px;
  height:25px; 
  background: #969696; 
  float: left;
    box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:120px;
  height:25px;
  background: #969696; 
  float: left;
    box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_4 {
  width:120px;
  height:25px;
  background: #969696;
  float: left;
    box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:120px;
  height:25px; 
  background: #969696;
  float: left;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:120px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:120px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:120px;
  height:140px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_4:hover {
  width:120px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_5:hover {
  width:120px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}

/* FIN BARRE DE NAVIGATION */


I love cat
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://curieusementbien.forumgratuit.org
 
Menu PA avec CSS
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Résolu] creer un menu flash avec e-anim
» Menu déroulant avec un bouton
» [résolu]Problème menu déroulant avec Chrome
» Menu création de variables
» probleme avec outlook express ou internet exploreur ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Curieusement Bien :: 
Once Upon a Time
 :: Signature
-
Sauter vers: