La barre de navigation à droite dans un menu déroulant

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

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

L'aperçu imagé:
Afficher le menu déroulant:

il m'a fallut un sacré bout de temps avant de trouver la solution pour afficher
la barre de navigation en menu déroulant transpir.

Beaucoup se servait de simple lien et en fait on rencontrait un sérieux problème avec la messagerie privée
et aussi avec la déconnexion qui nous envoyez vers une page de confirmation.

Tout ceci et de l'histoire ancienne  .

Ce menu déroulant est opérationnel tout comme la barre traditionnelle les ami(e)s MP et Nouveaux Mps  hinhin


Le tutoriel suivant et seulement indiqué pour des liens et non des images  clin oeil .

Le menu est positionné en haut à droite et ne sera pas fixé.

Allez c'est parti....

On va dans un premier temps s'assurer que les images soient bien désactivées dans le P.A :

Affichage/Page d'accueil/En-tête & Navigation/En-tête des pages

Afficher seulement des images dans la barre des liens : cochez "Non" .

Ensuite on va désactiver l'affichage des images qui sont encore masquées et déforment la structure
des contenants puis toute la C.S.S du menu déroulant.
Toute la C.S.S est commentée pour que vous puissiez agrémenter ce dernier à votre gout.

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



regardeplusbas
Réponse automatique:
Merci de cliquer ici pour voir le message










Pensez à enregistrer puis à valider en cliquant respectivement sur  Enregistr  puis Ajout

Admirez le travail  tape la  .

Voilà, c'est tout pour le moment  clin oeil  .


Dernière édition par Milouze14 le Lun 7 Nov 2016 - 15:43, édité 25 fois



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





En position fixe

Icône par defaut le Mer 22 Mai 2013 - 7:46
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Vous préférez avoir le menu en position fixe oups1 .

Dans votre C.S.S
recherchez :

Code:

/*La barre de navigation*/
#menu
{
position:absolute;
right:0;/*on positionne la barre a droite*/
top:100px;/*on positionne la barre a 100px du haut*/
width: 180px;/*on donne une largeur*/
padding: 10px 0px 0px 0px;/*on donne des espaces haut 10px et le reste a 0*/
list-style: none;/*on supprime le style des balises li */
border:1px solid #ffffff;/*on donne une bordure de 1px en style solid et de couleur blanche*/
border-right:none;/*on supprime la bordure droite*/
background-color:#000000;/*on donne une couleur de fond*/
-webkit-border-top-left-radius: 6px;/*les bordures arrondies*/
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
}

Changer la position absolute en fixed
comme ceci:

Code:

/*La barre de navigation*/
#menu
{
position:fixed;
right:0;/*on positionne la barre a droite*/
top:100px;/*on positionne la barre a 100px du haut*/
width: 180px;/*on donne une largeur*/
padding: 10px 0px 0px 0px;/*on donne des espaces haut 10px et le reste a 0*/
list-style: none;/*on supprime le style des balises li */
border:1px solid #ffffff;/*on donne une bordure de 1px en style solid et de couleur blanche*/
border-right:none;/*on supprime la bordure droite*/
background-color:#000000;/*on donne une couleur de fond*/
-webkit-border-top-left-radius: 6px;/*les bordures arrondies*/
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
}



Pensez à valider les modifications en cliquant sur le bouton Valid .




-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Un petit slide sur la barre ?

Icône par defaut le Mer 22 Mai 2013 - 7:58
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Avec une barre a moitié cachée et au survol de cette dernière on l'affiche dans sa totalité hinhin .

Dans ce cas il faudra absolument mettre la position fixed hinhin .

Pour indication :
la barre a une largeur de 180px et je veux en cacher la moitié
donc dans right: je dépose -90px

Code:

