Menu responsive disparait lors de la rotation

Anonyme

5 décembre 2017 à 22:34:22

Bonjour à tous,

J'ai un souci avec mon menu responsive que j'ai créé. En effet, sur mobile, lorsque j'ouvre et que je ferme le menu en mode portrait, il ne s'affiche plus si je met mon appareil en mode paysage. Je suis obligé d'actualiser la page pour qu'il s'affiche de nouveau en mode paysage. N'hésitez pas également à me dire si mon code est mal optimisé, c'est mon tout premier site

Bonne soirée.

Alexis

Voici la partie HTML :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin 35 - Accueil</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $(".img_menu_res").click(function(){
        $("#menu").slideToggle("slow");
    });
});
</script>
	
<body>
	<header>
		<ul class="nav">
			<div id="navbar_res">
 	  	  	    <li class="nav_res"><a href="#home">Menu<img class="img_menu_res" src="media/icon/align-justify.png"></a></li>
			</div>
		  	<div id="menu">
			    <li class="nav_left"><a href="#home">Accueil<img class="img_menu" src="media/icon/home.png"></a></li>
  	  	  	    <li class="nav_left"><a href="#news">Services<img class="img_menu" src="media/icon/settings.png"/></a></li>
  	      	    <li class="nav_left"><a href="#news">Contact<img class="img_menu" src="media/icon/envelope.png"/></a></li>
		        <li class="nav_right"><a href="#contact">Connexion<img class="img_menu" src="media/icon/padlock.png"/></a></li>
			</div>
		</ul>
	</header>
	test
</body>
</html>

Voici la partie CSS :

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

body {
	background-image: url(media/background.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

a {
	text-decoration: none;
	color: inherit;
}

.nav {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
	background-color: #262626;
}

.nav_left {
	float: left;
	display: inline;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}

.nav_right {
	float: right;
	display: inline;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}

.nav_res {
	display: none
}

.img_menu {
	float: left;
	margin-right: 10px
}

.img_menu_res {
	float:right
}

@media screen and (max-width : 5.000in ){
	
	.nav {
    list-style-type: none;
    margin: 0;
    padding:0;
    overflow: hidden;
	background-color: #262626;
}

	.nav_left {
	float: none;
	display: list-item;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}

	.nav_right {
	float: none;
	display: list-item;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
	.nav_res {
	float: none;
	display: list-item;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
	}
	
	#menu {
		display: none
	}
}

Skull-dragon

5 décembre 2017 à 22:43:58

Salut

normal tu le met en display none

met le en block

GuillaumeBo1

6 décembre 2017 à 1:04:37

wow tu aimes écrire toi vu toute les répétitions dans ton css

.nav_left, .nav_right, .nav_res {
    float: none;
    display: list-item;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

Pas plus simple de tout regroupé ?

Puis s'il te plait, les met tout les ; ça t'évitera d'avoir des erreurs et chercher pendant 50 ans d'où elles viennent.

Enfin float c'est un peut passé. Il y a le display: inline-block; ou encore le flexbox.

Ha si aussi dans ton @media ne met que les partie qui change. le color:white; par exemple ne sert strictement à rien vue qu'il ne change pas en fonction de la taille de l'écran et c'est 1 parmi tant d'autre.

Vraiment évite toute répétition premièrement le css est chargé plus rapidement car plus léger et deuxièmement on si retrouve toujours plus facilement dans un code de 10 lignes que dans un de 1000 lignes alors qu'ils font exactement la même chose. :magicien:

Une dernière chose la bonne pratique veux que l'on n'utilise pas les id pour faire du CSS mais des class. Les id servant uniquement pour les ancres et le JS. si tu veux en savoir plus je te conseil le blog d'un de nos Membres (fan de Microsoft pouha :-° ) emmanuelbeziat

-
Edité par GuillaumeBo1 6 décembre 2017 à 1:21:07

Un homme azerty en vaut deux.

Anonyme

6 décembre 2017 à 9:17:32

Super, merci beaucoup pour votre aide,

Pour ce qui est de ma page CSS, je suis en train de finaliser les optimisations a. J'ai supprimer les répétitions, mis les ; et retiré le superflu dans mon @media. J'ai aussi remplacé mes id par des class.

Concernant mon bug, j'ai quelques petites précisions à vous apporter. Si je tourne mon téléphone en mode paysage quand le menu est ouvert, il s'affichera. Par contre, si je le tourne quand le menu est fermé, il ne s'affichera pas. Enfin, si je le tourne sans avoir ouvert le menu (il est donc fermé) il s'affichera bien en mode paysage.

Merci beaucoup pour votre aide.

GuillaumeBo1

6 décembre 2017 à 13:07:12

tout souhaites qu'il se ferme tout le tant en mode paysage ou tout le temps ouvert ?

Un homme azerty en vaut deux.

Anonyme

6 décembre 2017 à 13:15:53

En fait, en mode paysage c'est le même menu que sur un pc qui apparaît, comme sa taille le permet. Mais du coup je souhaite qu'il s'ouvre quand on le met en mode paysage ou alors encore mieux, qu'il s'ouvre quand on dépasse les 480px. Comme sa je pense que sa s'ouvre et sa change d'affichage en même temps, je pense que sa le fera

Edit : Voici le script d'un menu similaire, je pense que le script agit lors du changement de taille d'une fenêtre mais je ne comprend pas tout

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});

});
})(jQuery);

-
Edité par Anonyme 6 décembre 2017 à 13:28:26