Ajouter un menu custom sur mobile

francois.douville · Mars 6, 2018, 1:20

J’aimerais ajouter un menu sur mobile comme sur La Tranchée

Et quand tu clique, la fenêtre prend toute l’écran.

Quelqu’un aurait une idée du code derrière ce magnifique menu?

Olivier_Lambert · Mars 6, 2018, 6:39

C’est un mixte de JS et de CSS!

Voilà pour le HTML:

<div id="mobile-menu"></div>
<div class="background">
  <div class="row" style="margin-top:5%; padding:10px;">
    <div class="col-md-12" style="border-bottom:1px #ccc solid;">
      <h1 style="margin:0px;">BONJOUR <?=strtoupper($_SESSION['user_fname'])?>!</h1>
      <h2 style="margin:12px 0 15px 0;">Qu'aimerais-tu faire?</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <a href="https://forum.latranchee.com">Aller sur la communauté<i class="fa fa-users"></i></a>
      <a href="https://www.latranchee.com/formation">Voir nos formations<i class="fa fa-graduation-cap"></i></a>
      <a href="https://www.latranchee.com/formation">S'inscrire au webinaire<i class="fa fa-video-camera" aria-hidden="true"></i></a>
      <a href="https://www.latranchee.com/blogue">Lire le blogue<i class="fa fa-book"></i></a>
      <a href="https://www.latranchee.com/portail/affiliation">Aller au portail d'affiliation<i class="fa fa-usd"></i></a>  
      <a href="https://www.latranchee.com/portail/facturation">Voir vos factures<i class="fa fa-credit-card"></i></a> 
      <a href="https://emplois.isarta.com/jobs/" target="blank">Offres d'emploi<i class="fa fa-briefcase"></i></a> 
      <a href="https://www.messenger.com/t/latranchee">Nous parler sur Facebook<i class="fa fa-commenting txt-bold"></i><i class="fa fa-cog fa-spin hide"></i></a>

    </div>
  </div>
</div>

Voilà pour le JavaScript

<script>
function click_outside(selector){
  $(selector).on('click', function(e) {
    e.stopPropagation();
  });
  console.log("Click Outside initialized for "+selector);
  $('html').click(function(event) {

    if($(selector).hasClass("active")){
      console.log("clicked outside");
     $(selector).fadeOut(200, function() {
              $(selector).removeClass("active");
          });
      }
  });
}

  $('#mobile-menu').addClass("visible");

  $('html').click(function(event) {
    if ($('.background').hasClass("active")){
      $("#mobile-menu").toggleClass("active");
      $('.background').toggleClass("active");
      $('.dropdown').toggleClass("active");
      $('body').toggleClass("overflowMobile");
    }
  });

  $('.background').click(function(event){
      event.stopPropagation();
  });

  $('#mobile-menu').click(function(event){
    $(this).toggleClass("active");
    $('.background').toggleClass("active");
    $('body').toggleClass("overflowMobile");
    event.stopPropagation();
  });

  $(function() {
    $('#menu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass("active");
  });
</script>

Et pour le css:

#mobile-menu{
	z-index: 5000;
	border: 1px #f9f9f9 solid;
	visibility:hidden;
	opacity:0;
	position: fixed;
	width: 50px;
	height: 50px;
	bottom:20px;
	left:20px;
	border-radius: 150px;
	background-color: #fff;
	box-shadow: 0px 5px 5px #888;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
	cursor: pointer;
	-webkit-transition: .25s ease-out;
	-moz-transition: .25s ease-out;
	-o-transition: .25s ease-out;
	transition: .25s ease-out;
}
#mobile-menu.visible{
	visibility: visible;
	opacity:1;
}
#mobile-menu:hover{
	box-shadow: 0px 3px 3px #666;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.6);
	bottom:15px;
	left:15px;
	width: 60px;
	height: 60px;
}
#mobile-menu:hover:after{
	top: 15px;
	font-size: 21px;
	color:#888;
}
#mobile-menu:after{
	content: "\f0c9";
	font-family: 'FontAwesome';
	color: #4a5659;
	position: relative;
	top: 11px;
	font-size: 19px;
	text-align: center;
	display: block;
	-webkit-transition: .25s ease-out;
	-moz-transition: .25s ease-out;
	-o-transition: .25s ease-out;
	transition: .25s ease-out;
}

