Barre de navigation flottante avec fonctionnalités étendues

Page 1 sur 2 1, 2  Suivant

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

Résolu Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Dim 15 Nov 2015 - 21:23

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lmds-test.forumculture.net/

Description du problème

Bonjour,

Je reviens sur quelque chose que j'avais essayé de faire il y a quelques mois mais sous phpBB3. A présent en phpbb2 j'espère avoir plus de liberté et surtout d'aide en codage.

Tout d'abord la barre de navigation que je souhaiterai avoir soit flottante en haut du forum, masquée lorsque l'on n'est pas en haut de la page mais visible que lorsqu'on place sa souris vers le haut de la page et ait un fond de type image*. Là-dessus j'ai remarqué que ces tutoriels : Mettre sa barre de navigation en haut du forum et Ajouter une barre de navigation flottante ne correspondaient pas à ce que je recherche qui avait été réalité dans ce sujet pour une version phpBB3.

Ensuite, j'aimerais que les boutons soient affichés sous forme d'image avec une bulle de texte au survol (chose que j'ai pu obtenir partiellement en suivant les indications de ce sujet) et enfin non seulement de supprimer le bouton "Groupes"** mais de pouvoir ajouter un bouton qui ouvre au clic la chatbox dans un nouvel onglet*** et un bouton pour les notifications de la même manière que la toolbar lorsque l'on clique sur "Notifications".

D'autre part, je voudrais qu'un clic sur le bouton correspondant au profil ouvre la même fonctionnalité que la toolbar lorsque l'on clique sur "Bienvenue [username]", avec "Voir mon profil", "Editer mon profil", "Mes Sujets", "Mes Messages", etc. mais aussi ce qui s'affiche à la navigation sur toutes les pages du forum, soit : Dernière visite le ... - ...:... / La date/heure actuelle est ... - ... .

Pour terminer, je cherche à ce que mes boutons soient répartis dans l'ordre et de la manière qui suivent.


A gauche :
[1] Guide
[2] Charte de Lois (Règlement)
[3] Glossaire
[4] Carte
Au centre :
[5] Forum (Page d'Accueil)
[6] Foire Aux Questions (F.A.Q.)
[7] Calendrier
[8] Galerie
[9] Aventuriers (Membres)
[10] Personnage (Profil)
[11] Courrier (Messagerie)
[12] Rejoindre l'aventure (S'enregistrer)
[13] Entrer/ Sortir (Connexion / Déconnexion)
A droite :
[14] Chatbox
[15] Rechercher
[16] Notifications

Je précise que les proportions de ce schéma sont un peu tronquées. Dans l'exemple de forum que j'aimerais prendre, ce serait avec une bannière large de 1600px et haute de 500 px (440 si elle peut ne pas être rongée sur le haut). La barre de navigation doit cependant s'étendre sur toute la page, quelle que soit la résolution de l'écran de l'utilisateur.

Est-ce que vous ne me conseillerez pas de recréer entièrement ce menu de navigation en suivant le tutoriel Créer sa propre barre de navigation ? Dans ce cas comment réutiliser les choses que j'avais déjà faite ?

Si vous avez donc bien compris ce que je recherche il ne s'agit pas simplement de fusionner la barre de navigation et la toolbar mais simplement prendre certains fonctionnalités de cette dernière pour ma barre de navigation.

Je sais qu'une telle requête est sans doute une première mais j'espère que quelqu'un réussira à se pencher sur mon cas.

Sur ce je vous remercie d'avance pour votre aide et vous souhaite de passer une excellente journée. ♥ Smile

* J'ai réussi à faire cela à peu près avec ces sujets et tutoriels :
- Mettre sa barre de navigation en haut du forum
- Barre de navigation flottante modifiée avec effets
- Une barre de navigation fixée qui joue à chat !

** Chose que j'ai pu déjà faire avec un ajout dans le css pour ne pas afficher la valeur "/groups" mais je ne sais pas si cette solution est vraiment compatible avec les autres modifications de ma barre de navigation.

*** J'ai pu le faire facilement en ajoutant un menu personnalisé.


Dernière édition par SweetGumiho le Jeu 3 Déc 2015 - 14:24, édité 5 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Mar 17 Nov 2015 - 11:05

Je n'ai toujours pas de réponse concernant ce problème. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Mer 18 Nov 2015 - 9:43

Message édité avec l'ajout d'un schéma qui pourra peut-être aider. Je vous remercie encore d'avance pour votre aide et vous serez reconnaissante de me décoincer de ce cul-de-sac du "je-ne-sais-pas-faire". ^^

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Jeu 19 Nov 2015 - 11:01

J'ai avancé dans la construction de ma barre de navigation. Il manque cependant encore un tas de choses, à commencer par le fait de n'avoir les boutons qu'en images (il semblerait que le Javascript pour changer les noms des liens retire les images de la barre de navigation pour tous les noms qui ont été changé de ceux de base et "Afficher seulement des images dans la barre des liens" n'arrange pas les choses), je n'ai que ceux du centre, et je n'ai pas encore les fonctionnalités que je souhaite (sur "Profil" par exemple et pour avoir une barre de notifications).

