Deux soucis : menu horizontal [Résolu/Fermé]

Signaler
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour,
Je rencontre deux problèmes avec mon site internet...
Tout d'abord le voici : http://matthiasetchegaray.com/

1. En gros, j'aimerais que le menu horizontal fasse comme le header, c'est-à-dire qu'il prenne toute la largeur de l'écran (sans pour autant être en position fixed)

J'ai essayé de le sortir de la div générale du site mais rien n'y fait...
Tout ce que j'obtiens, au mieux, c'est la couleur de fond du menu sur toute la largeur mais avec le menu collé à gauche...

2. Comment faire pour qu'au scroll, une ombre apparaisse en bas du header (qui est en position fixed) quand on dépasse le menu ? Je sais pas si je me fais bien comprendre

Cordialement


10 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
salut

1) pour le menu en html
tu dois mettre ton menu soit dans le header, soit après le header (donc le sortir de la div #site) puis avec css lui donner un width de 100%

2) pour ajouter une ombre au scroll tu peux faire ca en jquery
dans le <head> tu ajoute
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
ensuite apres <body> tu peux faire un truc du genre (en gras le nombre de pixel ou l'effet ombre va se déclencher)

<script>
$(document).scroll( function() {
if($(document).scrollTop()>150){
$("header").addClass("ombre");
}else{
$("header").removeClass("ombre");
}
});
</script>

dans le css tu rajoute

.ombre { 
-moz-box-shadow: 1px 1px 15px #993300;
-webkit-box-shadow: 1px 1px 15px #993300;
-ms-box-shadow: 1px 1px 15px #993300;
box-shadow: 1px 1px 15px #993300;
}


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
Bonjour,
Tout d'abord un grand merci pour ta réponse !

1 : j'ai déjà essayé et ça ne fonctionne pas, le menu a bien une barre qui prend tout l'écran quand je fais ça mais il se colle à gauche (je l'ai sorti de la div site et mis juste après le header)
J'imagine que si je le mets dans le header, ça va casser l'effet d'ombre au scroll

2 : nickel ça fonctionne

Merci beaucoup !
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
Pour l'ombre au scroll :
j'ai deux questions, premièrement, ça ne fonctionne pas sur ma page "créations"
Y a déjà 4 fichiers js importés localement et quand je link celui-ci, ma galerie ne marche plus... Connaitrais-tu aussi la propriété css qui fasse l'inverse de "transition:0.5s" ? Je voudrais que quand on rescroll vers le haut, l'ombre disparaisse avec une transition également :)

Merci beaucoup ! (et désolé pour le spam)
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
pour l'effet inverse teste ca

avec keyframe

@keyframes ombre-out {
0% { box-shadow: 1px 1px 15px #993300; }
100% { box-shadow: none; }
}

.ombreout {
animation: ombre-out 2s forwards;
}

ensuite le jquery

<script>
$(document).scroll( function() {
if($(document).scrollTop()>18){
$("header").removeClass("ombreout").addClass("ombre");
}if($(document).scrollTop()<18){
$("header").addClass("ombreout").removeClass("ombre");
}
});
</script>

pour keyframes il faudra rajouter les préfixes vendeur (si tu ne sais pas recherche google)

sinon pour ta page création c'est un conflit entre mootools et jquery car les deux utilisent $()
donc la solution fait ton slider avec jquery ou bien lits la doc sur jquery no conflict
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

pour ton menu

tu as un float left dans nav#menuhorizontal li a { ....

retire le et ensuite tu travailles soit sur le width soit sur le margin dans ce qui touche au menu
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
C'est bien trop compliqué pour un novice comme moi le no conflict js ou de refaire ça le slider en jquery ^^

L'effet inverse fonctionne parfaitement !

Pour le menu :
J'ai enlevé le float:left de #menu li a
J'ai réussi a mettre la barre de couleur sur toute la largeur dans #menu li {width:100%; background-color:#666;}

Le résultat c'est que le menu est maintenant collé à gauche de manière verticale MAIS avec la barre qui prend tout l'écran, c'est déjà ça !

Cordialement
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
pour jquery no conflict essaie ca

place l'appel a la bibliothèque jquery aapresles appels a mootools et test sinon essaie avant

puis le script que tu pourrait appeller avec un script src aussi

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(document).scroll( function() {
if($(document).scrollTop()>18){
$("header").removeClass("ombreout").addClass("ombre");
}if($(document).scrollTop()<18){
$("header").addClass("ombreout").removeClass("ombre");
}
});
});
</script>

