插件描述:这是一款使用jQuery和CSS3制作的炫酷高级搜索框设计效果。在这个高级搜索框设计中,当用户点击了搜索按钮之后,会出现搜索输入框,以及一个带相关搜索链接的面板供用户选择。
HTML结构
该高级搜索框的HTML结构有3个部分组成:一个元素,用于包裹导航条。一个div.cd-main-search,用于制作搜索框。还有一个main.cd-main-content是页面的主体部分。
Search
- Products
Menu
in
all Categories
all Categories
News
...
Feb 03, 2016
Quick Links
- Find a store
Close Form
CSS样式
在小屏幕设备上(视口小于1024像素),导航菜单和搜索框被隐藏,只在屏幕的右上方显示一个汉堡包按钮。当用户点击了汉堡包按钮之后,和元素会通过添加nav-is-visible class向左滑动进入屏幕。.cd-main-header, .cd-main-content {
position: relative;
transition: transform 0.3s;
}
.cd-main-header.nav-is-visible, .cd-main-content.nav-is-visible {
transform: translateX(-260px);
}
在大屏幕设备上,搜索框被放置在导航菜单上,默认是隐藏的,只显示一个搜索图标。当用户点击了.cd-search-trigger元素之后,搜索框表单上会被添加一个.is-visible class,搜索框会被显示出来。@media only screen and (min-width: 1024px) {
.cd-main-search {
position: absolute;
z-index: 2;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.cd-main-search.is-visible {
/* search form open */
opacity: 1;
visibility: visible;
}
}
为了制作搜索框的动画,特效中在元素上添加了.animate-search class。这个class会触发2个不同的CSS3动画:对搜索框使用cd-slide-in动画,对高级搜索面板使用cd-3d-rotation动画。@media only screen and (min-width: 1024px) {
.animate-search .cd-main-search.is-visible {
/* trigger search form animation if has the .animate-search class */
animation: cd-slide-in 0.3s;
}
.animate-search .is-visible .cd-search-suggestions {
/* trigger the dropdown animation if has the .animate-search class */
transform-origin: center top;
animation: cd-3d-rotation 0.5s 0.3s;
animation-fill-mode: backwards;
}
}
@keyframes cd-slide-in {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes cd-3d-rotation {
0% {
transform: perspective(1000px) rotateX(-90deg);
}
100% {
transform: perspective(1000px) translateY(0);
}
}
如果你想要淡入淡出的动画效果,只需要简单的从元素中移除.animate-search class。
对于高级搜索面板中的项目列表,要确保div.cd-select的宽度随用户的选择而改变。元素是绝对定位的(因此它不占用空间),span.selected-value元素用于显示可选择的选项。@media only screen and (min-width: 1024px) {
.cd-main-search .cd-select {
position: absolute;
right: 0;
overflow: hidden;
}
.cd-main-search select {
/* the element is not visible - it is covered by the .selected-value element */
position: absolute;
right: 0;
opacity: 0;
color: transparent;
}
.cd-main-search .selected-value {
color: #ffffff;
pointer-events: none;
}
.cd-main-search select, .cd-main-search .selected-value {
padding: 0.5em 1.7em 0.5em .3em;
font-size: 1.4rem;
border-radius: 3px;
}
}
JavaScript
在初始的HTML结构中,导航菜单位于元素中。在小屏幕设备上,导航菜单被移动到屏幕之外,默认隐藏。这些都通过jQuery代码来动态改变。
另外div.cd-main-search元素也会做相同的操作:默认它在导航菜单之外,在小屏幕设备中,会将它移动到nav.cd-main-nav-wrapper元素之内。var navigationWrapper = $('.cd-main-nav-wrapper'),
navigation = navigationWrapper.children('.cd-main-nav'),
searchForm = $('.cd-main-search'),
navigationTrigger = $('.cd-nav-trigger'),
mainHeader = $('.cd-main-header');
function moveNavigation(){
var screenSize = checkWindowWidth(); //returns 'mobile' or 'desktop'
if ( screenSize == 'desktop' && (navigationTrigger.siblings('.cd-main-search').length == 0) ) {
//desktop screen - insert navigation and search form inside
searchForm.detach().insertBefore(navigationTrigger);
navigationWrapper.detach().insertBefore(searchForm).find('.cd-serch-wrapper').remove();
} else if( screenSize == 'mobile' && !(mainHeader.children('.cd-main-nav-wrapper').length == 0)) {
//mobile screen - move navigation and search form after .cd-main-content element
navigationWrapper.detach().insertAfter('.cd-main-content');
var newListItem = $('
');searchForm.detach().appendTo(newListItem);
newListItem.appendTo(navigation);
}
}