Making Sliding Menu Responsive on Android

HTML & CSS
, ,
1

Hi there. I am developing an application for iOS/Android using phonegap. I have created a sliding menu using HTML/CSS. The menu however is working fine in Chrome browser, but it is lagging on my Nexus 5. And worse, it is lagging heavily on lower end devices. I have found a few tutorials on making sliding menu responsive but did not quite get the result.
Below is my code -

<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Building Basic Side Menu - Swipeable Side Menu</title>

  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <link rel="stylesheet" href="css/style.css">

  <style>
	.scroll 
	{
		overflow: scroll;
		overflow-x: hidden;
	}
  </style>

  <style type="text/css">
    body, html 
	{
        height: 100%;
        margin: 0;
        overflow:hidden;
        font-family: helvetica;
        font-weight: 100;
    }
    .container 
	{
        position: relative;
        height: 100%;
        width: 100%;
        left: 0;
        -webkit-transition:  left 0.4s ease-in-out;
        -moz-transition:  left 0.4s ease-in-out;
        -ms-transition:  left 0.4s ease-in-out;
        -o-transition:  left 0.4s ease-in-out;
        transition:  left 0.4s ease-in-out;
    }
    
    .container.open-sidebar 
	{
        left: 240px;
    }
    
    #sidebar 
	{
        position: absolute;
        left: -240px;
        background: #DF314D;
        width: 240px;
        height: 100%;
        box-sizing: border-box;
    }
    #sidebar ul 
	{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #sidebar ul li 
	{
        margin: 0;
    }
    #sidebar ul li a 
	{
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 100;
        color: white;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #C9223D;
        -webkit-transition:  background 0.3s ease-in-out;
        -moz-transition:  background 0.3s ease-in-out;
        -ms-transition:  background 0.3s ease-in-out;
        -o-transition:  background 0.3s ease-in-out;
        transition:  background 0.3s ease-in-out;
    }
    #sidebar ul li:hover a 
	{
        background: #C9223D;
    }

	#sidebar ul ul li 
	{
		  height: 0;
		  -webkit-transition: height .25s ease;
		  -moz-transition: height .25s ease;
		  transition: height .25s ease;
	}

	#sidebar li:hover > ul > li 
	{
		  height: 35px;
	}
    .main-content 
	{
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: relative;
    }
    .main-content .content
	{
        box-sizing: border-box;
        -moz-box-sizing: border-box;
		padding-left: 60px;
		width: 100%;
    }
    .main-content .content h1
	{
        font-weight: 100;
    }
    .main-content .content p
	{
        width: 100%;
        line-height: 160%;
    }
    .main-content #sidebar-toggle 
	{
        background: #DF314D;
        border-radius: 3px;
        display: block;
        position: relative;
        padding: 10px 7px;
        float: left;
    }
    .main-content #sidebar-toggle .bar
	{
         display: block;
        width: 18px;
        margin-bottom: 3px;
        height: 2px;
        background-color: #fff;
        border-radius: 1px;   
    }
    .main-content #sidebar-toggle .bar:last-child
	{
         margin-bottom: 0;   
    }

  </style>
    
  <script type="text/javascript">//<![CDATA[ 
    $(window).load(function(){
      $("[data-toggle]").click(function() 
	  {
        var toggle_el = $(this).data("toggle");
        $(toggle_el).toggleClass("open-sidebar");
      });
    });//]]>  
    
  </script>

  <script src="js/fastclick.js"></script>

</head>
  <body class="scroll">
    <div class="container">
      <div id="sidebar">
          <ul>
			  <li> <img src="img/ic_profile.png" alt="profile image" width="128px" height="128px" hspace="50" vspace="50"></li>
              <li><a href="Welcome.html">Home</a></li>
              <li><a href="messaging.html">Messages</a></li>
				<ul>
					<li><a href="#">Inbox</a><li>
					<li><a href="#">Sent</a><li>
					<li><a href="#">Drafts</a><li>
				</ul>
              <li><a href="posts.html">Posts</a></li>
              <li><a href="index.html">Sign Out</a></li>
              <li><a href="questionnaire.html">Feedback</a></li>
          </ul>
      </div>
      <div class="main-content" id= "mainTag">
          <a href="#" data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
              <span class="bar"></span>
              <span class="bar"></span>
          </a>
		  <div class="menu-trigger"></div>
		  <br>
		  <br>
		  <br>
			<script src="js/welcomePage_cards.js"></script>
          </div>
    </div>
  </body>
</html>

Any help on how I can remove the lag ?

2

Hi,

Do you mean the animation is slow or that the response on clicking is slow?

For smoother animations don’t use co-ordinates like left,right, top or bottom but use translate instead.

e.g.

.container {
	position: relative;
	height: 100%;
	width: 100%;
	left: 0;
	-webkit-transition:  transform 0.4s ease-in-out;
	-moz-transition:  transform 0.4s ease-in-out;
	-ms-transition:  transform 0.4s ease-in-out;
	-o-transition:  transform 0.4s ease-in-out;
	transition:  transform 0.4s ease-in-out;
}
.container.open-sidebar {
	transform: translateX(240px);
}
#sidebar {
	position: absolute;
	transform:translateX(-240px);
	background: #DF314D;
	width: 240px;
	height: 100%;
	box-sizing: border-box;
}

That should make it a little smoother but I find most animations on mobile pretty choppy at the best of times unless its the latest greatest device.

1 Like
3

Hi PaulOB. Ya I mean the animation is lagging. The response however upon clicking is fine.
Thank you so much for the input. The lag has vanished now.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.