YouTube Video Link: Responsive Navigation Menu bar buttons using HTML CSS purely
Html CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Sintony:400,700&subset=latin-ext' rel='stylesheet'
type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<title>Document</title>
<style>
body {
font-family: 'Sintony', sans-serif;
color: #e5e5e5;
font-size: 12px;
background: #292828;
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header h2 {
margin: 25px 10px;
font-size: 28px;
text-align: center;
color: rgb(7, 7, 7);
}
.container {
margin: 10px auto;
display: table;
max-width: 1140px;
width: 100%;
}
.container:after,
.container:before {
content: "" clear both;
}
nav.menu {
background: coral;
position: relative;
min-height: 45px;
height: 100%;
}
.menu>ul>li {
list-style: none;
display: inline-block;
color: #fff;
line-height: 45px;
}
.menu>ul li a,
.xs-menu li a {
text-decoration: none;
color: #fff;
display: block;
padding: 0px 24px;
}
.menu>ul li a:hover {
background: #444;
color: #fff;
transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
}
.active {
background: #444 !important;
}
.displaynone {
display: none;
}
.xs-menu-cont {
display: none;
}
.xs-menu-cont>a {
background: none repeat scroll 0 0 #ff7f50;
border-radius: 3px;
padding: 3px 6px;
display: block;
border-bottom: 1px solid #E67248;
box-shadow: 0 1px 2px #e67248;
-webkit-box-shadow: 0 1px 2px #e67248;
-moz-box-shadow: 0 1px 2px #e67248;
}
.xs-menu-cont>a:hover {
cursor: pointer;
}
.xs-menu li {
color: #fff;
padding: 14px 30px;
border-bottom: 1px solid #ccc;
background: #FF7F50;
}
.xs-menu a {
text-decoration: none;
}
/*MediaQuerys*/
@media (max-width: 600px) {
.menu {
display: none;
}
.xs-menu li a {
padding: 0px;
}
.xs-menu-cont {
display: block;
}
}
/*Animation--*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
</style>
</head>
<body>
<!--Google -Fonts-->
<div class="container">
<div class="xs-menu-cont">
<a id="menutoggle"><i class="fa fa-align-justify"></i> </a>
<nav class="xs-menu displaynone">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<nav class="menu">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a target="_blank" href="https://os-links-x.blogspot.com/">Contact</a>
</li>
<li style="float:right;">
<a href="https://os-links-x.blogspot.com/">Go my Blog</a>
</li>
</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
Thanks for Visiting Blinks Coders!
Tags:
create responsive navigation bar using bootstrap, responsive, responsive menu using css, how to create responsive navigation bar using bootstrap 5, responsive web design, responsive navbar using bootstrap, responsive nav bar tutorial, responsive css3 button, responsive navigation bar tutorial, using icons in button, responsive navbar, how to create a responsive menu bar in html and css, responsive search box using html and css, website design using html css
Post a Comment