html5搜索框特效点击搜索框弹出分类搜索框代码



332 1327 443



特效描述:html5搜索框特效 点击搜索框弹出 分类搜索框,点击搜索框弹出分类搜索框代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="js/classie.js"></script>

3. HTML代码

<div class="container">
	<aside class="sidebar clearfix">
		<nav>
			<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
			<a href="#"><i class="fa fa-fw fa-heart-o"></i></a>
			<a href="#"><i class="fa fa-fw fa-send-o"></i></a>
			<a href="#"><i class="fa fa-fw fa-smile-o"></i></a>
		</nav>
	</aside>
	<div id="morphsearch" class="morphsearch">
		<form class="morphsearch-form">
			<input class="morphsearch-input" type="search" placeholder="Search..."/>
			<button class="morphsearch-submit" type="submit">Search</button>
		</form>
		<div class="morphsearch-content">
			<div class="dummy-column">
				<h2>People</h2>
				<a class="dummy-media-object" href="http://twitter.com/SaraSoueidan">
					<img src="img/thumbs/ResponsiveSVGs.png" alt="ResponsiveSVGs"/>
					<h3>Sara Soueidan</h3>
				</a>
				<a class="dummy-media-object" href="http://twitter.com/rachsmithtweets">
					<img src="img/thumbs/FreebieHalcyonDays.png" alt="FreebieHalcyonDays"/>
					<h3>Rachel Smith</h3>
				</a>
				<a class="dummy-media-object" href="http://www.twitter.com/peterfinlan">
					<img src="img/thumbs/OffCanvas.png" alt="OffCanvas"/>
					<h3>Peter Finlan</h3>
				</a>
				<a class="dummy-media-object" href="http://www.twitter.com/pcridesagain">
					<img src="img/thumbs/HoverEffectsIdeasNew.png" alt="HoverEffectsIdeasNew"/>
					<h3>Patrick Cox</h3>
				</a>
				<a class="dummy-media-object" href="https://twitter.com/twholman">
					<img src="img/thumbs/DraggableDualViewSlideshow.png" alt="DraggableDualViewSlideshow"/>
					<h3>Tim Holman</h3>
				</a>
				<a class="dummy-media-object" href="https://twitter.com/shaund0na">
					<img src="img/thumbs/PagePreloadingEffect.png" alt="PagePreloadingEffect"/>
					<h3>Shaun Dona</h3>
				</a>
			</div>
			<div class="dummy-column">
				<h2>Popular</h2>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/08/05/page-preloading-effect/">
					<img src="img/thumbs/PagePreloadingEffect.png" alt="PagePreloadingEffect"/>
					<h3>Page Preloading Effect</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/05/28/arrow-navigation-styles/">
					<img src="img/thumbs/ArrowNavigationStyles.png" alt="ArrowNavigationStyles"/>
					<h3>Arrow Navigation Styles</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/">
					<img src="img/thumbs/HoverEffectsIdeasNew.png" alt="HoverEffectsIdeasNew"/>
					<h3>Ideas for Subtle Hover Effects</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/07/14/freebie-halcyon-days-one-page-website-template/">
					<img src="img/thumbs/FreebieHalcyonDays.png" alt="FreebieHalcyonDays"/>
					<h3>Halcyon Days Template</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/">
					<img src="img/thumbs/ArticleIntroEffects.png" alt="ArticleIntroEffects"/>
					<h3>Inspiration for Article Intro Effects</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/">
					<img src="img/thumbs/DraggableDualViewSlideshow.png" alt="DraggableDualViewSlideshow"/>
					<h3>Draggable Dual-View Slideshow</h3>
				</a>
			</div>
			<div class="dummy-column">
				<h2>Recent</h2>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/10/07/tooltip-styles-inspiration/">
					<img src="img/thumbs/TooltipStylesInspiration.png" alt="TooltipStylesInspiration"/>
					<h3>Tooltip Styles Inspiration</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/09/23/animated-background-headers/">
					<img src="img/thumbs/AnimatedHeaderBackgrounds.png" alt="AnimatedHeaderBackgrounds"/>
					<h3>Animated Background Headers</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/">
					<img src="img/thumbs/OffCanvas.png" alt="OffCanvas"/>
					<h3>Off-Canvas Menu Effects</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/">
					<img src="img/thumbs/TabStyles.png" alt="TabStyles"/>
					<h3>Tab Styles Inspiration</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">
					<img src="img/thumbs/ResponsiveSVGs.png" alt="ResponsiveSVGs"/>
					<h3>Make SVGs Responsive with CSS</h3>
				</a>
				<a class="dummy-media-object" href="http://tympanus.net/codrops/2014/07/23/notification-styles-inspiration/">
					<img src="img/thumbs/NotificationStyles.png" alt="NotificationStyles"/>
					<h3>Notification Styles Inspiration</h3>
				</a>
			</div>
		</div><!-- /morphsearch-content -->
		<span class="morphsearch-close"></span>
	</div><!-- /morphsearch -->
	<div class="overlay"></div>
</div><!-- /container -->
<script type="text/javascript">
(function() {
	var morphSearch = document.getElementById( 'morphsearch' ),
		input = morphSearch.querySelector( 'input.morphsearch-input' ),
		ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
		isOpen = isAnimating = false,
		// show/hide search area
		toggleSearch = function(evt) {
			// return if open and the input gets focused
			if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
			var offsets = morphsearch.getBoundingClientRect();
			if( isOpen ) {
				classie.remove( morphSearch, 'open' );
				// trick to hide input text once the search overlay closes 
				// todo: hardcoded times, should be done after transition ends
				if( input.value !== '' ) {
					setTimeout(function() {
						classie.add( morphSearch, 'hideInput' );
						setTimeout(function() {
							classie.remove( morphSearch, 'hideInput' );
							input.value = '';
						}, 300 );
					}, 500);
				}
				input.blur();
			}
			else {
				classie.add( morphSearch, 'open' );
			}
			isOpen = !isOpen;
		};
	// events
	input.addEventListener( 'focus', toggleSearch );
	ctrlClose.addEventListener( 'click', toggleSearch );
	// esc key closes search overlay
	// keyboard navigation events
	document.addEventListener( 'keydown', function( ev ) {
		var keyCode = ev.keyCode || ev.which;
		if( keyCode === 27 && isOpen ) {
			toggleSearch(ev);
		}
	} );
	/***** for demo purposes only: don't allow to submit the form *****/
	morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片广告 文字提示框 对联广告 提示框/弹出层 layer 叠加浮动层 lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到