Top Bar

Developer
Kelly Kalouta
Size
4,489 Kb
Views
12,144
  1. Top Bar Previews
  2. Top Bar HTML Codes
  3. Top Bar CSS Codes
  4. Top Bar JS Codes

How do I make an top bar?

What is a top bar? How do you make a top bar? This script and codes were developed by Kelly Kalouta on 14 November 2022, Monday.

Top Bar Previews
IQ Test

Top Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Top Bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>	<!-- Font Awesome Icons --> <script src="https://use.fontawesome.com/dd0be6bed3.js"></script>
</head>
<body>
<div class="color3">	<!-- contact and social media bar --> <div class="row topbar nopadding is-table-row"> <!-- left spacer --> <div class="col-half nopadding">&nbsp;</div> <!-- contact --> <div class="col-5 topcontact nopadding"> <ul> <li class="topbarglyphs"><i class="fa fa-phone fa-2x" aria-hidden="true"></i></li> <li class="topbartext"><a href="tel:555-555-5555">Καλέστε μας: 2815005282</a></li> <li class="topbarglyphs"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i></li> <li class="topbartext"><a href="mailto:[email protected]">email: [email protected]</a></li> </ul> </div><!-- /contact -->
<form class="search-container"> <input type="search" name="search" class="search-input" /> <label for="search" class="search-icon"><i class="ion-ios-search ripple"></i></label>
</form> <!-- social --> <div class="col-6 topsocial nopadding main-nav"> <ul> <li class="topbarglyphs"> <i class="fa fa-youtube fa-2x" aria-hidden="true"></i> <span>YouTube</span> </li> <li class="topbarglyphs"> <i class="fa fa-vimeo fa-2x" aria-hidden="true"></i> <span>Vimeo</span> </li> <li class="topbarglyphs"> <i class="fa fa-skype fa-2x" aria-hidden="true"></i> <span>Skype</span> </li> <li class="topbarglyphs"> <i class="fa fa-google-plus fa-2x" aria-hidden="true"></i> <span>Google+</span> </li> <li class="topbarglyphs"> <i class="fa fa-twitter fa-2x" aria-hidden="true"></i> <span>Twitter</span> </li> <li class="topbarglyphs"> <i class="fa fa-facebook fa-2x" aria-hidden="true"></i> <span>Facebook</span> </li> </ul> </div><!-- /social --> <!-- right spacer --> <div class="col-half nopadding">&nbsp;</div> </div><!-- /contact and social media bar -->
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Top Bar - Script Codes CSS Codes

.color3 { height: 70px; background-color: #ffca10;
}
.search-container { position: absolute; right: 2rem; top: 2rem;
}
.search-container .search-icon { display: block; position: relative; top: -25px; left: -700px; background-color: #00AFF0; width: 2.5rem; height: 2.5rem; text-align: center; border-radius: 50%;
}
.search-container .search-icon i { font-size: 2rem; color: #fff;
}
.search-container .search-input { position: absolute; top: -1.3rem; right: 25rem; height: 2rem; width: 0; border: 1px solid transparent; -webkit-transition: all .2s ease; transition: all .2s ease; font-size: 2rem; padding: 1rem; font-family: 'Raleway'; background-color: #00AFF0; opacity: 0; color: #fff;
}
.search-container .search-input:focus { outline: none; color: #fff;
}
.search-container .open { width: 20rem; border: 1px solid #36D96C; -webkit-transition: all 1s ease; transition: all 1s ease; border-radius: 2%; opacity: 1;
}
.ripple:after { content: " "; position: absolute; /* margin:-70px 0 0 -35px; */ top: -2rem; right: -2rem; display: block; height: 100px; width: 100px; border: 3px solid #36D96C; border-radius: 50%; opacity: 0; -webkit-animation: ripple 2.5s infinite ease-out; animation: ripple 2.5s infinite ease-out; -webkit-animation-delay: 1s; animation-delay: 1s; pointer-events: none;
}
@-webkit-keyframes ripple { 0%,49% { opacity: 0; } 50% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 1; } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; }
}
@keyframes ripple { 0%,49% { opacity: 0; } 50% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 1; } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0; }
}
.main-nav ul { list-style: none; padding: 0; margin: 0;
}
.main-nav ul li { display: inline-block;
}
.main-nav { text-align: center;
}
.main-nav li { position: relative; margin: 0 10px;
}
.main-nav li span { position: absolute; top: 0; background: #333; right: 0; -webkit-transition: all .3s; transition: all .3s; opacity: 0;
}
.main-nav li:hover span { opacity: 1; z-index: 9999; background: #00AFF0; right: -40px; -webkit-transition: all .3s; transition: all .3s;
}
.topbar ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden;
}
/* Float the list items side by side */
.topcontact ul li { float: left; margin: 0;
}
.topsocial ul li { float: right; margin: 0; padding: 1em 0 1em 1.5em;
}
.topsocial ul li:hover { background-color: #00AFF0;
}
.topbar ul li a { text-decoration: none;
}
.topbarglyphs { font-size: .7em; padding-right: .5em;
}
.topbartext { font-size: 1em; padding-right: 2em;
}
/************* grid.css *************/
* { box-sizing: border-box;
}
[class*="col-"] { float: left; padding: 15px; /*border: 1px solid red;*/
}
.col-half { width: 4.166%;
}
.col-1 { width: 8.33%;
}
.col-1-half { width: 12.494%;
}
.col-2 { width: 16.66%;
}
.col-2-half { width: 20.834%;
}
.col-3 { width: 25%;
}
.col-3-half { width: 29.166%;
}
.col-4 { width: 33.33%;
}
.col-4-25 { width: 35.423%;
}
.col-4-75 { width: 39.587%;
}
.col-5 { width: 41.66%;
}
.col-6 { width: 50%;
}
.col-7 { width: 58.33%;
}
.col-8 { width: 66.66%;
}
.col-9 { width: 75%;
}
.col-10 { width: 83.33%;
}
.col-11 { width: 91.66%;
}
.col-12 { width: 100%;
}
.row::after { content: ""; clear: both; display: block;
}

Top Bar - Script Codes JS Codes

$(document).ready(function(){ var $searchIcon = $('.search-icon'); var $searchInput = $('.search-input'); $searchIcon.click(function(){ $searchInput.toggleClass('open'); });
});
Top Bar - Script Codes
Top Bar - Script Codes
Home Page Home
Developer Kelly Kalouta
Username kelkal
Uploaded November 14, 2022
Rating 3
Size 4,489 Kb
Views 12,144
Do you need developer help for Top 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!

Kelly Kalouta (kelkal) Script Codes
Name
Footer Click-Tshirt
A Pen by Kelly Kalouta
About us by Rhinokage Rio
Slideshow Funny Tshirts
Dokimi2
Parousiash Proiontos
Slider Arxiki
Brands sliding
Return Policy
Payment Methods
Create amazing art & images 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!