Bonjour,
Actuellement, j'ai mon menu qui est appelé en php via un "include" dans mon "index.php".
Je désirerais savoir comment je pourrais faire pour que ce soit un fichier php différent pour les petites résolutions (menu_slide.php).
J'ai essayé différents systèmes grâce au tuto "responsive", mais je tourne en rond.
Voici la structure actuelle de mon code:
<body>
<?php include('../theme/top.php');?>
<?php include('../theme/menu.php');?>
<div id="conteneur">
<div class="debutbloc"></div>
<div class="bloc">
<br/>
<p><?php echo TXT_INDEX_P1; ?></p>
<p><?php echo TXT_INDEX_P2; ?></p>
<p><?php echo TXT_INDEX_P3; ?></p>
<p><?php echo TXT_INDEX_P4; ?></p>
<p><?php echo TXT_INDEX_P5; ?></p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div class="finbloc"></div>
...]
</body>Merci d'avance
10 réponses
Je vois pas trop ce qui est gênant avec la méthode "responsive".
Voilà ce que tu peux faire:
Exemple
Dès que ta résolution est inférieur à 900px (modifier la taille du navigateur pour voir ça) tu as le bouton "Menu" qui apparait, et la cabine qui est "cachée". Dès que tu passes sur le bouton Menu, la cabine est visible est le bouton invisible.
Enfin un bout de code vaut mieux qu'un long discours.
<html>
<head>
<title>Exemple</title>
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#menu {
margin-left: 25px;
height: 479px; width: 227px;
}
#content-menu {
background: url(http://ballonbillinghay.free.fr/theme/tel_en.png) no-repeat;
height: 479px; width: 227px;
}
#slide-menu {
background: url(http://ballonbillinghay.free.fr/theme/bmenu.png) no-repeat;
display: none;
float: right;
margin-top: 75%;
height: 126px; width: 29px;
}
@media screen and (max-width: 900px) {
#menu {
margin-left: -230px;
width: 260px;
}
#slide-menu {
display: block;
}
#menu:hover {
margin-left: 25px;
width: 227px;
}
#menu:hover #slide-menu {
display: none;
}
}
</style>
</head>
<body>
<div id="menu">
<div id="slide-menu"></div>
<div id="content-menu"></div>
</div>
</body>
</html>Ensuite avec jQuery tu peux créer un mouvement plus fluide.
Sinon en parlant de jQuery, vu qu'il semble que tu as peu de page, je te conseilles d'utiliser l'AJAX pour modifier le contenu, vu que la page est toujours identique, ça permet de pas avoir à recharger toute les images (surtout du GIF un format lourd). De plus utilises les variables $_SESSION pour le changement de langue, c'est plus beau dans l'URL.
Si j'ai bien compris en fonction de la résolution d'écran tu voudrais afficher un menu différent?
Bonjour,
Oui c'est exactement ça.
Le truc, c'est que sur les petits écrans, le menu empiète sur le corps du texte.
Je peux vous donner l'adresse du site si vous voulez vous faire une idée précise du pb.
perso je gère ça avec jquery et css
jquery te permet de connaitre la résolution d'écran
donc en fonction du resultat tu charges soit le fichier css qui va bien
soit tu as un css global avec par exemple une classe pour chaque resolution d'ecran et tu change l'attr de ta div menu
Il s'agit de 2 css (un pour IE et l'autre pour les vrais navigateurs ;) )
Comme préciser dans mon 1er post, j'ai essayé la méthode "responsive", mais sans succès.
je met les liens des 2 menus pour avoir une idée plus précise du menu en question.
menu actuel
menu pour les petites résolutions (ne pas faire attention aux includes manquants)
C'est exactement ça que je veux obtenir, mais je ne sais pas comment faire pour combiner mon/mes CSS et ma fonction jquery existante (menu_slide) d'où la création des 2 php pour les 2 menus, je suis totalement débutant en jquery et pas expert en css.
De plus, tu m’intéresse avec ajax, mais je ne connais ce code que de nom, et les seules tuto que j'ai trouvé sont pour créer un loader. De plus il n'y a que 2 gifs sur les pages, je ne pense donc pas m’attarder plus la dessus dans l'immédiat.
Concernant les variables $_SESSION pour le changement de langues et l'url, je mettrais ça en pratique plus tard. Sachant qu'il y a déjà un COOKIE pour la mémorisation de la langue en cours.
Voilà pour toi, un bon tuto sur Ajax de la part de notre Grafikart ^^
Même si il parle d'URL Rewriting, ce qui est impossible chez Free tu peux quand même le faire.
Après les COOKIES c'est pas le top non plus, il suffit que la personne n'accepte pas les COOKIES et à chaque page devra modifier la langue.
Sinon après c'est vrai que mon CSS ne marche pas avec IE, j'essayerai de trouver un moyen de réglé ça. Même si par jQuery c'est plus simple et marche pour tout les navigateurs.
ok merci, je vais pouvoir potasser ajax.
sinon, mon problème reste le même, comment je peux faire pour combiner mon menu en jquery et mon menu en css pour n'en faire qu'un seul fichier?
Peut-on au moins faire du jquery dans un css? si oui, comment? je ne trouve rien là dessus...
Concernant l'url rewriting, j'ai vu qu'il y avais moyens de bidouiller sur free ( lien).
jQuery dans une feuille CSS c'est impossible, mais faire du CSS avec jQuery si. Après soit tu fais un Slider en jQuery soit tout en CSS, mais évite de faire moitié de l'un et moitié de l'autre.
Et sinon l'url rewriting sur Free c'est pas top, soit tu passes par les erreurs 404, ou bien faire index.php/?/pages/articles.html.
Mais ça ne sera jamais du vrai URL Rewriting, et l'URL rewriting et pas mal si tu as plein de page ou autre, comme sur ton site juste de l'ajax en chargeant le contenu c'est bon.
Même pas besoin d'url rewriting au fait.
Moi qui voulais un menu original pour le site, me voilà maintenant coincé pour les petites résolutions :( .
D'après ce que j'ai vu du tuto sur AJAX, cela me parais également bien difficile dans mon cas de le mettre en place, car toutes mes pages ne sont pas dans le même sous-dossier. J'avais créer des petits modules pour que certains utilisateurs puissent en modifier le contenu de certaines pages.
Du coup,je vais laisser comme ça pour l'instant et me replongerai dedans plus tard en me basant sur ton code.
Merci de m'avoir donné de ton temps pour me répondre :).