Je suis donc coincée à ce stade et j'aimerais beaucoup votre aide. Merci.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Jeu 19 Nov 2015 - 16:27

J'ai du recréer un nouveau forum test et supprimer le Javascript pour remplacer le texte dans la barre de navigation. J'aimerais vraiment un peu d'aide là parce que je me sens vraiment seule et malgré toute ma bonne volonté je sens qu'avec le stress ma motivation s'étiole. :/

EDIT : Je suis vraiment désolée pour le double-post mais on ne peut apparemment pas supprimer ses propres messages. -_-

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 20 Nov 2015 - 0:19

bonsoir , bon aller j'ai pas grand chose a faire en ce moment , je vais tenter de vous donné un coup de pouce Smile
il va falloir faire une barre nav personnel ,
(gardé votre css pour le hover de la barre ,il faudra l"adapter au code que je vous donne )

remplacé votre bar nav par ce code
ps:(il est en cour de construction et va évolué )
Code:
<!--barre nav LMDS-->
<table id="cadre">
    <tr><td align="left">
      <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
      <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
      <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
      <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
      </td>
      <td align="center">
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
      </td>
      <td align="right">
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
        <a href="/profile?mode=editprofile"title="a modifier"><img src="http://i68.servimg.com/u/f68/19/21/76/58/descen10.png"/></a>&nbsp;
      </td>
    </tr></table>
                                              <!--fin barre nav-->

le css >>
Code:
/**===cadre barre navigation===**/
#cadre {
  background-image:url(http://i68.servimg.com/u/f68/19/21/76/58/wf4cpo10.png);
height:70px;
    width: 100%;
}

voila pour ce soir .a suivre .

ps: visuel >> http://forum-test-r-max.forumactif.org/ il faudra bien entendu changé les images aussi Razz
j'ai commencé avec ce que j'ai sous la main ..........

ps:2 demain je m'attaque a placé les redirection ,
ps:3 pouvez vous fournir les image numeroté ou pas ?

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 20 Nov 2015 - 18:19

Donc il s'agit bien de refaire une barre de navigation entièrement personnalisée et d'oublier celle par défaut ? J'aimerais un peu plus d'explications sur ce que je garde ou pas parce que là c'est flou et ça ne fait que causer des bugs. De plus je demande de l'aide pour comprendre et savoir faire quelque chose, pas pour du tout cuit à copier/coller. Le but c'est d'acquérir un réel savoir et de travailler mes connaissances en codage. :/

Je souhaite donc que vous confirmiez pour savoir si j'ai bien compris. Ce que vous me proposez est de mettre à la suite dans le template
Code:
<a href="URL DU LIEN" alt="NOM DU LIEN"><img src="URL IMAGE BOUTON" /></a>
J'ai donc juste à utiliser le positionnement "left", "center", "right" dans la table pour placer mes boutons sur la barre ? Ne puis-je pas garder le nom "navig" (ou éventuellement "navbar") plutôt que "barre nav" pour ce qui se réfère à ma barre de navigation ? J'ai aussi ces balises à utiliser normalement pour les boutons qui seront uniquement affichés aux membres :
Code:
<!-- BEGIN switch_user_logged_in -->
...
 <!-- END switch_user_logged_in -->
Et ceux-ci lorsqu'on est déconnecté, en statut de simple invité.
Code:
<!-- BEGIN switch_user_logged_out -->
...
 <!-- END switch_user_logged_out -->
Et l'ajout de ceci dans les scripts pour le bouton de MP qui se transforme en nouveau MP :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('src','URL DE L'IMAGE');
});
Enfin, créer sa propre barre ne requiert-il pas de cacher la visibilité de la barre par défaut ?
Code:
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

