Hostwise Nav Bar

Developer
Kevin Haag
Size
3,207 Kb
Views
10,120
  1. Hostwise Nav Bar Previews
  2. Hostwise Nav Bar HTML Codes
  3. Hostwise Nav Bar CSS Codes
  4. Hostwise Nav Bar JS Codes

How do I make an hostwise nav bar?

What is a hostwise nav bar? How do you make a hostwise nav bar? This script and codes were developed by Kevin Haag on 28 November 2022, Monday.

Hostwise Nav Bar Previews
IQ Test

Hostwise Nav Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hostwise Nav Bar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<header> <div id="logo-container"> <a id="logo" href="#"><img src="https://s3.amazonaws.com/useporter.com/assets/testing/pfh_logo.svg" alt="Porter for Hosts"/></a> <div class="l-type"><span>Host<strong>Wise</strong></span></div> </div> <a class="hamburger" href="javascript:;"> <div class="menu-triangle"></div> <span class="line line-1"></span> <span class="line line-2"></span> <span class="line line-3"></span> </a> <nav> <a class="btn" href="#"><span><i class="fa fa-fw fa-calendar"></i></span>Book Service</a> <a id="account" href="#">Hi, <strong>Dwayne</strong> <i class="fa fa-caret-down"></i></a> </nav>
</header>
<aside class="sidebar"> <ul> <li><a href="#"><span class="icon"><i class="fa fa-home fa-fw"></i></span><span class="nav-item">Properties</span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-plus-circle fa-fw"></i></span><span class="nav-item">Add Property</span></a></li> <li> <a href="#"><span class="icon"><i class="fa fa-cog fa-fw"></i></span><span class="nav-item">Account Settings></span></a> <ul> <li><a href="#"><i class="fa fa-user fa-fw"></i>My Profile</a></li> <li><a href="#"><i class="fa fa-credit-card fa-fw"></i>Payment Methods</a></li> <li><a href="#"><i class="fa fa-file-text fa-fw"></i>Transactions</a></li> <li><a href="#"><i class="fa fa-mobile fa-fw"></i>Notifications</a></li> <li><a href="#"><i class="fa fa-heart fa-fw"></i>Refer Friends</a></li> </ul> </li> <li><a href="#"><span class="icon"><i class="fa fa-tag fa-fw"></i></span><span class="nav-item">Pricing</span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-question-circle fa-fw"></i></span><span class="nav-item">FAQ</span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-comment fa-fw"></i></span><span class="nav-item">Contact</span></a></li> </ul>
</aside> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hostwise Nav Bar - Script Codes CSS Codes

html,body{ height:100%; margin:0; font-family:'Lato', sans-serif; background:#E5E6EA;
}
header{ width:100%; height:60px; overflow:hidden; background:#fff;
}
#logo-container{ width:60px; overflow:hidden; display:table; float:left; background:#272e35; -moz-transition: all 0.25s ease-in-out;	-webkit-transition: all 0.25s ease-in-out;	transition: all 0.25s ease-in-out;
}
#logo-container.active{ width:240px; table-layout:auto;
}
#logo{ padding:13px; display:table-cell; background:#2A313A;
}
#logo img{ width:34px; height:34px;
}
#logo-container .l-type{ width:0; height:100%; display:table-cell; vertical-align:middle; font-size:20px; text-transform:uppercase; text-align:center; color:#fff;
}
#logo-container .l-type span{ display:block; width:0; overflow:hidden; -moz-transition: all 0.25s ease-in-out;	-webkit-transition: all 0.25s ease-in-out;	transition: all 0.25s ease-in-out;
}
#logo-container.active .l-type span{ width:180px; overflow:hidden;
}
#logo-container.active .l-type{ width:180px;
}
/*TRIANGLE*/
.menu-triangle{ width: 0;	height: 0;	border-top: 5px solid transparent;	border-bottom: 5px solid transparent;	border-right:5px solid #fff; position:absolute; top:7px; left:-25px;
}
/*HAMBURGER*/
a.hamburger{ width:24px; height:20px; margin:20px 0 20px 20px; display:block; float:left; position:relative;
}
.line{ width:24px; height:4px; display:block; position:absolute; background:#353C44; -moz-transition: all 0.25s ease-in-out;	-webkit-transition: all 0.25s ease-in-out;	transition: all 0.25s ease-in-out;
}
.line-1{top:0;}
.line-2{margin-top:-2px; top:50%;}
.line-3{bottom:0;}
a.active .line-1{ top:50%; margin-top:-2px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg);
}
a.active .line-2{opacity:0;}
a.active .line-3{ bottom:50%; margin-bottom:-2px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); -o-transform: rotate(-315deg); transform: rotate(-315deg);
}
/*NAV*/
nav{ width:60%; float:right;
}
a#account { margin:20px 0 0 0; font-size:18px; text-decoration:none; float:right; color:#353C44;
}
a.btn{ margin:9px 20px 0 40px; padding:12px 12px 12px 0; display:block; overflow:hidden; float:right; color:#fff; text-decoration:none; border-radius:3px; background:#2BAAB1;
}
a.btn span{ margin:0 12px 0 0; padding:12px; background:#40bcbc;
}
/*SIDEBAR*/
aside{ width:0px; height:100%; overflow:hidden; margin:0; background:#353C44; -moz-transition: all 0.25s ease-in-out;	-webkit-transition: all 0.25s ease-in-out;	transition: all 0.25s ease-in-out;
}
aside.active{ width:240px; height:100%; margin:0; background:#353C44;
}
aside ul{ margin:0; padding:0; list-style:none; font-size:14px;
}
aside ul li a{ width:210px; padding:15px; display:block; color:#fff; text-decoration:none;
}
aside ul li a span.nav-item{ opacity:0; -moz-transition: all 0.25s ease-in-out;	-webkit-transition: all 0.25s ease-in-out;	transition: all 0.25s ease-in-out;
}
aside.active ul li a span.nav-item{ opacity:1;
}
aside ul li a.active, aside ul li a:hover{ -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.05), inset 0 -1px 0 0 rgba(255,255,255,0.05); box-shadow: 0 0 15px 0 rgba(0,0,0,0.25), inset 0 1px 0 0 rgba(255,255,255,0.05), inset 0 -1px 0 0 rgba(255,255,255,0.05); background:#3F454C;
}
aside ul li a span.icon{ width:30px; height:30px; margin:0 15px 0 0; display:inline-block; text-align:center; font-size:24px;
}
aside ul li ul{ height:0; overflow:hidden; background:#2A313A;
}
aside ul li ul li a{ padding-left:30px;
}
aside ul li ul li i{ margin:0 10px 0 0;
}

Hostwise Nav Bar - Script Codes JS Codes

$( document ).ready(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); $('#logo-container').toggleClass('active'); $('.sidebar').toggleClass('active'); return false; });
});
Hostwise Nav Bar - Script Codes
Hostwise Nav Bar - Script Codes
Home Page Home
Developer Kevin Haag
Username khaag
Uploaded November 28, 2022
Rating 3
Size 3,207 Kb
Views 10,120
Do you need developer help for Hostwise Nav Bar?

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!

Kevin Haag (khaag) Script Codes
Name
Hamburger Icon Toggle
Scroll Icon
Vertical Centering
Animated Search Icon
SVG Fuel Gauge
A Pen by Kevin Haag
Modal Popup Window
Youtube Layout
Create amazing blog posts 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!