<html>
<style>
body {padding-top: 70px; font: 14px/24px Arial, Tahoma, sans-serif;background: #C0C0C0;}
ol, ul {list-style: none;}
* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
header {position: fixed;top: 0;left: 0;right: 0;padding: 10px;background: #ff0000;height: 60px;box-shadow: 0px 0px 13px 5px #000000;}
.nav {float: right;}
.nav li {float: left;}
.nav li a, #touch-menu {display: block;padding: 12px 15px;font-weight: bold;font-size: 16px;color: #fff;}
.nav li a:hover {background: #515572;}
#touch-menu {display: none;}
@media (max-width: 800px) {
body {padding-top: 60px}
header {position: fixed;top: 0;left: 0;right: 0;height: 50px;}
.nav {position: absolute;top: 100%;left: 0;right: 0;display: none;}
.nav li {float: none; opacity: 0.9;}
.nav li a {color: #333;border-top: 1px solid #eee;border-left: 3px solid transparent;background: #fff;}
.nav li:first-child a {border-top: none;}
.nav li a:hover {color: #fff;border-left: 3px solid #515572;}
#touch-menu {display: block;float: right;height: 50px; margin: -16px 0;}
}
.bar1, .bar2, .bar3 {width: 40px;height: 5px;background-color:#fff;margin: 6px 0;transition: 0.4s;}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px);transform: rotate(-45deg) translate(-9px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px);transform: rotate(45deg) translate(-8px, -8px);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script>
$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.nav');
$(touch).on('click', function(e) {e.preventDefault();menu.slideToggle();});
$(window).resize(function(){
var wid = $(window).width();
if(wid > 1000 && menu.is(':hidden')) {menu.removeAttr('style');}
});
});
function myFunction(x) {
x.classList.toggle("change");
}
</script>
<header class="container clearfix">
<div id="touch-menu" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<nav>
<ul class="nav clearfix">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>
</header>
</html>
