MatchMedia Js et affichage Php

Bonjour, je suis devant un pb que je n'arrive pas à résoudre :

Je souhaite tester la taille de l’écran pour afficher en php un menu spécifique.
je voudrais un truc comme ça (dans l'absolu )mais je ne sais pas comment afficher du php dans du js ( que je ne maitrise absolument pas)

<script>
if (window.matchMedia("(min-width: 350px)").matches) {
/* L'affichage est supp à 350 de large */
document.writeln('<?php include("menu/menu-gauche-900.php")?>');

} else {
/* L'affichage est inférieur à 350de large */

document.writeln('<?php include("menu/menu-gauche-350.php")?>');

}
</script>

Merci ebaucoup de votre autre

Si tu souhaite le faire comme cela et que cela marche en temps réel (l'utilisateur peut redimensionner la taille de la fenetre) tu va devoir le faire avec de l'AJAX/JSON.

Mais je te conseille fortement de le faire avec des media query en css !

Dans ton code tu affiche les deux menu et quand la fenetre fait plus de 350 tu cache le menu-gauche-350 (display:none) et inversement

Donc en gros :

Tu fais un seul fichier menu-gauche avec les deux menu dedans.

Si l'écran fait moins de 350 tu fais un display:none sur le menu-gauche-900

Si l'écran fait plus de 350 tu fais un display:none sur le menu-gauche-350
Modifié par remif (06 May 2015 - 11:44)

Bonjour, merci de ta réponse qui est clair mais que j'ai du mal a mettre en pratique !

car j'ai essayé de tester les @media dans une condition php ( ça ne fonctionne pas )

if ( @media only screen and (max-width: 350px) ) { require_once('menu/menu-gauche-350.php }
Else


j'ai aussi tenté de mettre mon style directement dans ma page :

<style type="text/css">

@media only screen and (max-width: 350px) {

<?php require_once('menu/menu-gauche-350.php');?>

}

</style>

Je suis vraiment une brèle, je me soigne pourtant

Alors, regard je vais essayer de t'éclairer :

Dans les pages de ton site tu fais un include :

<?php
       require_once('menu/menu-gauche.php');
?>

Dans le fichier menu-gauche tu met t'es deux menu (menu-gauche-900 et menu-gauche-350) a la suite par exemple :

<?php
    //Menu Grand
    echo '<div id="menu-900">';
      echo '<ul>';
        echo '<li><a href="#">Lien 1</a></li>';
        echo '<li><a href="#">Lien 2</a></li>';
        echo '<li><a href="#">Lien 3</a></li>';
      echo '</ul>';
    echo '</div>';

    //Menu petit
    echo '<div id="menu-350">';
      echo '<ul>';
        echo '<li><a href="#">Lien 1</a></li>';
        echo '<li><a href="#">Lien 2</a></li>';
        echo '<li><a href="#">Lien 3</a></li>';
      echo '</ul>';
    echo '</div>';
?>

Donc dans tes pages tu doit avoir les deux menu affichés.

Et dans ton fichier css tu ajoute t'es media query :

@media only screen and (max-width: 350px) {
   /* Quand la fenetre fait de 0px a 350px tu cache le grand menu*/
   #menu-900{
      display:none;
   }
}

@media only screen and (min-width: 351px) {
   /* Quand la fenetre fait au moins 350px tu cache le petit menu*/
   #menu-350{
      display:none;
   }
}

Est-ce que tu as compris ?
Modifié par remif (06 May 2015 - 15:45)

ah oui !! la je comprends
Merci beaucoup
c'est "tout bête" finalement quand on à le bon raisonnement !
Merci a toi pour ton aide je test cela ce soir