DéveloppementsFichiers CSS

La NavBar dépliable


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Gadget Version Template Version
CSS qui permet de modifier l'apparence de la navbar. Taille, positionnement, défilement, etc.
Navbar
1
1
2
NavBar dépliante Blogger
Qu'est-ce qui est aussi large que votre écran, haut de 30 pixels et qui plane au-dessus de votre blog ?
La NAVBAR, pardi ! (La barre de navigation Blogger)
Ce petit développement propose un CSS qui permettra de modifier son apparence et la réduire en un tout petit carré d'une trentaine de pixels de coté.
Pour la déplier complètement, le passage de la souris suffit.
Divers réglages sont possibles : positionnement, durée de défilement, etc.

Configuration

Choisissez d'abord vos paramètres dans le tableau. Les codes ci-dessous varieront en fonction de vos choix.

Choix de la navbar
Vous devrez également choisir le même paramètre dans le gadget.
Couleur de fond
[non-requis]
Lorsque la navbar est transparente, vous pouvez ajouter une couleur qui correspond mieux au thème de votre blog. Pour conserver la transparence, laissez le champ vide.
Durée de déployement secondes
Durée de replis secondes
Durée d'immobilisation secondes
Epaisseur bordure droite pixels
Type de positionnement
Positionnement à partir du haut pixels


/* NAVBAR
----------------------------------------------- */

#navbar {
  width: 36px;
  border-top: 1px solid #888888;
  border-right: 5px solid #888888;
  position: fixed;
  top: 5px;
  left: -6px;
  background: #fe6602;
  border-radius : 0 5px 5px 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);

  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;

  -moz-transition-delay: 1.3s;
  -ms-transition-delay: 1.3s;
  -o-transition-delay: 1.3s;
  -webkit-transition-delay: 1.3s;
  transition-delay: 1.3s;

  z-index: 10;
}

#navbar:hover {
  width: 95%;

  -moz-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -webkit-transition: all 0.6s linear;
  transition: all 0.6s linear;
}


Où copier le code CSS ?
Tableau de bordModèlePersonnaliserAvancéAjouter CSS
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire