Ce tutoriel a été publié par Final-Blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Goodmorning SF !

Beaucoup sur le FdF l'ont déjà demandé, alors autant laisser cette astuce sympathique, simple à réaliser et cependant permettant quelques effets pratiques, voire poussés selon votre créativité et vos dispositions avec le langage CSS.
Ce pourrait être un complément au menu suiveur déjà sur ce forum.

Dans le PA >> Affichage >> Couleurs > Feuille de style CSS :

Code:

#i_icon_mini_index {position: absolute; top: 140px; left: 10px;
}
#i_icon_mini_portal {position: absolute; top: 160px; left: 10px;
}
#i_icon_mini_gallery {position: absolute; top: 180px; left: 10px;
}
#i_icon_mini_search {position: absolute; top: 200px; left: 10px;
}
#i_icon_mini_calendar {position: absolute; top: 220px; left: 10px;
}
#i_icon_mini_faq {position: absolute; top: 240px; left: 10px;
}
#i_icon_mini_groups {position: absolute; top: 260px; left: 10px;
}
#i_icon_mini_members {position: absolute; top: 280px; left: 10px;
}
#i_icon_mini_message {position: absolute; top: 300px; left: 10px;
}
#i_icon_mini_new_message {position: absolute; top: 300px; left: 10px;
}
#i_icon_mini_profile {position: absolute; top: 320px; left: 10px;
}
#i_icon_mini_logout {position: absolute; top: 340px; left: 10px;
}
#i_icon_mini_login {position: absolute; top: 340px; left: 10px;
}
#i_icon_mini_register {position: absolute; top: 360px; left: 10px;
}

• A vous de voir pour les espaces entre deux boutons (ici 20px) par le top: YYYpx;
  
• La distance avec la gauche de la page par le left: XXpx;
  
• Si vous voulez la barre ou quelques boutons sur la droite de la page,
  vous remplacerez le left: XXpx; par un right: XXpx;
  
• Si vous voulez la barre ou quelques boutons sur la droite de la page,
  vous remplacerez le top: YYYpx; par un bottom: YYYpx;
  
• Si vous voulez que la barre suive le scroll (ou seulement quelques boutons),
  vous remplacerez les position: absolute; par des position: fixed;
  
  
• Pour le hover des boutons, je vous renvoie à ce très bon tuto de Narumi sur le FDF.
  Il va de soi que pour les hover, vous n'avez pas besoin de supprimer vos images où que ce soit, mais vous ajouterez juste une ligne en dessous de chaque intitulé ainsi :

  #i_icon_mini_intitulé:hover {... propriétés du hover;
  }

Pour les boutons personnalisés (menus personnalisés) le tuto est un peu plus complexe :

• Tout d'abord dans le PA >> Affichage >> Entête & Navigation > tableau de la barre de navigation
  
• Il faut donner un attribut class à l'image en allant sur :edit: du menu.
  
• A la fin de l'adresse de l'image il faut ajouter un guillemet, par exemple : .png"
  
• Un espace et class="bidule ce qui donne :
  http://url_image.png" class="bidule
  qui sera généré par les variables comme il se doit.
  
• Dans le CSS on lui donne les même propriétés qu'aux autres icônes ainsi :
  .bidule {position: absolute; top: YYYpx; left: XXXpx;
  }
  
• Mais attention, il faudra à chaque fois qu'une image sera modifiée à cet endroit du PA, remettre l'url image et son class. That's the big bug.