实验三、编写商城菜单导航栏-搜索框
【实验内容】
本实验主要是运用html、css实现商城菜单导航栏-搜索框,运用jquery实现搜索框的搜索效果。
【实验目的】
1、了解HTML的基本标签使用，包含a、ul、li、div、form、input标签；
2、处理a标签；
3、处理input输入框；
4、熟悉字体图标使用；
5、css设置样式；
6、运用jquery实现输入框的输入文字的动画效果；
7、实现页面的实现商城菜单导航栏-搜索框；
【实验步骤】
步骤1 使用html基本标签编写商城菜单导航栏-搜索框；
步骤2 css设置商城菜单导航栏-搜索框样式；
步骤3 运用jquery实现搜索框的输入动画效果；
步骤1 使用html基本标签编写商城菜单导航栏-搜索框
<!--页面header--> <div class="site-header"> <div class="container clearfix"> <!--网站logo--> <div class="header-logo pull-left"> <a href="javascript:;"> <img src="./image/logo.png"> </a> </div> <ul class="header-nav pull-left clearfix"> <li class="item-category"> <!--分类导航--> <div class="site-category"> <ul class="category-list clearfix"> <li class="category-item"><a class="title" href="javascript:;">手机 平板 电话卡</a><i class="icon iconfont2"></i> </li> <li class="category-item"><a class="title" href="javascript:;">电视 盒子</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">路由器 智能硬件</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">移动电源 插线板</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">耳机 音箱</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">电池 存储卡</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">保护套 后盖</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">贴膜 其他配件</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">米兔 服装</a><i class="icon iconfont2"></i></li> <li class="category-item"><a class="title" href="javascript:;">箱包 其他周边</a><i class="icon iconfont2"></i></li> </ul> </div> </li> <li class="nav-item"><a class="link" href="javascript:;" class="">小米手机</a></li> <li class="nav-item"><a class="link" href="javascript:;">红米</a></li> <li class="nav-item"><a class="link" href="javascript:;">平板</a></li> <li class="nav-item"><a class="link" href="javascript:;">电视 · 盒子</a></li> <li class="nav-item"><a class="link" href="javascript:;">路由器</a></li> <li class="nav-item"><a class="link" href="javascript:;">智能硬件</a></li> <li class="nav-item"><a class="link" href="javascript:;">服务</a></li> <li class="nav-item"><a class="link" href="javascript:;">社区</a></li> </ul> <!--搜索框--> <div class="header-search pull-right"> <form class="search-form"> <input type="text" class="search-text" id="search-text"/> <a href="javascript:;" class="btn-search"> <i class="icon iconfont1"></i> </a> <div class="search-keywords" id="search-keywords"> <a href="javascript:;">手环</a> <a href="javascript:;">小米手机4</a> </div> </form> </div> </div> </div>
步骤2 css设置商城菜单导航栏-搜索框样式
/*site-header start*/
.site-header {
position: relative;
z-index: 20;
height: 100px;
}
.site-header .header-logo {
float: left;
width: 55px;
height: 55px;
margin-top: 22px;
padding: 3px;
/* background: #ff6700; */
}
.site-header .header-nav {
position: relative;
z-index: 10;
float: left;
width: 868px;
height: 100px;
margin: 0;
padding: 12px 0 0 30px;
font-size: 16px;
list-style-type: none;
}
.site-header .header-nav .nav-item {
float: left;
}
.site-header .header-nav .item-category {
position: relative;
float: left;
width: 138px;
height: 100%;
}
.site-category {
position: absolute;
top: 88px;
left: -85px;
z-index: 21;
width: 234px;
height: 460px;
font-size: 14px;
}
.category-list {
height: 460px;
margin: 0;
padding: 20px 0;
border: 0;
background: #333;
background: rgba(0,0,0,.6);
list-style-type: none;
color: #fff;
*height: 420px;
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#99000000", endColorstr="#99000000")9; */
}
.category-list .category-item {
position: relative;
}
.category-list .category-item .title {
position: relative;
display: block;
height: 42px;
padding-left: 30px;
line-height: 42px;
color: #fff;
}
.category-list .category-item .title:hover {
background: #ff6700;
color: #fff;
}
.site-header .header-nav .link {
display: block;
padding: 26px 18px 38px;
color: #333;
}
.site-header .header-nav .link:hover {
color: #ff6700;
}
.site-header .header-search {
width: 296px;
margin-top: 25px;
}
.site-header .search-form {
position: relative;
width: 296px;
height: 50px;
}
.site-header .search-form .search-text {
position: absolute;
top: 0;
right: 51px;
z-index: 1;
width: 223px;
height: 50px;
padding: 0 10px;
border: 1px solid #e0e0e0;
outline: 0;
font-size: 14px;
line-height: 48px;
}
.site-header .search-form-active .search-text,
.site-header .search-form-active .btn-search {
border-color: #ff6700;
}
.site-header .search-keywords {
position: absolute;
top: 14px;
right: 62px;
z-index: 2;
text-align: right;
}
.site-header .search-keywords a {
display: inline-block;
margin-left: 5px;
padding: 0 5px;
background: #eee;
font-size: 12px;
color: #757575;
}
.site-header .search-keywords a:hover {
background: #ff6700;
-webkit-transition: border-color .2s;
transition: border-color .2s;
color: #fff;
}
.site-header .btn-search {
position: absolute;
top: 0;
right: 0;
z-index: 2;
width: 52px;
height: 50px;
border: 1px solid #e0e0e0;
outline: 0;
background: #fff;
font-size: 24px;
line-height: 24px;
color: #616161;
}
/*site-header end*/
步骤3 运用jquery实现搜索框的输入动画效果
(1)先下栽jquery文件，如图：
(2)在body标签里引入jquery的js文件；
<script type="text/javascript" src="./js/lib/jquery.min.js"></script>
(3)文件夹js里新建一个index.js文件，在标签里引入；
<script type="text/javascript" src="./js/index.js"></script>
完整代码如下：
(function($, window, undefined) {
var ui = {
$search_text: $('#search-text'),
$search_keywords: $('#search-keywords')
}
ui.$search_text.focus(function() {
$(this).closest('form').toggleClass('search-form-active');
ui.$search_keywords.fadeOut();
}).blur(function() {
$(this).closest('form').toggleClass('search-form-active');
ui.$search_keywords.fadeIn();
});
})(jQuery, window);
最终效果如下图：
