1485 sujets

Web Mobile et responsive web design

Cacher du texte en javascript

Bonjour, Je dois faire en sorte d'afficher les menus lorsque l'utilisateur a un écran de bureau mais de les cacher lorsqu'il a un téléphone portable.

La contrainte : je dois obligatoirement utiliser du JavaScript.

Voici le code html :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title> Accueil </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
<div class="page-center">
<h1> Sport</h1>
<nav id="menu" class="nav">
<!-- Les différents onglets -->
<ul id="onglets">
<li class="Foot"><a href="#.html"> Foot </a></li>
<li><a href = "Natation.html"> Natation </a> </li>
<li><a href = "course_pied.html"> Course à pied </a> </li>
</ul>
</nav>
</div>
</body>.
Modifié par luigieti (26 Jan 2014 - 23:14)
tu as essayer de jouer avec la propriete display : none en visant la resolution de l'écran (media quieries )
display: none cela fonctionne que pour le html ?
Le soucis c'est que je n'ai jamais fait de javascript et pour le projet je dois en utiliser et je ne vois pas comment faire.
bin

document.getElementById("menu").style.display = "none";

Mais il faudra en plus détecter la largeur du navigateur et le faire à chaque redimensionnement de celui-ci.
Pourquoi est-ce obligé de le faire en JS ?
Voila ce que j'ai mis mais les menus ne veulent pas disparaître.
C'est obligé de le faire en js car le prof veut nous imposer cette contrainte pour le projet à rendre.

if (window.width() < 768) {
document.getElementById("menu").style.display = "none";
}
Sujet clos
Aller à