4.4K
Responsive Navigation Menus with Social Media
Welcome to you in techmidpoint. In this tutorial, I am going to create responsive navigation menus with a social media button. When we start web design, the first thing that comes to our mind is responsive web design. The CSS media query helps you make responsive menus and jQuery shows the behavior of the responsive design.
For the social media button, you can add easily bootstrap CDN and use jQuery CDN for toggle navigation menus.
I have mentioned HTML, CSS, and jQuery code below. Just copy the given source code and paste it into your favorite text editor then try to run it. Let’s try to make Responsive Menus with Social Media
HTML and jQuery
<!DOCTYPE html>
<html>
<head>
<title> Responsive Navigation Menus with Social Media</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
$(".toggle-nav").click(function(){
$(".menu ul li").slideToggle("slow");
});
});
</script>
</head>
<body>
<nav class="menu">
<a class="toggle-nav" href="#">☰</a>
<ul>
<li><a class ="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</nav>
</body>
</html>
CSS
body{
margin:0;
padding:0;
font-family: arial;
}
.menu{
width:100%;
background:#333;
overflow:auto;
}
.menu ul{
margin:0;
padding:0;
list-style:none;
line-height: 70px;
}
.menu ul li{
float:left;
}
.menu ul li a{
text-decoration:none;
width:100px;
display: block;
text-align:center;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
color:#fff;
}
.menu ul li a:hover{
background:#6666ff;
}
.menu ul li a.active{
background:orange;
}
.toggle-nav{
color:#fff;
text-decoration:none;
display: none;
}
.social{
float: right;
margin-right: 100px;
line-height: 70px;
}
.social a{
max-width: 50px;
text-align:center;
}
.social a i{
font-size: 20px;
background:#fff;
width:40px;
height: 40px;
line-height: 40px;
color:#000;
border-radius: 50%;
margin:5px;
}
.social a i:hover{
background:#6666ff;
color:#fff;
}
@media(max-width:800px){
.toggle-nav{
font-size:40px;
text-align:center;
font-weight: bold;
padding:10px 0px 10px 0px;
background:#6666ff;
width:100%;
display: block;
}
.menu ul li a{
width:100%;
}
.menu ul li{
float:none;
width:100%;
display: none;;
}
.social{
width:100%;
text-align:center;
border-top:1px solid #fff;
float:none;
}
}
@media(min-width:850px){
.menu ul li{
display: block !important;
}
}
For More Tutorials Please Click Here
