1486 sujets

Web Mobile et responsive web design

Problème place menu hamurger sur smartphone

Pages :
(reprise du message précédent)

je viens de recopier le css
... non ça marche pas

je t'explique , le menu: avant qd tu passais la souris sur redaction, le sous menu s'ouvrait , là il faut cliquer, le sous menu apparait et c'est cliquable. ( pas tres pratique)
et secondo, comme tout a l'heure, la page, avec des sous menus, le lien ne focntionne pas :
exemple redaction vers redaction.html, meme en cliquant dessus, normal car qd tu cliques dessus ça ouvres le sous menu...
Oui ce "problème" est normal, c'est ce que j'explique dans ce commentaire.
Après si tu tiens à garder absolument le hover pour la version bureau et non pas le clic, alors pour la version mobile il faut trouver une autre solution comme afficher les sous-menu en permanence par exemple.
J'avoue que j'ai pas d'autres idées.

Au pire tu peux aider l'utilisateur à comprendre mieux le fonctionnement du clic en ajoutant des petites flèches. J'ai mis à jour le code ici, en corrigeant un bug au passage.
Modifié par Raphi (01 Aug 2016 - 11:41)
les petites fleches , c'est sympa, on les voient sous pc, mais pas avec le samrtphone.
Sinon, tu est pret du but
Le hover marche maintenant sur pc, reste plus que le lien redaction vers redaction html, correction ...
En gros, si il y a un sous menu le lien ne fonctionne pas, s'il n'y a pas de sous menu comme tarif par exemple le lien tarif fonctionne ...tu me suis ?
Il faut que tu remettes le css exactement dans l'ordre que je l'ai marqué, sinon des règles en mobile sont annulées.
Par contre pour le hover c'est pas le fonctionnement normal là. Il ne doit normalement plus fonctionner si tu recopies le code exactement comme je l'ai écris. Si tu laisses comme ça, c'est pas nickel puisque si tu cliques sur un des items, tu perds le hover ensuite. C'est pour ça qu'il ne sera pas possible d'avoir et du clic et du hover en même temps.
j'ai tout reécrit comme toi, regarde :
http://www.cabinet-focus.fr/assets/css/style.css
et ça marche toujours pas ni sur pc , ni sur mobile ( le lien marche pas quand il y a un sous menu)
Je voudrais que ça face comme sur ce site
http://neoplume.fr/
si tu vas sur redaction, le sous menu s'ouvre , et tu clique, et tu peux aussi cliquez sur redaction, en pc ou smartphone.
Pourquoi sur son site ça marche et pas moi ..je suis perdu
Hé oui c'est ce que je t'explique.
Si tu gère les sous-menus au clic, alors tu ne peux rendre cliquable le lien parent lorsqu'il y a un sous-menu.

Dans l'exemple que tu me montres c'est exactement ce dont je parlais :
- version bureau : sous-menu qui s'ouvrent au hover (donc tout est cliquable)
- version mobile : sous-menu déjà ouvert, pas de notion de hover ou de clic

Si cette solution te convient alors, c'est très simple :
- tu supprimes mon script js.
- tu remplaces le css que je t'ai donné par celui-ci :
.submenu .nav-tabs {
  margin-bottom: 0;
}

.has-child > a:before {
  content:"\f107";
  font-family: "FontAwesome";
  position: absolute;
  right: 3px;
  top: 50%;
  margin-top: -9px;
  font-size: 12px
}

@media (max-width: 768px) {
  div[id="navbar"].pull-right {
    float: none !important;
  }

  .navbar-main .submenu {
    position: static;
    visibility: inherit;
    width: auto;
  }

  .submenu .nav-tabs > li {
    float: none;
  }

  .has-child > a:before {
    right: 25px;
  }
}


Et si tu veux enlever les flèches, retire mes règles css, commençant par .has-child.
tu es un chef ça fonctionne !! sur pc, sur mobile, tout ce que je souhaitais.
Merci de ta compétence et de ta disponibilité.
Ps, le site est pas encore fini, mais qu'en penses tu ?
Ah c'est cool ça ! Smiley smile

Concernant le site, personnellement j'aime bien le thème que tu as choisi, les couleurs sont agréables et l'aspect général est sympa.
Une fois le site terminé, n'hésites pas à le soumettre dans la section "Critique de vos sites", tu pourra ainsi glaner de bons conseils. Smiley cligne
Pages :
Sujet clos
Aller à