[PHPBB2] Menu Rechercher en haut à gauche effet survol

Fondateur

Rappel du premier message :

coucou

,

je vais vous donner l'astuce pour avoir le menu de recherche assez original hinhin

.

Au clic sur le bouton rechercher de la barre de navigation, le menu viendra progressivement de la gauche.

Allez on y va hinhin

.

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.

Déposer ceci:

Code:: $(function(){
$('div[id="search_menu"]').removeAttr('style').wrap('<div id="M14_rechercher"></div>');
  $('a.mainmenu[href="/search"]').click(function(){
  $('div[id="search_menu"]').removeAttr('style');
   $('#M14_rechercher').css('marginLeft','250px');
  }); });

Penser a cliquer sur le bouton Valid

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Collez ceci:

Code::    /*_____________DEBUT DU BLOC RECHERCHER PERSO____________________*/
   /*le bloc dans sa totalite*/
   #M14_rechercher
   {
   position:absolute !important;
   width:250px !important;
   height:130px !important;
   top:100px !important;
   left:-252px ;
   display:block!important;
   -webkit-transition: all 1s ease-in;
   -moz-transition: all 1s ease-in;
   -o-transition: all 1s ease-in;
   transition: all 1s ease-in;
   }

   /*on donne apparence au bloc rechercher*/
   #M14_rechercher div#search_menu .forumline
   {
   background:#000000 !important ;
   border:1px solid #20aec8;
   cursor:pointer;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   }

   /*on donne apparence au champs de recherche*/
   #M14_rechercher div#search_menu .forumline input.post
   {
   background-color:#000000;
   color:#20aec8;
   width:110px;/*ne pas toucher*/
   border:1px solid #20aec8;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -o-transition-timing-function: ease-in;/*ne pas toucher*/
   -webkit-transition: all 0.5s ease-in;/*ne pas toucher*/
   -moz-transition: all 0.5s ease-in;/*ne pas toucher*/
   -o-transition: all 0.5s ease-in;/*ne pas toucher*/
   transition: all 0.5s ease-in;/*ne pas toucher*/
   }
   /*on donne apparence au champs de recherche au survol*/
   #M14_rechercher div#search_menu .forumline input.post:hover
   {
   width:150px;/*ne pas toucher*/
   background-color:#ffffff;
   color:#000000;
   }
   /*on donne une apparence au bouton Go*/
   #M14_rechercher div#search_menu .forumline input.button
   {
   background-color:#000000;
   color: #20aec8 !important;
   font-weight:bold;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   }
   /*on supprime la bordure et donne une couleur*/
   #M14_rechercher div#search_menu .forumline th.thHead {border:none;color:#20aec8;background-image:none!important;}
   /*on donne une apparence à la barre de separation*/
   #M14_rechercher div#search_menu .forumline .row2 hr {border:1px dotted #20aec8;}
   /*on donne une apparence au texte Resultats par Messages et sujets */
   #M14_rechercher div#search_menu .forumline .row2 .genmed {color: #20aec8;}
   /*on donne une apparence a la recherche avancee*/
   #M14_rechercher div#search_menu .forumline a
   {
   height:30px;
   border-left:none !important;
   border-top:none !important;
   color: #20aec8 !important;
   text-decoration:none !important;
   }

Milouzien

merci beaucoup

Milouzien

Merci bien hinhin

mais ca ne marche pas pour moi !

Fondateur

Hello Christophe,
cette astuce date de 2013 et il y a eut des modifications depuis....
J'ai édité l'astuce pour apporter des modifications.
Il faut supprimer l'ajout dans le template, c'est à dire ceci:

Code::    
   <div id="M14_rechercher">
   <script type="text/javascript">
   //<![CDATA[
   var url_search = '/search';
   insert_search_menu();//]]>
   </script>
   </div>

Ou ceci:

Code::    <div id="M14_rechercher">
   <script type="text/javascript">
   //<![CDATA[
   var url_search = '/search';
   insert_search_menu();//]]>
   </script>
   </div>

Et remplacer toute la c.s.s.
Merci pour ta remontée Christophe hinhin

Milouzien

» [PHPBB2] Menu déroulant et Profil Rechercher et Nouveau M.P séparé
» [PHPBB2] Mettre un module de membres connectés en haut à gauche
» [PHPBB2] Afficher le règlement du forum en haut de sujet
» [PHPBB2] Effet loupe sur chaque message
» [PHPBB2] Afficher une infobulle au survol des titres des sujets avec......