/*La barre de navigation*/
#menu
{
position:fixed;/*on fixe la barre*/
right:-90px;/*on positionne la barre a droite en cachant la moitie*/
top:100px;/*on positionne la barre a 100px du haut*/
width: 180px;/*on donne une largeur*/
padding: 10px 0px 0px 0px;/*on donne des espaces haut 10px et le reste a 0*/
list-style: none;/*on supprime le style des balises li */
border:1px solid #ffffff;/*on donne une bordure de 1px en style solid et de couleur blanche*/
border-right:none;/*on supprime la bordure droite*/
background-color:#000000;/*on donne une couleur de fond*/
-webkit-border-top-left-radius: 6px;/*les bordures arrondies*/
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-transition: all 0.5s ease-in-out;/*l effet de transition qui s effectuera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}




Et ajoute enfin la css pour que le menu revienne dans sa position initiale
Code:

/*on demande que la barre revienne a sa position initiale*/
#menu:hover
{
right:0;
}

Pense à valider les modifications en cliquant sur le bouton Valid .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





La barre a gauche

Icône par defaut le Mer 22 Mai 2013 - 8:20
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Pour avoir la barre à gauche en position absolute donc non fixe

collez tout ceci


Code:

/*On desactive tous les boutons de la barre de navigation*/
img#i_icon_mini_index  , img#i_icon_mini_portal , img#i_icon_mini_gallery ,
img#i_icon_mini_calendar , img#i_icon_mini_faq , img#i_icon_mini_logout , img#i_icon_mini_login ,
img#i_icon_mini_search , img#i_icon_mini_members , img#i_icon_mini_groups , img#i_icon_mini_profile  ,
img#i_icon_mini_message , img#i_icon_mini_new_message , img#i_icon_mini_register
{display:none;}

/*La barre de navigation*/
#menu
{
position:absolute;
left:0;/*on positionne la barre a gauche*/
top:100px;/*on positionne la barre a 100px du haut*/
width: 180px;/*on donne une largeur*/
padding: 10px 0px 0px 0px;/*on donne des espaces haut 10px et le reste a 0*/
list-style: none;/*on supprime le style des balises li */
border:1px solid #ffffff;/*on donne une bordure de 1px en style solid et de couleur blanche*/
border-left:none;/*on supprime la bordure gauche*/
background-color:#000000;/*on donne une couleur de fond*/
-webkit-border-top-right-radius: 6px;/*les bordures arrondies*/
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-transition: all 0.5s ease-in-out;/*l effet de transition qui s effectuera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}


/*Placement du premier element */
#menu li
{
float: right;/*on le positionne a droite*/
padding:0 0 10px 10px;/*on donne des espaces haut rien droite rien bas 10px gauche 10px*/
position: relative;
}

/*Le titre de la barre de navigation*/
#menu a
{
float: right;/*on le positionne a droite*/
height: 25px;/*on lui donne une hauteur*/
padding: 0 10px;/*on donne des espaces haut 0 et le reste a 10*/
color: #ffffff;/*on lui donne une couleur*/
font-size: 12px;/*on lui donne une taille*/
text-decoration: none !important;/*on supprime le soulignement*/
}

/*Survol du titre de la barre de navigation*/
#menu li:hover > a
{
color:#5EA440;/*on lui donne une couleur*/
}
/*Le contenant des liens masque*/

#menu ul
{
list-style: none;/*on supprime le style des balises li */
margin: 0;/* aucune marge*/
padding: 0;/*aucun espace*/
display: none;/*on desactive l affichage*/
position: absolute;
top: 35px;/*on place le contenant au bord de la barre*/
right: -1px;/*on le place a -1px du a la bordure*/
z-index: 999;
border-top:none;/*on supprime la bordure du haut*/
border: 1px solid #ffffff;/*on donne une bordure de 1px en style solid et de couleur blanche*/
-webkit-border-bottom-right-radius: 6px;/*les bordures arrondies en bas a gauche et a droite*/
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
/*on affiche le contenant des liens*/
#menu li:hover > ul
{
display: block;/*on affiche le contenant*/
background:#000000;/*on lui donne une couleur de fond*/
min-width:130px;/*on lui donne une largeur minimale*/
width:auto;/*on autorise une largeur indefinie*/
}
/*L affichage de chaque contenant des liens*/
#menu ul li
{
float: none;/*on laisse l element dans sa position*/
margin: 0;/*aucune marge*/
padding: 0;/*aucun espace*/
display:block;/*on demande l affichage en bloc*/
padding:10px;/*on donne des espaces de 10px sur les quatres cotes*/
}

/*L affichage des liens*/
#menu ul li a.mainmenu
{
padding:3px;/*on donne des espaces de 3px sur les quatres cotes*/
display:block;/*on demande l affichage en bloc*/
float:none;/*on laisse l element dans sa position*/
color:#666666;/*on lui donne une couleur*/
border-left: 1px solid #666666;/*la bordure de gauche */
border-right: 1px solid #666666;/*la bordure de droite*/
-webkit-transition: all 0.5s ease-in-out;/*l effet de transition qui s effectuera au survol*/
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

/*L affichage des liens au survol*/
#menu ul li  a.mainmenu:hover
{
color:#ffffff;/* la culeur au survol*/
border-left: 1px solid #ffffff;/*la bordure de gauche */
border-right: 1px solid #ffffff;/*la bordure de droite */
}
/*le bouton rechercher*/
div#search_menu
{
top:20px !important;/*on positionne le module a 20px */
left:200px !important;/*on positionne le module a 200px de la gauche*/
}






Pense à valider les modifications en cliquant sur le bouton Valid .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

si vous avez prit le menu de recherche de ce tutoriel:
https://www.milouze14.com/t24902-menu-rechercher-en-haut-a-gauche-effet-survol

Il faudra appliquer absolument cette modification dans la C.S.S afin que le bloc de recherche du menu déroulant soit fonctionnel hinhin .

Code:

/*_________________DEBUT DU BLOC RECHERCHER__________________*/
/*le bouton rechercher*/

#menu div#search_menu
{
top:20px !important;/*on  place le module a 20 px du haut du menu rechercher*/
left:-270px !important;/*on place le module en jouant avec le negatif */
border:1px solid #20aec8;
padding:10px;
background-color:#000000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#menu div#search_menu .forumline
{
background:#000000 !important ;
cursor:pointer;
border:1px solid #20aec8; 
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*on supprime la bordure au dessus de rechercher*/
#menu div#search_menu .forumline th.thHead
{border:none;}
/*on donne une couleur a resultat par etc etc*/
#menu div#search_menu .forumline .row2 .genmed
{
color: #EFB71F;
}
/*on donne une apparence au champ*/
#menu 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 une apparence au champ a son survol*/
#menu div#search_menu .forumline .row2 input.post:hover
{
width:150px;/*ne pas toucher*/
background-color:#ffffff;
color:#000000;
}
#menu div#search_menu .forumline input.button
{
background-color:#000000;
color:#20aec8;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/*on supprime la bordure et donne une couleur*/
#menu div#search_menu .forumline th.thHead {border:none;color:#20aec8;}
/*on donne une apparence à la barre de separation*/
#menu div#search_menu .forumline .row2 hr {border:1px dotted #20aec8;}
/*on donne une apparence au texte Resultats par  Messages et sujets */
#menu div#search_menu .forumline .row2 .genmed {color: #20aec8;}
/*on donne une apparence a la recherche avancee*/
#menu div#search_menu .forumline .row2 .genmed a 
{
font-size:11px;
height:30px;
border-left:none !important;
border-top:none !important;
color:#20aec8;
text-decoration:none !important;
}
/*_________________FIN DU BLOC RECHERCHER__________________*/









-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Teten85
avatar
Membre

MessageTeten85

  • 16px
  • 24px
  • Zoom
Merci pour cette manip, je regarde clin oeil
pierre31250
Nouveau membre

Messagepierre31250

  • 16px
  • 24px
  • Zoom
merci
fleur78
avatar
Membre

Messagefleur78

  • 16px
  • 24px
  • Zoom
Merci
ThunderTB
Nouveau membre

MessageThunderTB

  • 16px
  • 24px
  • Zoom
Merci énormément .
{12°S}coco-lapin
avatar
Nouveau membre

Message{12°S}coco-lapin

  • 16px
  • 24px
  • Zoom
Merci et  :fuifduidi:
El_Mojito
avatar
Nouveau membre

MessageEl_Mojito

  • 16px
  • 24px
  • Zoom
Merci beaucoup !
Invité
avatar
Invité

MessageInvité

  • 16px
  • 24px
  • Zoom
Merci beaucoup !

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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