Menu déroulant

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

Résolu Menu déroulant

Message par Arold le Sam 21 Déc 2013 - 20:11

Salut !

Savez-vous comment faire un menu déroulant comme ici: http://www.forumsdeforumactif.com ?



Avec le déroulant =>



Merci !


Dernière édition par Arold le Mer 1 Jan 2014 - 22:30, édité 1 fois

Arold
****

Masculin
Messages : 238
Inscrit(e) le : 21/07/2013

http://www.mootchies.com
Arold a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Ange Tuteur le Dim 22 Déc 2013 - 8:00

Bonjour Arold,

Voilà

Script :
PA > Modules > Gestion des codes Javascript > Créer un nouveau javascript

Titre : Votre choix
Placement : Sur toutes les pages
Code:
jQuery(function() {
jQuery('a.mainmenu[href="/profile?mode=editprofile"]').after('<div id="quinfo" class="select"><a href="/profile?mode=editprofile&page_profil=informations">informations</a><br/><a href="/profile?mode=editprofile&page_profil=preferences">Préférences</a><br/><a href="/profile?mode=editprofile&page_profil=signature">Signature</a><br/><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a><br/><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amis et ignorés</a><br/><a href="/profile?mode=editprofile&page_profil=notifications">Notifications</a><br/></div>');
jQuery('#quinfo').hide();
jQuery('a.mainmenu[href="/profile?mode=editprofile"]').click(function() {
jQuery('#quinfo').toggle().offset(jQuery(this).offset());
return false;});
});

CSS :
Affichage > Couleurs > Feuille de style CSS
Code:
#quinfo {
box-shadow:2px 2px 3px rgba(0,0,0, 0.5);
border:1px solid #ABC;
background:#DEF;
line-height:180%;
text-align:left;
font-size:10px;
padding:3px;
z-index:999;
width:auto;
top:30px !important;
}

Résultat :


Ajouter à liste ici :
Code:
.after('<div id="quinfo" class="select"><a href="/profile?mode=editprofile&page_profil=informations">informations</a><br/><a href="/profile?mode=editprofile&page_profil=preferences">Préférences</a><br/><a href="/profile?mode=editprofile&page_profil=signature">Signature</a><br/><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a><br/><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amis et ignorés</a><br/><a href="/profile?mode=editprofile&page_profil=notifications">Notifications</a><br/></div>');

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Arold le Dim 22 Déc 2013 - 15:51

Salut Ange Tuteur,

En fait, ma barre de navigation n'apparait pas .. Est-ce que je dois enlever l'ancien menu au complet ? (Celui-ci) :



Car sinon, je crois que c'est la bannière en header le problème, c'est possible de monter la barre que tu m'as donné (voir post avant) en haut de la bannière header ? Merci de ton aide !

Arold
****

Masculin
Messages : 238
Inscrit(e) le : 21/07/2013

http://www.mootchies.com
Arold a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Ange Tuteur le Dim 22 Déc 2013 - 16:38

Ajouter profil à la toolbar?

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Arold le Dim 22 Déc 2013 - 16:45

Hun ?


Arold
****

Masculin
Messages : 238
Inscrit(e) le : 21/07/2013

http://www.mootchies.com
Arold a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Ange Tuteur le Dim 22 Déc 2013 - 17:18

comme ça :



Script :
Code:
jQuery(window).load(function() {
if (_userdata["session_logged_in"] == '1') {
jQuery('#fa_right').prepend('<a id="fa_profil" href="#" onclick="return false;" style="padding:6.5px 5px;">Profil</a><div id="quinfo" style="position:fixed;"><a href="/profile?mode=editprofile&page_profil=informations">informations</a><br/><a href="/profile?mode=editprofile&page_profil=preferences">Préférences</a><br/><a href="/profile?mode=editprofile&page_profil=signature">Signature</a><br/><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a><br/><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amis et ignorés</a><br/><a href="/profile?mode=editprofile&page_profil=notifications">Notifications</a><br/></div>');
jQuery('#quinfo').hide();
jQuery('#fa_profil').click(function() { jQuery('#quinfo').toggle().offset(jQuery(this).offset()); });
}
});

CSS :
Code:
#quinfo a { color:#257 !important; }
#quinfo a:hover { color:#D14 !important; }
#quinfo {
box-shadow:2px 2px 3px rgba(0,0,0, 0.5);
border:1px solid #ABC;
background:#DEF;
line-height:180%;
text-align:left;
font-size:10px;
padding:3px;
z-index:999;
width:auto;
top:30px !important;
}