Sinon je vais fournir les images numérotées oui. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 20 Nov 2015 - 20:34

bonsoir

membre a écrit:Je souhaite donc que vous confirmiez pour savoir si j'ai bien compris. Ce que vous me proposez est de mettre à la suite dans le template
Code:SÉLECTIONNER LE CONTENU
<a href="URL DU LIEN" alt="NOM DU LIEN"><img src="URL IMAGE BOUTON" /></a>

oui c'est bien cela

membre a écrit:J'ai donc juste à utiliser le positionnement "left", "center", "right" dans la table pour placer mes boutons sur la barre ?

oui aussi pour cela

membre a écrit:Ne puis-je pas garder le nom "navig" (ou éventuellement "navbar") plutôt que "barre nav" pour ce qui se réfère à ma barre de navigation ?

la je ne voie pas le problème une class , une div , peut importe le non , du moment que c'est fonctionnel.

membre a écrit:J'ai aussi ces balises à utiliser normalement pour les boutons qui seront uniquement affichés aux membres :
Code:SÉLECTIONNER LE CONTENU
<!-- BEGIN switch_user_logged_in -->
...
<!-- END switch_user_logged_in -->
Et ceux-ci lorsqu'on est déconnecté, en statut de simple invité.
Code:SÉLECTIONNER LE CONTENU
<!-- BEGIN switch_user_logged_out -->
...
<!-- END switch_user_logged_out -->

