Je dois faire glisser le menu du côté droit après avoir cliqué sur l'icône de la barre de menu. Je dois également faire glisser l'icône de la barre de menu. Le code ci-dessous est affiché dans le menu directement après avoir cliqué sur la barre de menu. Je dois afficher en douceur après avoir cliqué sur Menu. J'ai besoin de l'utiliser sur un appareil mobile. Voulez-vous m'aider dans ce domaine?

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
    if (menuVisible) {
      $('#myMenu').css({
        'display': 'none'
      });
      menuVisible = false;
      return;
    }
    $('#myMenu').css({
      'display': 'block'
    });
    menuVisible = true;
  });
  $('#myMenu').click(function() {
    $(this).css({
      'display': 'none'
    });
    menuVisible = false;
  });
});
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.menu ul {
  list-style: none;
  float: right;
}
.menu li {
  float: left;
  margin: 10px;
}
.menu li a {
  text-decoration: none;
  color: #333;
  text-transform: uppercase;
}
.menu-bar {
  display: none;
}
@media only screen and (max-width: 768px) {
  .menu-bar {
    display: block;
    float: right;
    cursor: pointer;
    margin: 10px;
  }
  #myMenu {
    display: none;
    z-index: 999;
  }
  .menu ul {
    background-color: red;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0px;
    -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
  }
  .menu ul li {
    float: none;
    border-bottom: 1px solid #fff;
    width: 100%;
    margin: 20px;
    text-align: left;
  }
  .menu li a {
    padding: 20px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="menu-bar">
    <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span>
  </div>
  <ul id="myMenu">
    <li><a href="">home</a>
    </li>
    <li><a href="">about</a>
    </li>
    <li><a href="">service</a>
    </li>
    <li><a href="">contact</a>
    </li>
  </ul>
</div>
<div style="position: relative;top: 50px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend
    dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam
    mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus. Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque
    tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in
    dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit
    scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus. Donec l</p>
</div>
1
user6930268 16 janv. 2017 à 09:03

2 réponses

Meilleure réponse

Jetez un oeil à ceci, fait avec jQuery simple

$(function(){
	$('#menuBtn').on('click', function(){
		if( $(this).hasClass('right_margin') ){
			$(this).removeClass('right_margin');
			$('#myMenu').removeClass('active');
		}else {
			$(this).addClass('right_margin');
			$('#myMenu').addClass('active');
		}
		
		
	});
  
});
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
.menu ul {
	list-style: none;
	float: right;
}
.menu li {
	float: left;
	margin: 10px;
}
.menu li a {
	text-decoration: none;
	color: #333;
	text-transform: uppercase;
}
.menu-bar {
	display: none;
}
 @media only screen and (max-width: 768px) {
.menu-bar {
	display: block;
	float: right;
	cursor: pointer;
	margin: 10px;
	
}
#menuBtn {
	transition-duration:1s;
	-webkit-transition-duration:1s;
	-ms-transition-duration:1s;
	-moz-transition-duration:1s;
}
#myMenu {
	z-index: 999;
	transition-duration:1s;
	-webkit-transition-duration:1s;
	-ms-transition-duration:1s;
	-moz-transition-duration:1s;
}
.menu ul {
	background-color: red;
	height: 100%;
	position: fixed;
	top: 0;
	right: -300px;
	bottom: 0;
	padding: 0px;
	-webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
	box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
}
.menu ul li {
	float: none;
	border-bottom: 1px solid #fff;
	width: 100%;
	margin: 20px;
	text-align: left;
}
.menu li a {
	padding: 20px;
}
.menu .active {
	right:0;
	transition-duration:1s;
	-webkit-transition-duration:1s;
	-ms-transition-duration:1s;
	-moz-transition-duration:1s;
}
.right_margin {
	margin-right:150px;
	transition-duration:1s;
	-webkit-transition-duration:1s;
	-ms-transition-duration:1s;
	-moz-transition-duration:1s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="menu">
  <div class="menu-bar"> <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span> </div>
  <ul id="myMenu">
    <li><a href="">home</a> </li>
    <li><a href="">about</a> </li>
    <li><a href="">service</a> </li>
    <li><a href="">contact</a> </li>
  </ul>
</div>
<div style="width:100%; float:left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend
    dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam
    mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus. Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque
    tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in
    dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit
    scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus. Donec l</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
0
Jishnu V S 16 janv. 2017 à 07:29

Vous pouvez utiliser l 'effet de diapositive jQueryUI. Voir l'exemple de travail ci-dessous:

    $(function() {
        var menuBtn = $('#menuBtn'), myMenu = $("#myMenu");
        menuBtn.click(function() {
            if ( $("#myMenu").is(":visible") ) {
                menuBtn.removeClass("right_margin");
                myMenu.toggle("slide", {direction: "right"}, 400);
                
                return;
            }
            menuBtn.addClass("right_margin");
            myMenu.toggle("slide", {direction: "right" }, 500);
        });
        
        myMenu.click(function (){
           menuBtn.trigger("click");
        });
    });
    body{
        margin: 0;
        padding: 0;
        height: 100%;
    }
    .menu ul
    {
    	list-style: none;
    	float: right;
    }
    .menu li{
    	float: left;
    	margin: 10px;
    }
    .menu li a{
    	text-decoration: none;
    	color: #333;
    	text-transform: uppercase;
    }

    .menu-bar
    {
    	display: none;
    }

    .right_margin{
      margin-right: 150px; 
      transition-duration:.5s;
      -webkit-transition-duration:.5s;
      -ms-transition-duration:.5s;
      -moz-transition-duration:.5s;
    }

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

    	.menu-bar
    	{
    		display: block;
    		float: right;
    		cursor: pointer;
    		margin: 10px;
    	}
    	#myMenu
    	{
    		display: none;
    		    z-index: 999;
    	}
    	.menu ul	{
    		background-color: red;
    		height: 100%;
    		position: fixed; 
        	top: 0;
        	right: 0;
        	bottom: 0;
        	padding: 0px;
        	 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);
    	}

    	.menu ul li
    	{
    		float: none;
    		border-bottom:1px solid #fff;
    		width: 100%; 
    		margin: 20px;
    		text-align: left;
    	}
    	.menu li a{
    		padding: 20px;
    	}


    }

   
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="menu">
    <div class="menu-bar">
        <span id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></span>
    </div>
    <ul id="myMenu">
        <li><a href="">home</a></li>
        <li><a href="">about</a></li>
        <li><a href="">service</a></li>
        <li><a href="">contact</a></li>
    </ul>