ou

<script>
jQuery.noConflict();
jQuery(document).scroll( function() {
if(jQuery(document).scrollTop()>18){
jQuery("header").removeClass("ombreout").addClass("ombre");
}if(jQuery(document).scrollTop()<18){
jQuery("header").addClass("ombreout").removeClass("ombre");
}
});
</script>

pour le menu

rajoute display:inline-block; dans #menu li a { ....plus du margin si besoin
un width à 100% pour #menu ul {
et display:inline dans #menu li {
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
Pour les ombres c'est complètement opérationnel ! Merci !

Pour le menu :
Le menu a réussi a se centrer mais est à la verticale

Voici le code css exact que j'ai :
nav#menuhorizontal {
font-family: "Bebas Neue", sans-serif;
padding:0;
margin:0;
list-style-type:none;
text-decoration:none;
position:relative;
padding-top:100px;
}

nav#menuhorizontal ul { width:100%;}

nav#menuhorizontal li {
text-decoration:none;
text-align: center;
line-height: 4em;
float:left;
list-style-type: none;
display:inline;
width:100%;
background-color:#666;
}


nav#menuhorizontal li a.crea
{
width:249px!important;
}

nav#menuhorizontal li a {
transition: background 0.5s;
font-size:25px;
color:#333;
width:164px;
display:inline-block;
line-height:40px; /*hauteur de l'image de fond*/
background-color:#666;
text-decoration:none;
list-style-type:none;
text-align:center;
}
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
voila le css de ton menu corrigé (a copier coller)
et penser a mettre le html du menu en dessous de header (hors <div id="site">)

nav#menuhorizontal {
font-family: "Bebas Neue", sans-serif;
padding:0;
margin:50px 0 0 0; /**a adapter pour le top margin**/
list-style-type:none;
text-decoration:none;
padding-top:100px;
font-size:0px;
background-color:#666;
}

nav#menuhorizontal ul { text-align:center; }

nav#menuhorizontal li {
text-decoration:none;
text-align: center;
line-height: 4em;
list-style-type: none;
display:inline;
background-color:#666;
}


nav#menuhorizontal li a.crea
{
width:249px!important;
}

nav#menuhorizontal li a {
transition: background 0.5s;
vertical-align:top;
font-size:25px;
width:164px;
color:#333;
display:inline-block;
line-height:40px; /*hauteur de l'image de fond*/
background-color:#666;
text-decoration:none;
list-style-type:none;
}
nav#menuhorizontal li a:hover {
text-decoration:none;
color:white;
background-color:#333;
}

la ce devrait rouler tu peux mettre le sujet en résolu
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
Ca marche presque totalement !
Il reste un petit espace entre chaque onglet, saurais-tu comment enlever ça pour que le fond prenne toute la place ? :)

http://matthiasetchegaray.com/
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
ce truc s'appelle white space (sur du inline-block)
en fait white space s'applique a tous les éléments en ligne (ex les espaces entre les mots)

j'avais mis font-size:0px; dans nav#menuhorizontal, donc ca marchait en test mais le truc c'est que dans ton css tu as ca

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
font-size: 12px; /***ici***/
margin: 0;
padding: 0;
}

je ne vois pas que tu en ai besoin donc retire font-size:12px et il n'y aura plus d'espace

ou bien tout le code du menu tu le mets sans retour a la ligne ni espace (tu colle tous les <li>)

voila



Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
C'est fait !
Ca fonctionne bien, il reste juste une espèce d'ombre après contact

Merci beaucoup pour ta patience en tout cas !!
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
bon dernier truc l'ombre en fait c'est div site qui est trop haut

essaie

div#site {
background-color: rgba(78, 76, 81, 0.9);
box-shadow: 0 1px 2px 1px rgba(50, 50, 50, 0.32);
height: 100%;
margin: 100px auto 0 auto;
width: 905px;
}
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
Nickel, ça marche !

Un grand merci à toi
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
583
Ok bonne continuation