Nav-Bar and Tab-Bar Layout

Developer
Aaron Levine
Size
3,936 Kb
Views
4,048
  1. Nav-Bar and Tab-Bar Layout Previews
  2. Nav-Bar and Tab-Bar Layout HTML Codes
  3. Nav-Bar and Tab-Bar Layout CSS Codes

How do I make an nav-bar and tab-bar layout?

What is a nav-bar and tab-bar layout? How do you make a nav-bar and tab-bar layout? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

Nav-Bar and Tab-Bar Layout Previews
IQ Test

Nav-Bar and Tab-Bar Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav-Bar and Tab-Bar Layout</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta content='width=device-width, height=device-height, minimum-scale=1, maximum-scale=1, minimal-ui' name='viewport'>
<!-- * Content */ -->
<div class='content-wrap fixed'> <div class='content fixed'> <div class='content scroll'> <h4 class='absolute top'> <span class='fa fa-arrow-up'></span> <span>This is a Nav-Bar</span> <span class='fa fa-arrow-up'></span> </h4> <h4 class='absolute bottom'> <span class='fa fa-arrow-down'></span> <span>This is a Tab-Bar</span> <span class='fa fa-arrow-down'></span> </h4> </div> </div>
</div>
<!-- * Nav-Bar */ -->
<div class='bar fixed top'> <ul> <li class='left'> <a class='button end'> <span class='fa fa-bars'></span> </a> </li> <li class='left'> <span class='button'> <span class='fa fa-refresh'></span> </span> </li> <li class='left'> <span class='button'> <span class='fa fa-share'></span> </span> </li> <li> <span>Title</span> </li> <li class='right'> <a class='button end'> <span class='fa fa-cog'></span> </a> </li> <li class='right'> <a class='button'> <span class='fa fa-users'></span> </a> </li> <li class='right'> <a class='button'> <span class='fa fa-heart'></span> </a> </li> </ul>
</div>
<!-- * Tab-Bar */ -->
<div class='bar fixed bottom'> <ul class='tabs-4'> <li> <a class='button'> <span class='fa fa-home'></span> </a> </li> <li> <a class='button'> <span class='fa fa-user'></span> </a> </li> <li> <a class='button'> <span class='fa fa-users'></span> </a> </li> <li> <a class='button'> <span class='fa fa-heart'></span> </a> </li> </ul>
</div>
</body>
</html>

Nav-Bar and Tab-Bar Layout - Script Codes CSS Codes

.bar { overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; display: inline-block; width: 100%; height: 2.8125rem; color: #9999A0; font-size: 1.125rem; background-color: #333337; box-shadow: 0 1px 0 0 black, inset 0 1px 0 0 #445, 0 -1px 0 0.5px black;
}
.bar, .bar * { box-sizing: border-box;
}
.bar ul { list-style-type: none; display: inline-block; width: 100%; height: 100%; text-align: center; margin: 0; padding: 0;
}
.bar ul li { position: relative; display: inline-block;
}
.bar ul li.left { float: left;
}
.bar ul li.right { float: right;
}
.bar ul li.left > .button.end, .bar ul li.right > .button.end { box-shadow: 1px 0 0 0 black, 2px 0 0 0 #445, -1px 0 0 0 #445, -2px 0 0 0 black;
}
.bar ul li > * { display: inline-block; min-width: 2.8125rem; line-height: 1.8125rem; height: 2.8125rem; padding: 0.5rem;
}
.bar ul li .button { cursor: pointer;
}
.bar ul li .button * { display: inline-block; width: 100%; height: 1.8125rem;
}
.bar ul li .button:hover { color: #ceced1;
}
.bar ul li .button:not(.end):active { color: #7f7f87;
}
.bar ul li .button.end:active { background: #27272a; font-size: 1.09125rem;
}
.bar ul.tabs-1 li { width: 50%;
}
.bar ul.tabs-2 li { width: 33.33333%;
}
.bar ul.tabs-3 li { width: 25%;
}
.bar ul.tabs-4 li { width: 20%;
}
.bar ul.tabs-5 li { width: 16.66667%;
}
.bar ul.tabs-6 li { width: 14.28571%;
}
.content-wrap { box-sizing: border-box; display: inline-block; width: 100%; height: 100%; margin: 0; padding: 0; padding-top: 2.8125rem; padding-bottom: 2.8125rem;
}
.content-wrap .content { position: relative; box-sizing: border-box; display: inline-block; width: 100%; height: 100%; margin: 0; padding: 0; /*& h4 { display: inline-block; width: 100%; margin: 0.25rem 0 0.25rem 0; text-align: center; }*/
}
.content-wrap .content.scroll { overflow-x: hidden; overflow-y: auto;
}
.absolute { position: absolute;
}
.fixed { position: fixed;
}
.top { top: 0; left: 0;
}
.bottom { bottom: 0; left: 0;
}
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
Nav-Bar and Tab-Bar Layout - Script Codes
Nav-Bar and Tab-Bar Layout - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 3,936 Kb
Views 4,048
Do you need developer help for Nav-Bar and Tab-Bar Layout?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron Levine (Aldlevine) Script Codes
Name
Sliding Single Select
A Pen by Aaron Levine
Canvas Falloff Test
Custom Scroll with Momentum and Parallax
Progress
CRT TV Page Load Animation
Flashy Rating Page
JQuery.momentus
Colorful Slider Graph
Random Gradients - JS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!