Structure layout

HTML

<nav>
  <ul class="android-tab">
    <li>Tab 1</li>
    <li>Tab 2</li>
  </ul>
</nav>

<content>content 1</content>

<content>
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2<br />
  content 2
  \  content 2<br />
  content 2
   content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2  content 2<br />
  content 2 ...

CSS

ul.android-tab {
  position: relative;
  margin: 0;
  height: 100%;
  padding: 0 0 2px 0;
  background-color: #006bff;
  color: #fff;
  -webkit-box-shadow: 0 1px 4px #000;
  box-shadow: 0 1px 4px #000;
}

ul.android-tab li {
  display: inline-block;
	font-weight: bold;
  line-height: 50px;
	text-align: center;
	cursor: pointer;
  list-style-type: none;
  float: left;
}
    ul.android-tab:before {
        display: inline-block;
        content: '';
        position: absolute;
	      background-color: #e5e824;
        bottom: 0; left: 0;
        height: 2px;
        z-index: 1;
    }

html,
body {
	margin:0;
	padding:0;
}

body {
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  min-height: 100vh;
  background: lightblue;
}

nav { height: 50px; }

content {
  display: none;
  box-sizing: border-box;
  flex-grow: 85;
  width: 0;
  padding: 28px 0 0 56px;
  white-space: nowrap;
  overflow-x: hidden;
  -webkit-transition: .3s, width 2s;
  transition: .3s, width 2s;
}
content.active { display: block; }
content.active.slideIn { width: 100%; }

footer {
	height: 50px;
	background: #6cf;
  padding: 28px 0 0 56px;
}

JavaScript

$.fn.RegisterAndroidTabBar = function (TabID) {
    var $ele = $(this),
    	TabName = $ele.prop("tagName");
    if (!TabID || TabID != undefined) {
        $ele.attr("data-style-id", TabID);
        var $style = $("style#" + TabID).empty();
        if ($style.length <= 0)
        	$style = $("<style type='text/css'></style>").attr("id", TabID).appendTo($("body"));
        $ele.find(">*").off("click").on("click", function () {
            var $child = $(this),
                CurrentIndex = $ele.find(".active").removeClass("active").index(),
                ClickedIndex = $child.addClass("active").index();

            function SetStyle($ele, $child, IsToLeft) {
                var ID = $ele.attr("data-style-id");
                if (!ID || ID == undefined) return;
                if ($ele.width() <= 0) {
                    setTimeout(function () { SetStyle($ele, $child, IsToLeft); }, 100);
                    return;
                }

                $style.text(
                    TabName + "[data-style-id='" + ID + "']:before { " +
                        "left: " + $child.position().left + "px; " +
                        "right: " + ($ele.width() - $child.position().left - $child.outerWidth()) + "px; " +
                        "-webkit-transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                        "transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                    "} "
                );
            }
            SetStyle($ele, $child, ClickedIndex < CurrentIndex);
        });
    }
    return $ele;
};

$(".android-tab").each(function () {
	var $children = $(this).children();
  $children.css("width", (100 / $children.length).toString() + '%');
});

$("ul.android-tab").RegisterAndroidTabBar("slider1").find(">*").on("click", function() {
	var $content = $("content").removeClass("active slideIn").eq($(this).index()).addClass("active");
 ...