Демо демонстрация меню aTmplMenuCss

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Демо проверка меню aTmplMenuCss</title>
<meta name="author" content="Я" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/bootstrap.css" rel="stylesheet" />
<script src="/assets/js/jquery-2.1.1.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<style>.container{margin-top:100px;}</style>

#aTmplMenuCss #aTmplMenuCssBlock {
position:fixed;
top:0;
right:0;	
left:0;	
padding:0;
margin:0;
border:0;
width:100%;
min-width:100%;
height:100%;
min-height:100%;
z-index:-1;
opacity:0;
overflow-y:auto;
background:rgba(0,0,0,0.8);
-webkit-transition:all 0.3s ease-in-out; 
-moz-transition:all 0.3s ease-in-out; 
-o-transition:all 0.3s ease-in-out; 
transition:all 0.3s ease-in-out;
}

#aTmplMenuCss ul {
position:relative;
top:15%;
padding:0;
margin:0;
border:0;
text-align:center;
-webkit-transform:scale(2);
-moz-transform:scale(2);
-ms-transform:scale(2);
transform:scale(2);
-webkit-transition:all 0.3s ease-in-out; 
-moz-transition:all 0.3s ease-in-out; 
-o-transition:all 0.3s ease-in-out; 
transition:all 0.3s ease-in-out;
}

#aTmplMenuCss li { 
display:inline-block; 
margin:10px;
text-align:center;
}

#aTmplMenuCss li a {
border-radius: 5px;
padding: 10px;
text-decoration:none;
font-size: 18px;
color:#fff;
border:1px solid transparent;
-webkit-transition:all 0.3s ease-in-out; 
-moz-transition:all 0.3s ease-in-out; 
-o-transition:all 0.3s ease-in-out; 
transition:all 0.3s ease-in-out;
}

#aTmplMenuCss li a:hover {border-color: #fff;}

#aTmplMenuCssControl {
margin:20px auto; 
background:transparent;
display:block;
cursor:pointer;
z-index:999;
position:relative;
text-align:center;
width:26px;
height:16px;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

#aTmplMenuCssUp{display: none;}

#aTmplMenuCssUp:checked ~ #aTmplMenuCssBlock {
opacity:1;
z-index:777;
}

#aTmplMenuCssUp:checked ~ #aTmplMenuCssBlock ul {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

label.aTmplMenuCssLink {
display:block; 
width:26px; 
height:7px; 
border-top:5px solid #000; 
border-bottom:5px solid #000; 
position:absolute; 
cursor:pointer;
}

label.aTmplMenuCssLink:after {
display:block; 
content:""; 
width:26px; 
height:5px; 
position:absolute; 
left:0; 
top:5px; 
background:#000;
}

#aTmplMenuCssUp:checked ~ label.aTmplMenuCssLink {
border-top:5px solid #fff; 
border-bottom:5px solid #fff; 
}

#aTmplMenuCssUp:checked ~ label.aTmplMenuCssLink:after {
display:block; 
content:""; 
width:26px; 
height:5px; 
position:absolute; 
left:0; 
top:5px; 
background:#fff;
}
</style>

</head>
<body>
<header>

<nav id="aTmplMenuCss" role="navigation">
<input type="checkbox" id="aTmplMenuCssUp" />
<label id="aTmplMenuCssControl" class="aTmplMenuCssLink" for="aTmplMenuCssUp"></label>
<div id="aTmplMenuCssBlock">
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
<li><a href="#">Пункт 6</a></li>
</ul>
</div>
</nav>

</header>
<section class="container">
<div class="row"> 
<div class="col-md-12 text-center">
<h1 class="text-center">Демо проверка меню aTmplMenuCss</h1>
<p>Вносите свои изменения код меню, это позволит лучше понять как оно работает</p>
<img src="/design/adaptive-menu/2014/aTmplMenuCss/test-aTmplMenuCss.png" class="img-responsive img-thumbnail" alt="Проверка на адаптивность меню aTmplMenuCss" />
</div>
</div>
</section>
</body>
</html>