Tablet Navigation - Jobing.com

Developer
Kristen Zirkler
Size
6,043 Kb
Views
18,216
  1. Tablet Navigation - Jobing.com Previews
  2. Tablet Navigation - Jobing.com HTML Codes
  3. Tablet Navigation - Jobing.com CSS Codes
  4. Tablet Navigation - Jobing.com JS Codes

How do I make an tablet navigation - jobing.com?

What is a tablet navigation - jobing.com? How do you make a tablet navigation - jobing.com? This script and codes were developed by Kristen Zirkler on 16 October 2022, Sunday.

Tablet Navigation - Jobing.com Previews
IQ Test

Tablet Navigation - Jobing.com - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tablet Navigation - Jobing.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @font-face { font-family: 'JobingIcons'; src: url("http://imgsg.jobing.com/_dropbox/jobing-concepts/css/fonts/jobingicons.eot?") format("eot"), url("http://imgsg.jobing.com/_dropbox/jobing-concepts/css/fonts/jobingicons.woff") format("woff"), url("http://imgsg.jobing.com/_dropbox/jobing-concepts/css/fonts/jobingicons.ttf") format("truetype"); font-weight: normal; font-style: normal;
}
body { postition: relative; margin: 0; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.side-navigation { background: linear-gradient(to right, #fafafa 0%, #fafafa 80%, #e1e1e1 100%); position: absolute; top: 0; bottom: 0; left: 0; width: 40px;
}
.side-navigation .main-nav { display: none;
}
.side-navigation .top-nav, .side-navigation .job-nav, .side-navigation .main-nav { clear: both;
}
.side-navigation .top-nav a, .side-navigation .job-nav a, .side-navigation .main-nav a { color: #fff; display: block; width: 100%; line-height: 40px; background: #2e9fff; text-decoration: none; text-align: center; border-bottom: 1px solid #0087fa; position: relative;
}
.side-navigation .top-nav em, .side-navigation .job-nav em, .side-navigation .main-nav em { background: #e5331c; border-radius: 20%; color: #fff; font-weight: bold; font-size: .6em; line-height: 2em; padding: 0 .5em; position: absolute; top: 9px; right: -15px; display: block;
}
.side-navigation.open { width: 250px; background: linear-gradient(to right, #fafafa 0%, #fafafa 98%, #ededed 100%);
}
.side-navigation.open .main-nav { display: block;
}
.side-navigation.open .icon-nav { opacity: .3;
}
.side-navigation.open .top-nav a { width: 50%; float: left; background: #2e9fff;
}
.side-navigation.open .job-nav a { width: 33.33%; float: left; background: #2e9fff;
}
.side-navigation.open .job-nav i { opacity: .4;
}
.side-navigation.open .job-nav .active:after { content: ' '; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #2e9fff; position: absolute; bottom: -7px; left: 40%;
}
.side-navigation.open .job-nav .active i { opacity: 1;
}
.side-navigation.open .job-list.active { display: block;
}
.job-list { clear: both; display: none;
}
.job-list h2 { padding: 1em 10px; font-weight: bold;
}
.job-list .keywords { padding: 1em 10px;
}
.job-list ul { border-top: 1px solid #e1e1e1;
}
.job-list ul a { display: block; text-decoration: none; color: #333; padding: 1em .5em; border-bottom: 1px solid #e1e1e1;
}
.job-list ul em { display: block; font-size: .8em; color: #b3b3b3; line-height: 1.4em;
}
.job-list ul i { color: #fff; background: #bdc3c7; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: .6em; float: right;
}
.button-group { margin: 0 10px 1em; overflow: hidden;
}
.button-group a { background: #2e9fff; color: #0079e1; display: block; font-size: .8em; float: left; width: 20%; text-align: center; line-height: 35px; font-size: .5em;
}
.button-group a:nth-child(2) { background: #48abff; width: 60%; font-size: .8em;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'jobingicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.2em;
}
.icon-jobing-logo:before { content: "\27";
}
.icon-jobing-j:before { content: "\3f";
}
.icon-search:before { content: "\4c";
}
.icon-star:before { content: "\47";
}
.icon-clock:before { content: "\40";
}
.icon-nav:before { content: "\55";
}
.icon-caret-right:before { content: "\36";
}
.icon-caret-left:before { content: "\37";
}
.icon-jobs:before { content: "\22";
}
.icon-home:before { content: "\25";
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="side-navigation"> <div class="top-nav"> <a href="#"><i class="icon-jobing-j" aria-hidden="true"></i></a> <a href="#"><i class="icon-nav" aria-hidden="true"></i><em>20</em></a> </div> <!-- Navigation --> <div class="main-nav"> <a href="#">Home</a> <a href="#">Browse Jobs</a> <a href="#">Companies</a> <a href="#">Account</a> </div> <!-- List of jobs --> <div class="job-nav"> <a href="#" data-tab="search" class="active"><i class="icon-search" title="Search" aria-hidden="true"></i></a> <a href="#" data-tab="saved"><i class="icon-star" title="Saved" aria-hidden="true"></i></a> <a href="#" data-tab="recent"><i class="icon-clock" title="Recent" aria-hidden="true"></i></a> </div> <!-- List of jobs --> <div id="search" class="job-list active"> <div class="keywords">sales manager tempe</div> <div class="button-group"><a class=""><i class="icon-caret-left" title="Recent" aria-hidden="true"></i></a><a class="">Back to List</a><a class=""><i class="icon-caret-right" aria-hidden="true"></i></a></div> <ul> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> </ul> </div> <div id="saved" class="job-list"> <h2>Saved Jobs</h2> <ul> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> <li><a href="#">Job Title<em>Company Name</em></a></li> </ul> </div> <div id="recent" class="job-list"> <h2>Recently Viewed</h2> <ul> <li><a href="#"><i class="icon-jobs" aria-hidden="true"></i>General Manager/ Assistant Manager<em>Sonic Drive-In</em></a></li> <li><a href="#"><i class="icon-home" aria-hidden="true"></i>Sonic Drive-In<em>Company Profile</em></a></li> <li><a href="#"><i class="icon-home" aria-hidden="true"></i>CVS Caremark<em>Company Profile</em></a></li> <li><a href="#"><i class="icon-jobs" aria-hidden="true"></i>Project Manager<em>Western Millwork Inc.</em></a></li> <li><a href="#"><i class="icon-jobs" aria-hidden="true"></i>Recruitment Manager<em>The CORE Institute</em></a></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tablet Navigation - Jobing.com - Script Codes CSS Codes

@font-face { font-family: 'JobingIcons'; src: url("http://imgsg.jobing.com/_dropbox/jobing-concepts/css/fonts/jobingicons.eot?") format("eot"), url("http://imgsg.jobing.com/_dropbox/jobing-concepts/css/fonts/jobingicons.woff") format("woff"), url("http://imgsg.jobing.com/_dropbox/jobing-concepts/css/fonts/jobingicons.ttf") format("truetype"); font-weight: normal; font-style: normal;
}
body { postition: relative; margin: 0; font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.side-navigation { background: linear-gradient(to right, #fafafa 0%, #fafafa 80%, #e1e1e1 100%); position: absolute; top: 0; bottom: 0; left: 0; width: 40px;
}
.side-navigation .main-nav { display: none;
}
.side-navigation .top-nav, .side-navigation .job-nav, .side-navigation .main-nav { clear: both;
}
.side-navigation .top-nav a, .side-navigation .job-nav a, .side-navigation .main-nav a { color: #fff; display: block; width: 100%; line-height: 40px; background: #2e9fff; text-decoration: none; text-align: center; border-bottom: 1px solid #0087fa; position: relative;
}
.side-navigation .top-nav em, .side-navigation .job-nav em, .side-navigation .main-nav em { background: #e5331c; border-radius: 20%; color: #fff; font-weight: bold; font-size: .6em; line-height: 2em; padding: 0 .5em; position: absolute; top: 9px; right: -15px; display: block;
}
.side-navigation.open { width: 250px; background: linear-gradient(to right, #fafafa 0%, #fafafa 98%, #ededed 100%);
}
.side-navigation.open .main-nav { display: block;
}
.side-navigation.open .icon-nav { opacity: .3;
}
.side-navigation.open .top-nav a { width: 50%; float: left; background: #2e9fff;
}
.side-navigation.open .job-nav a { width: 33.33%; float: left; background: #2e9fff;
}
.side-navigation.open .job-nav i { opacity: .4;
}
.side-navigation.open .job-nav .active:after { content: ' '; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #2e9fff; position: absolute; bottom: -7px; left: 40%;
}
.side-navigation.open .job-nav .active i { opacity: 1;
}
.side-navigation.open .job-list.active { display: block;
}
.job-list { clear: both; display: none;
}
.job-list h2 { padding: 1em 10px; font-weight: bold;
}
.job-list .keywords { padding: 1em 10px;
}
.job-list ul { border-top: 1px solid #e1e1e1;
}
.job-list ul a { display: block; text-decoration: none; color: #333; padding: 1em .5em; border-bottom: 1px solid #e1e1e1;
}
.job-list ul em { display: block; font-size: .8em; color: #b3b3b3; line-height: 1.4em;
}
.job-list ul i { color: #fff; background: #bdc3c7; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; font-size: .6em; float: right;
}
.button-group { margin: 0 10px 1em; overflow: hidden;
}
.button-group a { background: #2e9fff; color: #0079e1; display: block; font-size: .8em; float: left; width: 20%; text-align: center; line-height: 35px; font-size: .5em;
}
.button-group a:nth-child(2) { background: #48abff; width: 60%; font-size: .8em;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'jobingicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.2em;
}
.icon-jobing-logo:before { content: "\27";
}
.icon-jobing-j:before { content: "\3f";
}
.icon-search:before { content: "\4c";
}
.icon-star:before { content: "\47";
}
.icon-clock:before { content: "\40";
}
.icon-nav:before { content: "\55";
}
.icon-caret-right:before { content: "\36";
}
.icon-caret-left:before { content: "\37";
}
.icon-jobs:before { content: "\22";
}
.icon-home:before { content: "\25";
}

Tablet Navigation - Jobing.com - Script Codes JS Codes

$('.top-nav a').click(function() { $('.side-navigation').toggleClass('open');
});
$('.job-nav a').click(function() { var isOpen = $('.side-navigation').hasClass('open'), thisTab = $(this).data('tab'); if (isOpen) { $('.job-nav a').removeClass('active'); $('.job-list').removeClass('active'); $(this).addClass('active'); $('#'+thisTab).addClass('active'); } else { $('.side-navigation').toggleClass('open'); }
});
Tablet Navigation - Jobing.com - Script Codes
Tablet Navigation - Jobing.com - Script Codes
Home Page Home
Developer Kristen Zirkler
Username kristenzirkler
Uploaded October 16, 2022
Rating 3
Size 6,043 Kb
Views 18,216
Do you need developer help for Tablet Navigation - Jobing.com?

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!

Kristen Zirkler (kristenzirkler) Script Codes
Name
Email Marketing Mock
Sketch Photo
Simple - Blurred BG
KZ Line Draw - SVG animation
Company Profile - Jobing.com Mock
Product - Flipping Cards
Animated Photo
Company Details
Sortable List with MixItUp
Transparent CSS Device Windows - Browser, Tablet, Mobile
Create amazing marketing copy 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!