<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<nav>
<div class="toggle">
<i class="fas fa-bars but"></i>
</div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$(".but").click(function () {
$("ul").toggleClass("active");
})
})
</script>
</body>
</html>
body{
margin:0;
padding:0;
font-family:sans-serif
}
nav {
width: 100%;
background: #00316b;
}
ul{
width:80%;
margin:0 auto;
padding:0;
}
ul li{
list-style:none;
display:inline-block;
padding:20px;
}
ul li:hover{
background:#e91e63;
}
ul li a{
color:#fff;
text-decoration:none;
}
.toggle{
width:100%;
padding:10px 20px;
background:#001f44;
text-align:right;
box-sizing:border-box;
color:#fff;
font-size:30px;
display:none;
}
@media(max-width:768px){
.toggle{
display:block;
}
ul {
width: 100%;
display:none;
}
ul li {
display: block;
text-align: center;
}
.active{
display:block;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.