Header Search Forms
Various search form controls and components within a navbar.
Classic search
<!-- Search -->
<div class="hs-unfold mr-2">
<a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchClassic",
"type": "css-animation",
"animationIn": "slideInUp"
}'>
<i class="fas fa-search la-lg"></i>
</a>
<div id="searchClassic" class="hs-unfold-content dropdown-menu w-100 border-0 rounded-0 px-3 mt-0" style="min-width: 400px;">
<form class="input-group input-group-sm input-group-merge">
<input type="text" class="form-control" placeholder="What do you want to learn?" aria-label="What do you want to learn?">
<div class="input-group-append">
<button type="button" class="btn">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- End Search -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>
Slide-down search
<!-- Search Content -->
<div id="searchSlideDown" class="hs-unfold-content dropdown-unfold search-slide-down">
<form>
<!-- Input Group -->
<div class="input-group input-group-borderless search-slide-down-input bg-white rounded mb-2">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
</div>
<input id="searchSlideDownControl" type="search" class="form-control" placeholder="Search Vodi" aria-label="Search Vodi">
<div class="input-group-append">
<a class="js-hs-search-unfold-invoker input-group-text" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchSlideDown",
"type": "css-animation",
"animationIn": "fadeIn search-slide-down-show",
"animationOut": "fadeOutUp",
"cssAnimatedClass": null,
"hasOverlay": true,
"overlayClass": ".search-slide-down-bg-overlay",
"overlayStyles": {
"background": "rgba(33, 50, 91, .8)"
},
"duration": 800,
"hideOnScroll": false
}'>
<i class="fas fa-times" aria-hidden="true"></i>
</a>
</div>
</div>
<!-- End Input Group -->
<!-- Suggestions Content -->
<div class="rounded bg-white search-slide-down-suggestions py-3 px-5">
<ul class="list-unstyled list-sm-article mb-0">
<li><a href="#">About Vodi</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Documentation</a></li>
</ul>
</div>
<!-- End Suggestions Content -->
</form>
</div>
<!-- End Search Content -->
<!-- Search -->
<div class="position-relative">
<a class="js-hs-search-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary search-slide-down-trigger" href="javascript:;" role="button"
data-hs-unfold-options='{
"target": "#searchSlideDown",
"type": "css-animation",
"animationIn": "fadeIn search-slide-down-show",
"animationOut": "fadeOutUp",
"cssAnimatedClass": null,
"hasOverlay": true,
"overlayClass": ".search-slide-down-bg-overlay",
"overlayStyles": {
"background": "rgba(33, 50, 91, .8)"
},
"duration": 800,
"isFullWindow": true,
"hideOnScroll": false
}'>
<i class="fas fa-search search-slide-down-trigger-icon"></i>
</a>
</div>
<!-- End Search -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of unfold
$('.js-hs-search-unfold-invoker').each(function() {
var searchUnfold = new HSUnfold($(this), {
afterOpen: function() {
$('#searchSlideDownControl').focus();
}
}).init();
});
});
</script>