Menu hover tablettes / téléphones

Bonjour à tous,

Je débute sur HTML / CSS et j'ai créé mon site. J'avais lancé une 1ère version de mon site et je viens de faire des modifications pour faire une 2nde version. Mais je galère complet sur 2 points:

1) Sur PC, quel que soit le navigateur, mon site fonctionne, pas de souci. En revanche, dès que je suis sur un téléphone mobile ou tablette, les 2 premiers points du menu ne sont pas accessibles (forcément, c'est un hover et le tactile ne prend pas ça en compte). J'ai regardé pleins de choses mais pas de solution trouvée pour l'instant...

2) J'aimerai que la largeur de mon site s'adapte quand on réduit la taille de la fenêtre internet sur PC ou quand on regarde le site sur mobile. J'ai ajouté une balise viewport mais rien n'y change. Ai-je trop de largeurs pré-définies pour mon cadre et autre pour que ça fonctionne?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Merci de votre aide.

Mon site web: www.charline-photography.com

Voici mon code HTML pour le menu:

<div id="menu" data-content-field="navigation">
<nav id="mainNavigation" class="main-nav dropdown-click desktop-nav">

<ul>
<li><a>Portraits</a>
<div>
<ul>
<li><a href="portrait-world.html">Du monde</a></li>
<li><a href="portrait-her.html">Elle</a></li>
<li><a href="portrait-family.html">Famille</a></li>
<li><a href="portrait-sport.html">Sport</a></li>
<li><a href="portrait-work.html">Travailleurs</a></li>
</ul></div></li>

<li><a>Lieux</a>
<div>
<ul>
<li><a href="place-water.html">Autour de l'eau</a></li>
<li><a href="place-wild.html">Pleine nature</a></li>
<li><a href="place-cities.html">Villes</a></li>
</ul></div></li>

<li><a href="animals.html">Animaux</a></li>
<li><a href="colors.html">Couleurs</a></li>
<li><a href="corporate.html">Corporate <div id="trait"></div></a></li>

<li><a href="news.html">News</a></li>
<li><a href="photoshoot.html">Séance photo</a></li>
<li><a href="tirage.html">Tirage photo</a></li>
<li><a href="aboutme.html">A propos</a></li>
<li><a href="contactto.html">Contact</a></li>

</ul></nav></div>

Et mon code CSS pour le menu:

@charset "utf-8";
/* CSS Document */

#menu ul {
font-size: 16px;
top: 135px;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
list-style-type: none;
width: 115px;
height: 167px;
left: 35px;
}

#menu li {
float:left;
margin:auto;
padding:0;
}
#menu li2 {
float:left;
margin:auto;
padding:0;
}

#menu li a {
font-size:15px;
display:block;
width:100px;
color:#000000;
text-decoration:none;
padding:5px;
}
#menu li2 a {
font-size:15px;
display:block;
width:100px;
color:#000000;
text-decoration:none;
padding:5px;
}

#menu li a:hover {
color:#09CDA5;
}
#menu li2 a:hover {
color:#09CDA5;
}

#menu ul li ul {
display:none;
position:absolute;
margin-top:-135px;
margin-left:90px;
left:inherit;
}
#menu ul li2 ul {
display:none;
position:absolute;
margin-top:-135px;
margin-left:90px;
left:inherit;
}

#menu ul li:hover ul {
display:block;
max-height:13em;
}
#menu ul li2:hover ul {
display:block;
max-height:13em;
}

#menu li:hover ul li {
float:right;
}
#menu li2:hover ul li2 {
float:right;
}

#subnav {
display:block;
width:100px;
color:#000000;
text-decoration:none;
padding:5px;
}

#trait {
margin-top:13px;
border-top: 0px solid #fff;
width : 95px;
}

Alors déjà, merci beaucoup pour l'explication claire et compréhensible! C'est très agréable de voir que des gens sont prêts à m'éclairer avec des mots que je comprends.

La solution 2 consiste à déplier le menu par défaut (c'est à dire qu'on l'affiche en entier, menu et sous-menus au chargement de la page), et à utiliser javascript pour le replier/déplier. Pour avoir la place d'afficher les sous-menus, c'est parfois compliqué quand le menu principal est vertical comme dans ton cas. Une possibilité consiste à afficher les sous-menus en dessous des éléments du menu principal dont ils dépendent au lieu de les afficher latéralement (on appelle ça un menu en accordéon). Ensuite, le javascript va cacher les sous-menus au chargement de la page (il ne le fera donc que s'il est présent). Et il les affichera ensuite en cas de clic de l'internaute sur un des éléments du menu principal comme pour la solution 1.

-> Pour tout t'avouer, c'est la solution que je voulais mettre en place dès le départ! Un menu qui se déroule "en-dessous" quand on clique dessus. Mais je n'ai pas réussi à le faire par moi-même. Là j'ai fouillé tes codes via le lien que tu m'as mis, mais rien n'y fait, je n'y arrive pas...
Je suis à 2 doigts de demander à quelqu'un (toi?) de le faire pour moi en échange d'une rémunération pour que le problème se solutionne...


