Searchbar with Navigation

Developer
Andy Lorimer
Size
2,929 Kb
Views
40,480
  1. Searchbar with Navigation Previews
  2. Searchbar with Navigation HTML Codes
  3. Searchbar with Navigation CSS Codes
  4. Searchbar with Navigation JS Codes

How do I make an searchbar with navigation?

Inspired by Vurb: http://vurb.com/. Thought it looked really cool. Background images supplied by Unsplash: https://unsplash.com/ (another reason why Vurb is cool).. What is a searchbar with navigation? How do you make a searchbar with navigation? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.

Searchbar with Navigation Previews
IQ Test

Searchbar with Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Searchbar with Navigation</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div class="container"> <nav class="search-nav"> <ul> <li class="arrow"></li> <li><a class="active all" href="#">All</a></li> <li><a href="#">Places</a></li> <li><a href="#">Movies</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Events</a></li> </ul> </nav> <div class="search"> <span class="icon"><i class="fa fa-search"></i></span> <input class="searchbar" type="text" placeholder="I'm looking for..." /> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Searchbar with Navigation - Script Codes CSS Codes

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
body { margin: 0; padding: 0; font-family: 'Open Sans'; font-size: 13px;
}
input:focus { outline: none;
}
#wrapper { position: absolute; width: 100%; min-width: 600px; height: 100%; background: url(https://images.unsplash.com/uploads/1412594480669535c9ef9/9d85c477?dpr=2&fit=crop&fm=jpg&h=650&q=50&w=1300) no-repeat; background-size: cover;
}
#wrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4);
}
.container { position: relative; width: 80%; height: auto; margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
}
.search-nav { position: relative; width: 100%; height: auto;
}
.search-nav ul { position: relative; margin: 0; padding: 0; list-style-type: none;
}
.arrow { position: absolute; bottom: 0; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;
}
.arrow:before { content: ''; position: absolute; left: 50%; border: solid 5px; border-color: transparent transparent #fff transparent; bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
}
.search-nav ul li { display: inline-block; margin: 0 15px;
}
.search-nav ul li a { display: inline-block; padding: 15px 0; text-decoration: none; color: #fff; opacity: .7;
}
.search-nav ul li a.active { opacity: 1;
}
.search { position: relative; width: 100%; height: auto; display: inline-table;
}
.icon { display: inline-block; width: 45px; height: 45px; background: #fff; border-radius: 3px 0 0 3px; vertical-align: top; text-align: center; line-height: 45px; color: #a7a7a7; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
.icon.search-active { color: #2b2b2b;
}
.searchbar { position: relative; display: inline-block; width: 90%; height: 45px; padding: 0; border: none; border-radius: 0 3px 3px 0; font-size: 13px;
}

Searchbar with Navigation - Script Codes JS Codes

var curWidth = $('.search-nav ul li a.active').width();
var curPos = $('.search-nav ul li a.active').offset().left;
$('.arrow').width(curWidth).offset({ left: curPos
});
$('.search-nav ul li a').on('click', function() { $('.search-nav ul li a').removeClass('active'); $(this).addClass('active'); var findWidth = $(this).width(); var offset = $(this).offset(); var offLeft = offset.left; $('.arrow').width(findWidth).offset({ left: offLeft }); var getContents = $(this).text(); if ($(this).hasClass('all')) { $('.searchbar').attr("placeholder", "I'm looking for..."); } else { $('.searchbar').attr("placeholder", "I'm looking for " + getContents + "..."); }
});
$('.searchbar').on('focus', function() { $('.icon').toggleClass('search-active');
});
$('.searchbar').on('blur', function() { $('.icon').toggleClass('search-active');
});
Searchbar with Navigation - Script Codes
Searchbar with Navigation - Script Codes
Home Page Home
Developer Andy Lorimer
Username andylorimer
Uploaded July 22, 2022
Rating 3
Size 2,929 Kb
Views 40,480
Do you need developer help for Searchbar with Navigation?

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!

Andy Lorimer (andylorimer) Script Codes
Name
Scroll down button
Off-Canvas Menu
Random Spinning loader
A Pen by Andy Lorimer
Interactive Button Editor
Feature Slider
Masked.js
Loading Animation
Input field - jQuery test
Password Input
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!