Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mer 22 Mai 2013 - 7:38
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

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 Sam 4 Oct 2014 - 10:42, édité 24 fois





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Mer 22 Mai 2013 - 7:46
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 .





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Mer 22 Mai 2013 - 7:58
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 .





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Mer 22 Mai 2013 - 8:20
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 .





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Ven 21 Juin 2013 - 10:42
coucou ,

si vous avez prit le menu de recherche de ce tutoriel:
http://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__________________*/










Fondateur des forums Milouze14

- Contact par MP -



Teten85


Membre

Teten85

Message posté: le Dim 23 Juin 2013 - 1:50
Merci pour cette manip, je regarde clin oeil

pierre31250


Nouveau membre

pierre31250

Message posté: le Jeu 18 Juil 2013 - 0:21
merci

fleur78


Membre

fleur78

Message posté: le Mar 23 Juil 2013 - 19:12
Merci

ThunderTB


Nouveau membre

ThunderTB

Message posté: le Sam 29 Mar 2014 - 4:07
Merci énormément .

{12°S}coco-lapin


Nouveau membre

{12°S}coco-lapin

Message posté: le Jeu 17 Avr 2014 - 20:00
Merci et  :fuifduidi:

El_Mojito


Nouveau membre

El_Mojito

Message posté: le Mar 10 Nov 2015 - 15:07
Merci beaucoup !

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

 
  • © PunBB | Signaler un abus