Tout d'abord je te conseille de passer ton site en html5. [...]
Et je te conseille aussi de ne pas mettre de maximum-scale=1

-> Merci des très bons conseils que j'applique à toutes mes pages dès maintenant!
Je vais fouiller un peu pour l'histoire des pages, je sais que j'ai du faire des erreurs en définissant des largeurs à pleins de choses. Je vais voir comment faire au plus simple.
Un GRAND merci pour ton aide

Bonjour,

Voici un exemple vite fait de ce que ça peut donner. J'ai en très grande partie repris ce que tu as déjà sur ton site.

J'ai ajouté du javascript en bas de page pour gérer les sous-menus. Si javascript n'est pas activé, le menu s'affiche verticalement complètement déplié. j'ai fait en sorte que ça continue de marcher même si t'ajoutes d'autres sous-menus plus tard.

J'ai ajouté dans le html deux boutons pour cacher/montrer le menu lorsque la fenêtre est étroite (j'ai mis la limite à 750px, mais ça peut facilement se changer). Pour que ça marche, il faut aussi ajouter id="body" à la balise <body>. Pour cette partie, on n'a pas besoin du javascript. La clé est qu'on place un #body dans l'url pour savoir si le menu est visible ou pas, et alors css suffit.

J'ai retiré du html du menu des <div> qui selon moi sont inutiles (on peut faire ce qu'ils faisaient avec du css bien choisi et en ne gardant que les balises <ul>, <li> et <a>).

J'ai pas mal modifié le css. Mais j'ai laissé les dimensions en px bien que je n'aime pas trop ça (ça faisait trop à modifier juste pour un exemple).

A adapter selon tes besoins.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
#menu {float:left;width:200px;}
#menu ul {list-style-type: none;}
#menu ul,
#menu li {padding:0;margin:0;}
#menu>nav>ul>li>ul {margin-left:30px;}
#menu>nav>ul>li:nth-of-type(5) {margin-bottom:13px;} /*espace sous 'corporate'*/
#menu a {cursor:pointer;}

#menu>nav>ul {
font-size:16px;
padding: 0 0 0 30px;
z-index: 1;
}

#menu li {
width:130px;
}

#menu li a {
font-size:15px;
display:block;
color:#000000;
text-decoration:none;
padding:5px;
}

#menu li a:hover {
color:#09CDA5;
}

/*gestion des boutons montrant ou cachant le menu*/
.nav-show,
.nav-hide {display:none;}

@media (max-width: 750px) {
	#menu>nav>ul {padding: 0 0 0 30px;position:relative;}
	#mainNavigation {display:none;}
	.nav-show,
	.nav-hide {
		position:absolute;
		height:32px;
		font-size:32px;
		line-height:32px;
		text-decoration:none;
		color:#000;
		top:30px;
		left:40px;
		z-index:1;
	}
	#body:target #mainNavigation {display:block;}
	.nav-hide {display:none;}
	.nav-show {display:block;}
	#body:target .nav-hide {display:block;}
	#body:target .nav-show {display:none;}
}

/*gestion du reste, uniquement à titre indicatif*/
.containerheader {position:absolute;top:0;width:0;}
#picture {width:130px;position:absolute;top:30px;left:35px;}
#Cadrephoto {margin-top:130px;margin-left:275px;}
@media (max-width:750px) {
	#Cadrephoto {margin-left:0;}
	#body:target #Cadrephoto {margin:top:0;}
}
</style>
</head>
<body id="body">
<div id="menu" data-content-field="navigation">
<a href="#body" class="nav-show">&#9776;</a>
<a href="#" class="nav-hide">&#9776;</a>
<nav id="mainNavigation" class="main-nav dropdown-click desktop-nav">

<ul>
<li><a>Portraits</a>
<ul>
<li><a href="portrait-world.html">Du monde</a></li>
<li><a href="portrait-her.html">Elle</a></li>
<li><a href="portrait-family.html">Famille</a></li>
<li><a href="portrait-sport.html">Sport</a></li>
<li><a href="portrait-work.html">Travailleurs</a></li>
</ul></li>

<li><a>Lieux</a>
<ul>
<li><a href="place-water.html">Autour de l'eau</a></li>
<li><a href="place-wild.html">Pleine nature</a></li>
<li><a href="place-cities.html">Villes</a></li>
</ul></li>

<li><a href="animals.html">Animaux</a></li>
<li><a href="colors.html">Couleurs</a></li>
<li><a href="corporate.html">Corporate</a></li>

<li><a href="news.html">News</a></li>
<li><a href="photoshoot.html">Séance photo</a></li>
<li><a href="tirage.html">Tirage photo</a></li>
<li><a href="aboutme.html">A propos</a></li>
<li><a href="contactto.html">Contact</a></li>