</div>
<div style="position: relative;top: 50px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut neque dignissim, lobortis nulla sed, tristique urna. Pellentesque placerat, nunc eu feugiat tincidunt, lacus turpis dictum elit, non viverra elit metus at purus. Morbi eleifend dui velit, sit amet pretium odio lacinia eget. Nullam mattis massa in nibh laoreet euismod. Phasellus ullamcorper elit quis neque fermentum, at vehicula dolor posuere. Quisque gravida arcu a metus dignissim, vitae convallis ipsum vestibulum. Aliquam mollis magna non velit convallis, ut eleifend mauris pharetra. Phasellus ac ipsum pulvinar, dignissim lacus ut, dapibus purus.

    Integer volutpat ullamcorper magna quis vehicula. Maecenas rhoncus, turpis ac aliquam hendrerit, purus velit pellentesque tellus, vitae scelerisque metus leo vestibulum leo. Duis ac vulputate tortor. Aliquam at diam ullamcorper, finibus purus ac, dictum sem. Nulla quis dignissim orci. Donec vel purus eget elit feugiat auctor eget eget odio. Praesent volutpat purus in dui aliquam dignissim. Curabitur bibendum lorem id rutrum congue. Nulla urna diam, malesuada ac nibh consequat, auctor egestas ipsum. In non ipsum augue. Maecenas at velit tempus, pellentesque dui non, volutpat tellus. Duis ullamcorper lorem vel blandit scelerisque. Etiam venenatis est non urna volutpat, nec commodo neque condimentum. Maecenas sed tortor lacinia, viverra ligula vel, maximus ex. Aenean ut vestibulum lectus.

    Donec l</p>
</div>
0
Dexter Bengil 16 janv. 2017 à 07:18