#mobile-menu.active{
	box-shadow: none;
	border-radius: 0px;
}
#mobile-menu.active:after{
	content:"\f00d";
}


.background{
	z-index: 10;
	position: fixed;
	width:100%;
	height:100%;
	background-color: #fff;
	border-radius: 0px;
	box-shadow: none;
	bottom:0px;
	left:0px;
	visibility: hidden;
	opacity: 0;
	overflow: auto;
	transition: visibility 0s, opacity 0.5s linear;
	-webkit-transition: .25s ease-out;
	-moz-transition: .25s ease-out;
	-o-transition: .25s ease-out;
	transition: .25s ease-out;
}

.background.active{
	visibility:visible;
	opacity: 1;
	bottom:0px;
}

.background a, .background a i{
	transition: visibility 0s, opacity 0.5s linear;
	-webkit-transition: .25s ease-out;
	-moz-transition: .25s ease-out;
	-o-transition: .25s ease-out;
	transition: .25s ease-out;
}

.background a i{
	visibility: hidden;
	opacity: 0;
}

.background a{
	display: block;
	padding:10px 0;
	color:#444;
	font-size: 22px;
	font-family: "Open Sans";
	font-weight: 300;
}

.background a:hover{
	color: #111;
}

.background a:hover i{
	visibility:visible;
	opacity: 1;
}

.background a i{
	margin-left: 15px;
}
.background a{
	font-size:16px;
}
.background h2{
	font-size: 22px;
	font-family: "Open Sans";
	color:#444;
}
.background h1{
	font-size: 28px;
}
.background a i{
	visibility: visible;
	opacity: 0.7;
	left: 0px;
	position: relative;
	float: left;
	margin-right: 15px;
	top:3px;
	width: 20px;
	text-align: center;
}

@media (max-width: 768px) {
	.background{
		padding-bottom: 85px;
	}
	#mobile-menu{
		bottom: 25px;
		left:calc(50% - 25px);
	}
	#mobile-menu:hover{
		left:calc(50% - 30px);
		bottom: 20px;

	}
	#mobile-menu:hover:after{
		top: 16px;
		font-size: 21px;
		color:#888;
	}
	.overflowMobile{
		overflow-x: hidden; 
		overflow-y: hidden;
	}
}
@media (min-width: 769px) {
	.background{
		height: 550px;
		width: 350px;
		overflow: hidden;
		bottom: 0px;
		left: 0px;  
		box-shadow: 0px 0px 0px #999;
		box-shadow: 0px 0px 0px rgba(0,0,0,0);
	}
	.background.active{
		overflow: hidden;
		bottom: 15px;
		left: 15px;
		box-shadow: 0px 5px 5px #666;
		box-shadow: 0px 5px 5px rgba(0,0,0,0.3);
	}
}

Il en manque peut-être…

Je pensais le rendre plus “évident” un peu… Les gens ne sont pas habitués d’avoir un menu en bas comme ça. Mais je trouve que ça fait plus de sens côté UX parce que c’est plus facile à utiliser avec son pouce sur un téléphone.

francois.douville · Mars 6, 2018, 7:02

Merci! Je vais tester et modifier ça! Je vais surement mettre de la couleur pour que ça ressemble au bouton + de google.

francois.douville · Mars 7, 2018, 11:51

J’ai bien mis le html dans le Après l'entête et le JS dans le </head> et le CSS dans le CSS … et je ne vois pas le bouton!

Olivier_Lambert · Mars 8, 2018, 5:47

L’url stp? Je vais aller voir dans la console, peut-être que jQuery est pas loadé!

francois.douville · Mars 8, 2018, 12:50

https://forum.lepeuplier.ca
Par contre comme il est pas sorti public, faut être logger pour avoir accès au contenu. Je sais pas si c’est assez pour tu vois la console…

Olivier_Lambert · Mars 8, 2018, 6:16

Fais-moi un compte XD