</ul></nav></div>
<div class="containerheader">
<header>
<div id="picture">
<a href="index.html">
<img src="images/logo_charlinephotography.jpg" oncontextmenu="return false;" width="130" alt="logo">
</a>
</div>
</header>
</div>
<div id="Cadrephoto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et 
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem 
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<script>
(function()
{
	// return;
	function doSubMenu(ev)
	{
		// montre ou cache un sous-menu
		var ul=ev.target.parentNode.getElementsByTagName('ul')[0];
		if (ul.style.display=="none") ul.style.display="block";
		else ul.style.display="none";
		ev.preventDefault();
	}
	var nav=document.getElementById('mainNavigation');
	var uls=nav.getElementsByTagName('ul');
	var lis=nav.getElementsByTagName('li');
	// on cache les sous-menus
	for (k=1;k<uls.length;k++) uls[k].style.display="none";
	// on ajoute une fonction à déclencher quand on clique sur les li ayant des sous-menus
	// on ajoute un href sur les a pour pouvoir déplier/replier les menus via la navigation clavier
	for (k=0;k<lis.length;k++)
		if (lis[k].getElementsByTagName('ul').length)
		{
			lis[k].addEventListener("click", doSubMenu, false);
			lis[k].getElementsByTagName('a')[0].href="#";
		}
})();
</script>
</body>
</html>

Amicalement,

tu es adorable merci je vais essayer ça (je rentre seulement du boulot je découvre ton message)

Un ENORME merci à toi, j'ai mis en place sur ma page d'index et ça fonctionne! J'ai pris un peu dans les codes que tu m'as mis en adaptant à mon site avec ses particularités. Merci beaucoup, vraiment. J'ai remis l'ancienne version là jusqu'à demain le temps de changer sur toutes mes pages ce qu'il faut.

Je vais pousser le truc encore un peu loin mais connais-tu un moyen pour que quand on clique sur "portraits" et que le sous-menu s'affiche, puis qu'on clique alors sur "lieux", les 2 sous-menus ne se superposent pas comme c'est le cas là? en gros, est-ce dans le javascript qu'il faut modifier quelque chose pour lui dire que quand on clique sur le 2ème attribut, le 1er se referme automatiquement?

N'hésites pas à me dire si je pousse le bouchon un peu trop loin
En tout cas merci 1000 fois.

Merci pour les explications. La formule que tu viens de me donner ne fonctionne pas de toute façon via mon code, j'ai essayé de modifier quelques trucs mais rien n'y fait.
Je vais rester avec la fonction d'avant ou la personne déplie et replie à chaque fois, c'est absolument parfait déjà.

Un VRAI grand merci pour ton aide, tes explications claires. Je ne sais comment te remercier!

Bonjour,

Bizarre que ça fonctionne pas.

Je chercherai quand tu auras mis ta nouvelle version en ligne ce qui pourrait en être la cause.

Par ailleurs, je te signale que tu as des erreurs html. Par exemple, dans ta page d'accueil actuellement en ligne, tu as deux fois la balise <body>. Si tu as firefox, tu peux faire ctr+u sur PC ou cmd+u sur mac pour afficher ton code source. Firefox te signale les erreurs qu'il trouve en rouge. Pratique pour un premier diagnostic.

Amicalement,
Modifié par parsimonhi (22 Jan 2016 - 15:15)

Salut!
Le nec plus ultra pour une vérification!
Validateur HTML du W3C
Validateur CSS du W3C
En espérant t'aider.

charline87 a écrit :
La formule que tu viens de me donner ne fonctionne pas de toute façon via mon code, j'ai essayé de modifier quelques trucs mais rien n'y fait.

Je viens de tester la version que tu as mis en ligne, et a priori, ma deuxième version devrait macher en l'état.

Je reposte le script, mais en entier (je n'avais posté qu'une sous-partie de la deuxième version précédemment). Si ça ne marche toujours pas, ça m'intéresse de connaitre le symptôme.

(function()
{
	var k;
	function doSubMenu(ev)
	{
	// montre ou cache un sous-menu
		var ul=ev.target.parentNode.getElementsByTagName('ul')[0];
		if (ul.style.display=="none")
		{
			for (k=1;k<uls.length;k++) uls[k].style.display="none";
			ul.style.display="block";
		}
		else ul.style.display="none";
		ev.preventDefault();
	}
	var nav=document.getElementById('mainNavigation');
	var uls=nav.getElementsByTagName('ul');
	var lis=nav.getElementsByTagName('li');
	// on cache les sous-menus
	for (k=1;k<uls.length;k++) uls[k].style.display="none";
	// on ajoute une fonction à déclencher quand on clique sur les li ayant des sous-menus
	// on ajoute un href sur les a pour pouvoir déplier/replier les menus via la navigation clavier
	for (k=0;k<lis.length;k++)
		if (lis[k].getElementsByTagName('ul').length)
		{
			lis[k].addEventListener("click", doSubMenu, false);
			lis[k].getElementsByTagName('a')[0].href="#";
		}
})();

Amicalement,

Absolument DEMENT, ça marche très bien, merci beaucoup!!!
Et merci également Duchampignon pour les liens pour checker le code, je vais regarder ça