dans la image c'est sur la toolbar :

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Arold le Dim 22 Déc 2013 - 22:42

Ça me donne ça! (merci)



Mais comment j'enlève la partie en rouge + comment je mets ''profil'' à gauche (genre à la place du truc en rouge) ?

Merci d'avance..

Arold
****

Masculin
Messages : 238
Inscrit(e) le : 21/07/2013

http://www.mootchies.com
Arold a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Ange Tuteur le Lun 23 Déc 2013 - 9:10

Vous pouvez enlever la copyright ici :
PA > Modules > Toolbar > Configuration


supprimer fa_share et fa_search avec ce CSS :
Code:
#fa_share, #fa_search { display:none !important; }

alors javascript :
Code:
jQuery(function() {
if (_userdata["session_logged_in"] == '1') {
jQuery('#fa_right').before('<a id="fa_profil" href="#" onclick="return false;" style="padding:6.5px 5px;">Profil</a><div id="quinfo" style="position:fixed;"><a href="/profile?mode=editprofile&page_profil=informations">informations</a><br/><a href="/profile?mode=editprofile&page_profil=preferences">Préférences</a><br/><a href="/profile?mode=editprofile&page_profil=signature">Signature</a><br/><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a><br/><a href="/profile?mode=editprofile&page_profil=friendsfoes">Amis et ignorés</a><br/><a href="/profile?mode=editprofile&page_profil=notifications">Notifications</a><br/></div>');
jQuery('#quinfo').hide();
jQuery('#fa_profil').click(function() { jQuery('#quinfo').toggle().offset(jQuery(this).offset()); });
}
});

résultat :

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par FANCH 56 le Lun 23 Déc 2013 - 9:34

Bonjour

Pour le copyright Forumactif, il faut payer pour retirer.

Alors ici si on parle bien de la Toobar de Forumactif, voici quelques codes CSS

Code:
/* *******************AVATAR SUR TOOLBAR RESPECT DES PROPORTIONS*************** */

.fa_avatar {
  max-height: 26px;
  position: relative;
  top: -8px;
  margin-right: 5px;
  border-radius: 3px;
  margin-bottom: -10px;
}
Code:

/* **************************RETIRER RECHERCHE et LOUPE de la toolbar ********** */

#fa_textarea { display: none!important; }
#fa_magnifier { display: none!important; }


/* *********************RETRAIT RÉSEAUX SOCIAUX******************** */

        #fa_share { display: none!important; }

#fa_textarea {display: none!important;}

Code:
/* ***********************couleur mot notification et welcom Toolbar****************** */
        #fa_right a.rightHeaderLink, #fa_icon, #fa_toolbar #fa_service  #fa_welcome {
        color: blue !important;
        }

body #fa_toolbar #fa_menu #fa_welcome { color: blue; }
Code:

/* ***************************IMAGE RANG DANS TOOLBAR******************** */

        .rang_toolbar img {
        width: 75px;
        height: 30px;
        }

Javascipt sur toutes les pages pour le Rang sur Toolbar
Code:

$(function () {
            $(function () {
                var id = _userdata["user_id"];
                $('#fa_welcome').before('<span class="rang_toolbar"></span>');
                if (typeof (_userdata) != "undefined") {
                    $('.rang_toolbar').load('/u'+id+' #main-content .box-content.profile.center img:nth-child(6)');
                }
            });
        });

Avatar sur Toolbar toutes les pages
Code:

$(function () {
            $(window).load(function () {
                var av = $('#fa_usermenu img:eq(0)').attr('src');
                $('#fa_welcome').prepend('<img src="' + av + '" class="fa_avatar" />');
            });
        });


FANCH 56
+ Hyperactif +

Masculin
Messages : 13260
Inscrit(e) le : 25/07/2005

http://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Arold le Dim 29 Déc 2013 - 15:58

Merciii à vous deux mais comment je mets le ''Profil'' un peu plus haut ?

Arold
****

Masculin
Messages : 238
Inscrit(e) le : 21/07/2013

http://www.mootchies.com
Arold a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Ange Tuteur le Dim 29 Déc 2013 - 21:06

Essayer en ajustant il avec cette :
Code:
#fa_profil {
padding:0 !important;
position:relative;
top:0px;
right:0px;
bottom:0px;
left:0px;
}

Ange Tuteur
****

Masculin
Messages : 476
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant

Message par Arold le Mer 1 Jan 2014 - 22:29

Merci Smile

Arold
****

Masculin
Messages : 238
Inscrit(e) le : 21/07/2013

http://www.mootchies.com
Arold a été remercié(e) par l'auteur de ce sujet.

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