A responsive top navigation menu with CSS and JavaScript
A Pen by blayderunner123 on CodePen.
<nav class="navbar"> | |
<span class="navbar-toggle" id="js-navbar-toggle"> | |
<i class="fa fa-bars"></i> | |
</span> | |
<a href="#" class="logo">logo</a> | |
<ul class="main-nav" id="js-menu"> | |
<li> | |
<a href="#" class="nav-links active">Home</a> | |
</li> | |
<li> | |
<a href="#" class="nav-links">Products</a> | |
</li> | |
<li> | |
<a href="#" class="nav-links">About Us</a> | |
</li> | |
<li> | |
<a href="#" class="nav-links">Contact Us</a> | |
</li> | |
<li> | |
<a href="#" class="nav-links">Blog</a> | |
</li> | |
</ul> | |
</nav> | |
<div class="container"> | |
<table class="table table-bordered table-hover table-striped"> | |
<thead class="thead-light"> | |
<tr> | |
<th>Table Header 1</th> | |
<th>Table Header 2</th> | |
<th>Table Header 3</th> | |
<th>Table Header 4</th> | |
</tr> | |
</thead> | |
<tfoot class="thead-light"> | |
<tr> | |
<th>Table Footer 1</th> | |
<th>Table Footer 2</th> | |
<th>Table Footer 3</th> | |
<th>Table Footer 4</th> | |
</tr> | |
</tfoot> | |
<tbody> | |
<tr> | |
<td>Cell 1.1</td> | |
<td>Cell 2.1</td> | |
<td>Cell 3.1</td> | |
<td>Cell 4.1</td> | |
</tr> | |
<tr> | |
<td>Cell 1.2</td> | |
<td>Cell 2.2</td> | |
<td>Cell 3.2</td> | |
<td>Cell 4.2</td> | |
</tr> | |
<tr> | |
<td>Cell 1.3</td> | |
<td>Cell 2.3</td> | |
<td>Cell 3.3</td> | |
<td>Cell 4.3</td> | |
</tr> | |
<tr> | |
<td>Cell 1.4</td> | |
<td>Cell 2.4</td> | |
<td>Cell 3.4</td> | |
<td>Cell 4.4</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<div class="container"> | |
<table class="table table-bordered table-hover table-striped"> | |
<thead class="thead-light"> | |
<tr> | |
<th>Table Header 1</th> | |
<th>Table Header 2</th> | |
<th>Table Header 3</th> | |
<th>Table Header 4</th> | |
</tr> | |
</thead> | |
<tfoot class="thead-light"> | |
<tr> | |
<th>Table Footer 1</th> | |
<th>Table Footer 2</th> | |
<th>Table Footer 3</th> | |
<th>Table Footer 4</th> | |
</tr> | |
</tfoot> | |
<tbody> | |
<tr> | |
<td>Cell 1.1</td> | |
<td>Cell 2.1</td> | |
<td>Cell 3.1</td> | |
<td>Cell 4.1</td> | |
</tr> | |
<tr> | |
<td>Cell 1.2</td> | |
<td>Cell 2.2</td> | |
<td>Cell 3.2</td> | |
<td>Cell 4.2</td> | |
</tr> | |
<tr> | |
<td>Cell 1.3</td> | |
<td>Cell 2.3</td> | |
<td>Cell 3.3</td> | |
<td>Cell 4.3</td> | |
</tr> | |
<tr> | |
<td>Cell 1.4</td> | |
<td>Cell 2.4</td> | |
<td>Cell 3.4</td> | |
<td>Cell 4.4</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<div class="container"> | |
<table class="table table-bordered table-hover table-striped"> | |
<thead class="thead-light"> | |
<tr> | |
<th>Table Header 1</th> | |
<th>Table Header 2</th> | |
<th>Table Header 3</th> | |
<th>Table Header 4</th> | |
</tr> | |
</thead> | |
<tfoot class="thead-light"> | |
<tr> | |
<th>Table Footer 1</th> | |
<th>Table Footer 2</th> | |
<th>Table Footer 3</th> | |
<th>Table Footer 4</th> | |
</tr> | |
</tfoot> | |
<tbody> | |
<tr> | |
<td>Cell 1.1</td> | |
<td>Cell 2.1</td> | |
<td>Cell 3.1</td> | |
<td>Cell 4.1</td> | |
</tr> | |
<tr> | |
<td>Cell 1.2</td> | |
<td>Cell 2.2</td> | |
<td>Cell 3.2</td> | |
<td>Cell 4.2</td> | |
</tr> | |
<tr> | |
<td>Cell 1.3</td> | |
<td>Cell 2.3</td> | |
<td>Cell 3.3</td> | |
<td>Cell 4.3</td> | |
</tr> | |
<tr> | |
<td>Cell 1.4</td> | |
<td>Cell 2.4</td> | |
<td>Cell 3.4</td> | |
<td>Cell 4.4</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
<div class="container"> | |
<table class="table table-bordered table-hover table-striped"> | |
<thead class="thead-light"> | |
<tr> | |
<th>Table Header 1</th> | |
<th>Table Header 2</th> | |
<th>Table Header 3</th> | |
<th>Table Header 4</th> | |
</tr> | |
</thead> | |
<tfoot class="thead-light"> | |
<tr> | |
<th>Table Footer 1</th> | |
<th>Table Footer 2</th> | |
<th>Table Footer 3</th> | |
<th>Table Footer 4</th> | |
</tr> | |
</tfoot> | |
<tbody> | |
<tr> | |
<td>Cell 1.1</td> | |
<td>Cell 2.1</td> | |
<td>Cell 3.1</td> | |
<td>Cell 4.1</td> | |
</tr> | |
<tr> | |
<td>Cell 1.2</td> | |
<td>Cell 2.2</td> | |
<td>Cell 3.2</td> | |
<td>Cell 4.2</td> | |
</tr> | |
<tr> | |
<td>Cell 1.3</td> | |
<td>Cell 2.3</td> | |
<td>Cell 3.3</td> | |
<td>Cell 4.3</td> | |
</tr> | |
<tr> | |
<td>Cell 1.4</td> | |
<td>Cell 2.4</td> | |
<td>Cell 3.4</td> | |
<td>Cell 4.4</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> |
let mainNav = document.getElementById('js-menu'); | |
let navBarToggle = document.getElementById('js-navbar-toggle'); | |
navBarToggle.addEventListener('click', function () { | |
mainNav.classList.toggle('active'); | |
}); |
/*General CSS*/ | |
:root { | |
--blue: #007bff; | |
--indigo: #6610f2; | |
--purple: #6f42c1; | |
--pink: #e83e8c; | |
--red: #dc3545; | |
--orange: #fd7e14; | |
--yellow: #ffc107; | |
--green: #28a745; | |
--teal: #20c997; | |
--cyan: #17a2b8; | |
--white: #fff; | |
--gray: #6c757d; | |
--gray-dark: #343a40; | |
--primary: #007bff; | |
--secondary: #6c757d; | |
--success: #28a745; | |
--info: #17a2b8; | |
--warning: #ffc107; | |
--danger: #dc3545; | |
--light: #f8f9fa; | |
--dark: #343a40; | |
--breakpoint-xs: 0; | |
--breakpoint-sm: 576px; | |
--breakpoint-md: 768px; | |
--breakpoint-lg: 992px; | |
--breakpoint-xl: 1200px; | |
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", | |
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, | |
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, | |
"Liberation Mono", "Courier New", monospace; | |
} | |
*, | |
*:before, | |
*:after { | |
-webkit-box-sizing: border-box !important; | |
-moz-box-sizing: border-box !important; | |
box-sizing: border-box !important; | |
padding: 0; | |
margin: 0; | |
} | |
body { | |
width: 100%; | |
height: 100%; | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
font-size: 1rem; | |
font-weight: 450; | |
line-height: 1.5; | |
color: #212529; | |
text-align: left; | |
margin: 0px auto; | |
} | |
html { | |
position: relative; | |
min-height: 100%; | |
width: 100%; | |
overflow-x: hidden; | |
} | |
.navbar { | |
font-size: 18px; | |
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%); | |
border: 1px solid rgba(0, 0, 0, 0.2); | |
position: fixed; | |
top:0; | |
left:0; | |
right:0; | |
z-index:1000; | |
margin: 0px auto; | |
} | |
.main-nav { | |
list-style-type: none; | |
display: flex; | |
align-items: center; | |
flex-direction: column; | |
} | |
.main-nav li{ | |
} | |
.nav-links{ | |
padding: 14px 16px; | |
display:block; | |
} | |
.nav-links, | |
.logo { | |
text-decoration: none; | |
color: rgba(255, 255, 255, 0.7); | |
} | |
.nav-links:hover, | |
.nav-links:focus | |
.nav-links .active, | |
.logo:hover, | |
.logo:focus{ | |
background: #c16ecf; | |
} | |
.main-nav li { | |
text-align: left; | |
justify-self:flex-end; | |
align-self: flex-end; | |
} | |
.logo { | |
padding: 15px 16px 14px; | |
} | |
.navbar-toggle { | |
align-self:flex-end !important; | |
cursor: pointer; | |
color: rgba(255, 255, 255, 0.8); | |
font-size: 24px; | |
margin-right: 5%; | |
float: right; | |
padding: 1.5px 16px; | |
} | |
.main-nav { | |
list-style-type: none; | |
display: none; | |
} | |
.active { | |
display: block; | |
} | |
@media screen and (min-width: 768px) { | |
.navbar .main-nav{ | |
display: flex; | |
padding-bottom: 0; | |
flex-direction: row; | |
justify-content: flex-end; | |
} | |
.main-nav li{ | |
justify-self:flex-end; | |
align-self: flex-end; | |
} | |
.nav-links { | |
display: inline-block; | |
} | |
.logo { | |
float: left; | |
padding: 15px 16px; | |
} | |
.navbar-toggle { | |
display: none; | |
} | |
.logo:hover, | |
.nav-links:hover { | |
color: rgba(255, 255, 255, 1); | |
} | |
} | |
.container:nth-of-type(1) { | |
padding-top: 60px !important; | |
} | |
.container { | |
min-width: 100%; | |
display: block; | |
padding: 1%; | |
margin: 0px auto 20px; | |
position: relative; | |
} | |
.table { | |
table-layout: auto; | |
padding: 0.5%; | |
border-collapse: collapse; | |
min-width: 100%; | |
} | |
.table td, | |
.table th { | |
border: solid #ededed; | |
padding: 0.5% 1%; | |
} | |
th { | |
text-align: center; | |
} | |
tbody tr:nth-of-type(2n + 1) { | |
background: #eeeeee; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |