Deux soucis : menu horizontal
Résolu/Fermé
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
-
8 avril 2014 à 19:43
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 avril 2014 à 01:40
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 avril 2014 à 01:40
A voir également:
- Deux soucis : menu horizontal
- Deux ecran pc - Guide
- Deux comptes whatsapp - Guide
- Itinéraire google map entre deux adresses - Guide
- Faire deux colonnes sur word - Guide
- Concatener deux cellules excel - Guide
10 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 9/04/2014 à 15:14
Modifié par animostab le 9/04/2014 à 15:14
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)
dans le css tu rajoute
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.
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.
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
Modifié par Horizon355 le 9/04/2014 à 17:16
Modifié par Horizon355 le 9/04/2014 à 17:16
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 !
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 !
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
9 avril 2014 à 17:16
9 avril 2014 à 17:16
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)
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)
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
9 avril 2014 à 18:46
9 avril 2014 à 18:46
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
9 avril 2014 à 19:47
9 avril 2014 à 19:47
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
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
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
Modifié par animostab le 9/04/2014 à 20:19
Modifié par animostab le 9/04/2014 à 20:19
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 {
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 {
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
9 avril 2014 à 20:34
9 avril 2014 à 20:34
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;
}
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;
}
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
9 avril 2014 à 21:28
9 avril 2014 à 21:28
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">)
la ce devrait rouler tu peux mettre le sujet en résolu
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
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
9 avril 2014 à 21:48
9 avril 2014 à 21:48
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/
Il reste un petit espace entre chaque onglet, saurais-tu comment enlever ça pour que le fond prenne toute la place ? :)
http://matthiasetchegaray.com/
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
9 avril 2014 à 22:30
9 avril 2014 à 22:30
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
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
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
9 avril 2014 à 23:13
9 avril 2014 à 23:13
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 !!
Ca fonctionne bien, il reste juste une espèce d'ombre après contact
Merci beaucoup pour ta patience en tout cas !!
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
9 avril 2014 à 23:35
9 avril 2014 à 23:35
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;
}
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;
}
Horizon355
Messages postés
61
Date d'inscription
lundi 6 décembre 2010
Statut
Membre
Dernière intervention
6 août 2016
1
10 avril 2014 à 00:07
10 avril 2014 à 00:07
Nickel, ça marche !
Un grand merci à toi
Un grand merci à toi
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
737
10 avril 2014 à 01:40
10 avril 2014 à 01:40
Ok bonne continuation