comme dis auparavant c'est une ébauche ,rien n'est fini et définitif, il va falloir y aller petit a petit ...(y' a du taf )
ps: si vos permission sont bien en place c'est balise ne servent a rien Wink

membre a écrit:Et l'ajout de ceci dans les scripts pour le bouton de MP qui se transforme en nouveau MP :
Code:SÉLECTIONNER LE CONTENU
jQuery().ready(function(){
var newmp = $("#i_icon_mini_new_message");
if(!newmp.length) return;
$("#mp").attr('src','URL DE L'IMAGE');
});
si vous n'avez pas la barre Fa toolbar , surement que oui ( a confirmer !)

membre a écrit:Enfin, créer sa propre barre ne requiert-il pas de cacher la visibilité de la barre par défaut ?
Code:SÉLECTIONNER LE CONTENU
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

pour cela le temps sera venu de la changer a la fin , quand l'autre sera fonctionnel .
par exemple avec un petit css
Code:
a.mainmenu{display:none;}
tous simplement .

et pour finir
membre a écrit: je demande de l'aide pour comprendre et savoir faire quelque chose, pas pour du tout cuit à copier/coller. Le but c'est d'acquérir un réel savoir et de travailler mes connaissances en codage. :/

a bon habituellement c'est le contraire , et même des fois ,plus de nouvelle de l'auteur ,une fois la réponse obtenue. ... by , by et pas de merci , heureusement que tous le monde n'est pas comme ça.

ps:au vue de votre réponse , je pense arrêter la votre aide , a ce moment la il vous faut plus un aidactif de forumactif .. qui sont bien plus professionnel que moi ,simple amateur de base ...

bonne continuation a vous ,et a bientôt .

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 20 Nov 2015 - 20:41

D'accord, merci beaucoup pour ces pistes. Je vais essayer de me débrouiller avec ça déjà et dès que j'aurai quelque chose de prêt j'espère que quelqu'un pourra m'éclairer pour y ajouter les fonctionnalités de la toolbar. Je n'ai pas exemple aucun idée de comment obtenir les effets recherchés avec mes liens et pas le renvoi vers une nouvelle page.

Et oui, je sais bien que la plupart des utilisateurs manquent de manière. A la différence de beaucoup de personnes je ne viens pas demander de l'aide pour un forum en particulier mais pour apprendre à construire certains codes qui me tiennent à coeur. ^^


Dernière édition par SweetGumiho le Ven 20 Nov 2015 - 21:37, édité 1 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 20 Nov 2015 - 21:19

membre a écrit:A la différence de beaucoup de personnes je ne viens pas demander de l'aide pour un forum en particulier mais pour apprendre à construire certains codes qui me tiennent à coeur. ^^

c'est bien se que j'ai comprit , et ne suis pas votre homme pour ce travail ,

bonne continuation .

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Mar 24 Nov 2015 - 15:42

La solution avec la table ne fonctionne pas du tout comme vous pouvez le voir. Voici la modification de template avec ma barre de navigation personnalisée.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

 <!-- BEGIN switch_fb_login -->
 <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
 <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">//<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch( tickerDirParam )
 {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function() {
 var w_cont = $('#fa_ticker_container').width();

 if (w_cont > 0)
 {
 $('#fa_ticker_container').width(w_cont);

 /* Affichage de la liste */
 $('#fa_ticker_content').css('display','block');

 /* Calcul des dimensions du conteneur et des elements */
 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});
 var height_max = h_perso;

 /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 /* Redimensionnement des elements et des images trop larges */
 $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
 if ($(this).width() > width_item)
 {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 /* Redimensionnement et centrage du conteneur en mode vertical */
 if (slid_vert)
 {
 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 }

 /* Initialisation du caroussel */
 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 }
 else
 {
 $('ul#fa_ticker_content li:not(:first)').css('display','none');
 $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function(){
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if(pm != null) { pm.focus(); }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if(report != null) { report.focus(); }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(document).ready(function() {
 Ticker.start({
 height : {switch_ticker.HEIGHT},
 spacing : {switch_ticker.SPACING},
 speed : {switch_ticker.SPEED},
 direction : '{switch_ticker.DIRECTION}',
 pause : {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
 var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
 <!-- END switch_login_popup -->

 <!-- BEGIN switch_login_popup -->
 $(document).ready( function() {
 $(window).resize(function() {
 var windowWidth = document.documentElement.clientWidth;
 var popupWidth = $("#login_popup").width();
 var mypopup = $("#login_popup");

 $("#login_popup").css({
 "left": windowWidth/2 - popupWidth/2
 });
 });
 });
 <!-- END switch_login_popup -->
 //]]>
 </script>
 {GREETING_POPUP}
 <!-- BEGIN switch_ticker_new -->
 <style>
 .jcarousel-skin-tango .jcarousel-item {
 text-align:center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 </style>
 <!-- END switch_ticker_new -->
 <!-- BEGIN google_analytics_code -->
 <script type="text/javascript">
 //<![CDATA[
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
 _gaq.push(['_trackPageview']);
 _gaq.push(['_trackPageLoadTime']);

 <!-- BEGIN google_analytics_code_bis -->
 _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
 _gaq.push(['b._trackPageview']);
 <!-- END google_analytics_code_bis -->

 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 //]]>
 </script>
 <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <center><div style="visibility:hidden">{GENERATED_NAV_BAR}</div></center>
<table id="navig">
    <tr><td align="left"><a href="http://lmds-test.forumculture.net/guide" alt="Guide"><img src="http://i.imgur.com/Rby2OyI.png" /></a>
<a href="http://lmds-test.forumculture.net/laws" alt="Charte de Lois"><img src="http://i.imgur.com/NYjWjBJ.png" /></a>
<a href="http://lmds-test.forumculture.net/glossary" alt="Glossaire"><img src="http://i.imgur.com/0uN4DDk.png" /></a>
<a href="http://lmds-test.forumculture.net/map" alt="Carte"><img src="http://i.imgur.com/j31YCBy.png" /></a>
 </td>
      <td align="center">
<a href="http://lmds-test.forumculture.net/" alt="Site"><img src="http://i.imgur.com/HOXKZXf.png" /></a>
<a href="http://lmds-test.forumculture.net/forum" alt="Forum"><img src="http://i.imgur.com/lZ3DEmO.png" /></a>
<a href="URL DE VOTRE FORUM" alt="Foire aux Questions"><img src="http://i.imgur.com/hR7LTR1.png" /></a>
<a href="http://lmds-test.forumculture.net/calendar" alt="Calendrier"><img src="http://i.imgur.com/RAXzyt5.png" /></a>
<a href="http://lmds-test.forumculture.net/gallery/index.htm" alt="Galerie"><img src="http://i.imgur.com/ewLtSji.png" /></a>
<a href="http://lmds-test.forumculture.net/memberlist" alt="Aventuriers"><img src="http://i.imgur.com/8mr7Xvs.png" /></a>
<!-- BEGIN switch_user_logged_in --><a id="fa_welcome" alt="Personnage"><img src="http://i.imgur.com/dKPWOSY.png" /></a>
<a href="http://lmds-test.forumculture.net/privmsg?folder=inbox" alt="Courrier"><img src="http://i.imgur.com/p8oYwFo.png" /></a> <!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out --><a href="http://lmds-test.forumculture.net/register" alt="Rejoindre l'aventure"><img src="http://i.imgur.com/TEhsfdg.png" /></a>
<a href="http://lmds-test.forumculture.net/login" alt="Entrer"><img src="http://i.imgur.com/B4WtI4d.png" /></a> <!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in --><a href="http://lmds-test.forumculture.net/login?logout" alt="Sortir"><img src="http://i.imgur.com/YV3JTix.png" /></a> <!-- END switch_user_logged_in -->
</td>
      <td align="right">
<a href="http://lmds-test.forumculture.net/search" alt="Rechercher"><img src="http://i.imgur.com/N0tkWDt.png" /></a>
<a href="http://lmds-test.forumculture.net/chatbox/index.forum" alt="Chatbox" target="_blank"><img src="http://i.imgur.com/TOLmm0B.png" /></a>
<a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" /></a> </td>
    </tr></table>
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
 </div>
 <!-- END hitskin_preview -->

 <!-- BEGIN switch_login_popup -->
 <div id="login_popup" style="z-index: 10000 !important;">
 <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
 <tr height="25">
 <td class="catLeft">
 <span class="genmed module-title">{SITENAME}</span>
 </td>
 </tr>
 <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="mainoption" value="{L_LOGIN}" />
 <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 <span class="genmed">{LOGIN_POPUP_MSG}</span>
 </td>
 </tr>
 </table>
 </div>
 <!-- END switch_login_popup -->

 <a name="top"></a>
 {JAVASCRIPT}

 <table width="100%" cellspacing="0" cellpadding="0" border="0">
 <tr>
 <!-- BEGIN switch_logo_left -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_left -->
 <td align="center" width="100%" valign="middle">
 <!-- BEGIN switch_logo_center -->
 <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
 <br />
 <!-- END switch_logo_center -->
 <div class="maintitle">{MAIN_SITENAME}</div>
 <br />
 <span class="description_site">{SITE_DESCRIPTION}<br />&nbsp; </span>
 </td>
 <!-- BEGIN switch_logo_right -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_right -->
 </tr>
 </table>
  
 <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
 <tr>
 <td class="bodyline">
 
 <div style="clear: both;"></div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
 <tr>
 <td align="left" class="row1">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </td>
 </tr>
 </table>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
 <tr>
 <td align="left" class="row1">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </td>
 </tr>
 </table>
 </div>
 <!-- END switch_ticker -->

 <div id="page-body">
 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
 <tbody>
 <tr>
 <td valign="top" width="{C1SIZE}">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>
 </td>
 <td valign="top" width="100%">
<!-- BEGIN html_validation -->
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </td>
 </tr>
 </table>
</body>
</html>
<!-- END html_validation -->

J'ai aussi "perdu" (j'ai enregistré l'ancien template) toute la mise en forme avec le fond, le masquage de la barre, etc. :/

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Mar 24 Nov 2015 - 22:29

bonsoir , normal il faut lui donné une taille a votre bar

Code:
table#navig{width:100%}
ou
Code:
#navig{width:100%}
bonne continuation .

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Mar 24 Nov 2015 - 22:53

Merci, les codes ont été ajouté à mon CSS. Le positionnement général est bon, je n'aurais plus qu'à décider d'un espacement entre les boutons et avec les bords extérieurs (petit rappel sur comment faire de ce côté ? parce que j'ai un doute...). Il reste cependant que ni mon fond image, ni mes effets (ombre, transition, masquage, hover, etc.) ne fonctionnent. :/

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Mar 24 Nov 2015 - 23:06


pour mettre un ecart entre chaque bouton , vous pouvez utilisé ceci

Code:
&nbsp;

cela crée un espace transparent , plusieurs a la suite crée un plus grand espace

Code:
&nbsp;&nbsp;&nbsp;

pour inclure l'image de fond >

Code:
table#navig{
  background-image:url(http://i68.servimg.com/u/f68/19/21/76/58/wf4cpo10.png);
    height:70px;
    width: 100%;
}

vous avez le codage utilisé pour les transitions , que je regarde .

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Mar 24 Nov 2015 - 23:34

Il y a un interstice étrange (le blanc) entre mon image de fond et la ligne marron que j'avais créé en bas pour mon hover.

Mon CSS :
Code:
/*HEADER*/
.maintitle h1 {
  display: none;
  margin: 0;
  padding: 0;
}
.description_site {
  display: none;
}

/*NAVIGATION*/
table#navig {
  position: fixed;
  z-index: 999;
  top: 0px;
  width: 100%;
  height: 60px;
  background-image: url(http://i.imgur.com/wF4cpOP.png);
  background-repeat: repeat-x;
  border-bottom: 6px solid #3A200C;
  box-shadow: 0 2px 2px black;
  transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
}
table#navig li {
  display: inline-block;
  padding: 5px;  /*marge autour des liens*/
}
table#navig a {
  font-family: 'Alegreya SC';
  font-size: 15px;
  color: #fff;
  margin: 5px;
  line-height: 50px;
}
a.mainmenu[href="/groups"] {
  display: none;
}
#navig{
  width:100%
}
.offmenu {
  transform: translateY(-90%);
  -moz-transform: translateY(-90%);
  -webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}

/*CORPS DU FORUM*/
body {
  background-color: transparent ;
}
.bodyline {
  border: none ;

Le code Javascript sur toutes les pages :
Code:
(function(){
 var navig = $('.navig');
 var windowBrowser = $(window);
 var lastScrollTop = windowBrowser.scrollTop();
 windowBrowser.scroll(function(){
  var st = $(this).scrollTop();
  var offmenuLength = $('.offmenu').length;
  if (st > lastScrollTop+40){
      if(!offmenuLength) navig.addClass('offmenu');
  } else if(st+40 < lastScrollTop) {
      if(offmenuLength) navig.removeClass('offmenu');
  }
  lastScrollTop = st;
 });
 navig.mouseenter(function(){
 if($('.offmenu').length) navig.removeClass('offmenu');
 });
})();

J'avais suivi le tutoriel suivant : Une barre de navigation fixée qui joue à chat ! en adaptant seulement la mise en forme dans le CSS. ^^

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 9:53

bonjour , c'est cette ligne qui crée l'interstice
Code:
background-repeat: repeat-x;
pour la taille de la barre il faut 99% pas 100%. ce qui crée une marge a gauche ,mais pas a droite .

je teste votre js , et je revient ,

ps; je ne voit pas le tuto sur le site , il faut être enregistré .

vous avez encore votre code html de départ , pour que je voit ou est placé la class (.offmenu),

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 11:46

Il n'y avait pas besoin de placer la classe "offmenu" pour que ça fonctionne. Apparemment c'est une classe par défaut qui permet de cacher cette barre de navigation. Cela fonctionnait très bien sur le menu de base avant que je me mette à créer un menu personnalisé dans une table.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 12:13

sur le codage de la barre je vous avez mis une id #navig hors sur le script c'est une class .navig , mais même en changeant ceux ci ,aprés test , le script ne fonctionne pas , c'est assez étrange .

il dois manqué quelques chose , vous n'avez pas fait de sauvegarde du codage complet avant modification ?

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 12:17

Voici ce que j'avais au début qui marchait simplement avec la barre de navigation normale :

Feuille de style CSS :
Code:
/*HEADER*/
.maintitle h1 {
    display: none;
    margin: 0;
    padding: 0;
}
.description_site {
    display: none;
}

/*NAVIGATION*/
.navig {
    position: fixed;
    z-index: 10;
    top: 0px;
    width: 100%;
    height: 50px;
    background-image: url(http://i.imgur.com/wF4cpOP.png);
    background-repeat: repeat-x;
    border-bottom: 6px solid #3A200C;
    box-shadow: 0 2px 2px black;
    transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
}
.navig li {
    display: inline-block;
    padding: 5px;  /*marge autour des liens*/
}
.navig a {
    font-family: 'Alegreya SC';
    font-size: 15px;
    color: #fff;
    margin: 5px;
    line-height: 50px;
}
a.mainmenu[href="/groups"] {
    display: none;
}
.offmenu {
    transform: translateY(-90%);
    -moz-transform: translateY(-90%);
    -webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}

Template overall_fotter_end :
Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
   <tr>
      <td>
         <div>
            <div>
               <div>
<!-- END html_validation -->
               </div>
            </div>
            <!-- BEGIN switch_footer_links -->
            <div align="center">
               <div class="gen">
                  <!-- BEGIN footer_link -->
                     <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                     <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                  <!-- END footer_link -->
               </div>
            </div>
            <!-- END switch_footer_links -->
         </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
});
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
{HOSTING_JS}
</body>
</html>
Template overall_header :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <center><div class="navig">{GENERATED_NAV_BAR}</div></center>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" style="z-index: 10000 !important;">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="description_site">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>
 
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            
            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Voilà.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 12:21

ok merci je regarde de plus prés Lunette

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 12:28

Ça marche. Merci beaucoup.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 13:26

re , bon je me suis inscrit sur le forum que vous mentionné , j'ai instalé ,modifier et

http://forum-test-r-max.forumactif.org/

regardé !

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 13:48

Cela me semble parfait. Il y aura juste à modifier l'écart entre les boutons. Par contre du fait de la présence de la toolbar je ne sais pas s'il y a un petit bord qui dépasse et je ne peux pas faire réapparaître la barre au passage de la souris en haut de l'écran. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 14:15

vous avez une toolbar sur votre forum ?, moi elle est presente mais ne gêne pas la fonction du hover , quand la toolbar et cacher

question >>sur mon forum test en passant la sourie ,toolbar cacher ,la barre ne descend pas ? chez vous ,


edit>> pour espacé les images rajouter a la fin du lien image ( hspace="5"

Code:
 <a href="http://lmds-test.forumculture.net/guide" alt="Guide"><img src="http://i.imgur.com/Rby2OyI.png" hspace="5"/></a>

et modifier la valeur 5

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 14:24

Ah si, je n'avais pas pensé à cacher la toolbar. Ça marche très bien comme je veux. Je n'ai pas de toolbar sur mon forum sinon mais je veux inclure des fonctionnalités de la toolbar à ma barre de navigation, c'est le but principal de cette demande d'aide. Un des forums où cela a été fait par exemple est Never Utopia si vous connaissez, malheureusement je n'ai toujours pas de réponse du codeur là-bas qui aurait fait la manipulation. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 14:27

bon ont reprend alors , je vous donne les éléments que j'ai installer

le code template overall_header
Code:
<!--barre nav LMDS-->
<table class="navig">
    <tr><td align="left">
      <a href="http://lmds-test.forumculture.net/guide" alt="Guide"><img src="http://i.imgur.com/Rby2OyI.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/laws" alt="Charte de Lois"><img src="http://i.imgur.com/NYjWjBJ.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/glossary" alt="Glossaire"><img src="http://i.imgur.com/0uN4DDk.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/map" alt="Carte"><img src="http://i.imgur.com/j31YCBy.png" /></a>
 </td>
      <td align="center">
<a href="http://lmds-test.forumculture.net/" alt="Site"><img src="http://i.imgur.com/HOXKZXf.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/forum" alt="Forum"><img src="http://i.imgur.com/lZ3DEmO.png" hspace="5"/></a>
<a href="URL DE VOTRE FORUM" alt="Foire aux Questions"><img src="http://i.imgur.com/hR7LTR1.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/calendar" alt="Calendrier"><img src="http://i.imgur.com/RAXzyt5.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/gallery/index.htm" alt="Galerie"><img src="http://i.imgur.com/ewLtSji.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/memberlist" alt="Aventuriers"><img src="http://i.imgur.com/8mr7Xvs.png" hspace="5"/></a>
<!-- BEGIN switch_user_logged_in --><a id="fa_welcome" alt="Personnage"><img src="http://i.imgur.com/dKPWOSY.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/privmsg?folder=inbox" alt="Courrier"><img src="http://i.imgur.com/p8oYwFo.png" hspace="5"/></a>
        <!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out --><a href="http://lmds-test.forumculture.net/register" alt="Rejoindre l'aventure"><img src="http://i.imgur.com/TEhsfdg.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/login" alt="Entrer"><img src="http://i.imgur.com/B4WtI4d.png" hspace="5"/></a> <!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in --><a href="http://lmds-test.forumculture.net/login?logout" alt="Sortir"><img src="http://i.imgur.com/YV3JTix.png" hspace="5"/></a> <!-- END switch_user_logged_in -->
</td>
      <td align="right">
<a href="http://lmds-test.forumculture.net/search" alt="Rechercher"><img src="http://i.imgur.com/N0tkWDt.png" hspace="5"/></a>
<a href="http://lmds-test.forumculture.net/chatbox/index.forum" alt="Chatbox" target="_blank"><img src="http://i.imgur.com/TOLmm0B.png" hspace="5"/></a>
<a id="fa_notifications" alt="Notifications"><img src="http://i.imgur.com/IrDIpIi.png" hspace="5"/></a> </td>
    </tr></table></div>-->
                                              <!--fin barre nav-->

le css
Code:
/***********************************
*
* Notre barre de navigation
*
***********************************/
.navig{
  background-image:url(http://i68.servimg.com/u/f68/19/21/76/58/wf4cpo10.png);
    height:60px;
    width: 100%;
 
}
.navig {
  position: fixed; /*Fixe le contenu*/
  top: 0; left: 0; /*Défini la position de la navigation*/
  z-index: 10; /*Permet de passer au dessus de tous les éléments*/
  width: 100%; /*Défini la largeur de la barre*/
  background: #1e1e1e; /*Couleur du fond*/
  padding: 10px 0; /*Pour éviter que le contenu ne colle en haut et en bas*/
  text-align: center; /*Centre le contenu*/
  border-bottom: 6px solid #3a200c; /*Le petit liseret vert que l'on laissera déborder*/
  font: 300 1.5rem 'Oswald'; /*Notre sublime typographie !*/
  text-transform: uppercase; /*Met tout le texte en majuscule*/
  transition: all 0.7s ease; -moz-transition: all 0.7s ease; -webkit-transition: all 0.7s ease; /*Permet d'adoucir la transition*/
}

/*C'est ici qu'il faudra jouer avec le -90% si vous désirez changer la taille de la barre et que le rendu ne correspond plus à vos attentes*/
.offMenu {
  transform: translateY(-90%); -moz-transform: translateY(-90%); -webkit-transform: translateY(-90%); /*Effet qui fait remonter la barre !*/
}
/**************/

le js
Code:
(function(){
 var navig = $('.navig');
 var windowBrowser = $(window);
 var lastScrollTop = windowBrowser.scrollTop();
 windowBrowser.scroll(function(){
  var st = $(this).scrollTop();
  var offMenuLength = $('.offMenu').length;
  if (st > lastScrollTop+40){
      if(!offMenuLength) navig.addClass('offMenu');
  } else if(st+40 < lastScrollTop) {
      if(offMenuLength) navig.removeClass('offMenu');
  }
  lastScrollTop = st;
 });
 navig.mouseenter(function(){
 if($('.offMenu').length) navig.removeClass('offMenu');
 });
})();

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 14:44

Tout est installé. Par contre j'ai un problème avec le changement de la hauteur de la barre qui ne semble pas affecter le rendu. Elle est toujours trop haute.

Ce qu'il reste à faire donc pour aboutir à ce que je recherche :
1- Texte qui s'affiche dans une bulle au survol des boutons (Guide, Charte de Lois, Glossaire, Carte, Page d'Accueil, Foire Aux Questions, Calendrier, Galerie, Aventuriers, Personnage, Courrier, Rejoindre l'aventure, Entrer/ Sorti, Chatbox, Rechercher, Notifications).
2- Boutons dont l'image change au survol + changement de l'image du boutons "Courrier" quand nouveau message dans la messagerie.
3- Clic sur le bouton de profil "Personnage" (la tête de mort) qui a le même effet que clic sur "Bienvenue 'Nom d'utilisateur'" dans la toolbar.
4- Boutons de "Notifications" même effet que les notifications de la toolbar.

Voilà. Merci encore mille fois pour ton aide. Smile


EDIT : J'ai trouvé ce sujet pour les deux derniers points, je ne sais pas si cela peut aider : http://forum.forumactif.com/t364767-fusionner-la-barre-de-navigation-et-la-toolbar

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 14:53

@Sweet a écrit:Tout est installé. Par contre j'ai un problème avec le changement de la hauteur de la barre qui ne semble pas affecter le rendu. Elle est toujours trop haute.

comment ça , je ne comprend pas !

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par SweetGumiho le Ven 27 Nov 2015 - 14:58

Je n'arrive pas à réduire la hauteur de la barre, le height du CSS ne change rien.

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante avec fonctionnalités étendues

Message par R-max le Ven 27 Nov 2015 - 15:16

supprimer la ligne

Code:
padding: 10px 0; /*Pour éviter que le contenu ne colle en haut et en bas*/

dans le cas image elle ne sert pas et bloque le reglage de la hauteur

ensuite ajouté
Code:
.navig img{width:35px;height:35px;padding-top:5px;}

pour modifier la taille des images si nécessaire , la elle sont en 45x45 .

et modifier cette ligne
Code:
height:60px;

en
Code:
height:40px;

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum