[PHPBB2] Menu Rechercher en haut à gauche effet survol

Milouze14 Ven 21 Juin 2013 - 10:37

Rappel du premier message :

,

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

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

Allez on y va   .




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




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;
    }


dédé54 Jeu 31 Déc 2015 - 17:37

El_Mojito Sam 2 Jan 2016 - 13:31

Invité Sam 5 Mar 2016 - 18:23

dragon594 Sam 16 Juil 2016 - 22:13

Kaeyla Dim 16 Avr 2017 - 7:38

Ombi Mer 26 Juil 2017 - 22:13

Psychotic Bitch Dim 27 Jan 2019 - 15:50

Ptite_Perle Dim 10 Fév 2019 - 20:24

soleda Lun 11 Fév 2019 - 11:42

fred9545 Lun 11 Fév 2019 - 18:40

Ambroise Mar 12 Fév 2019 - 13:33

HardRock Sam 16 Nov 2019 - 21:23

christ77000 Mer 26 Fév 2020 - 15:46

Merci bien  

mais ca ne marche pas pour moi !

Milouze14 Mer 26 Fév 2020 - 18:50

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:


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


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  

christ77000 Jeu 27 Fév 2020 - 14:11