***************** j s *****************************************************************************************************
// 获取 className
function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName('*');
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
return eles;
};
// 切换列表
var skip=document.getElementById('skip'),
skip_list=document.getElementById('skip_list'),
lis=skip_list.getElementsByTagName('li'),
skip_txt=document.getElementById('skip_txt');
// 切换列表
skip.onclick=function(){
skip_list.style.display='block';
};
// 鼠标滑过、离开和点击选择列表时
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.className='selected';
};
lis[i].onmouseout=function(){
this.className='';
};
lis[i].onclick=function(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
};
var id = this.id;
attribute=getByClass('select_text',id)[0].getAttribute('href');
skip_list.style.display='none';
skip_txt.innerHTML=getByClass('select_text',id)[0].innerHTML;
skip_txt.setAttribute('href',attribute);
};
};
// 隐藏列表
skip_list.onmouseout=function(){
skip_list.style.display='none';
};
************* H T M L 结构 *******************************************************************************************
<div class="search_wrapper">
<form>
<div id="skip">
<div class="skip"><a href="#" id="skip_txt">商品</a></div>
<i class="icon_1"></i>
<ul id="skip_list" class="skip_list" style="display:none;">
<li id="curriculum"><a href="#" class="select_text">商品</a></li>
<li id="school"><a href="#" class="select_text">店铺</a></li>
</ul>
</div>
<input type="text" id="search_input" class="search_input" placeholder="请输入关键词...">
<input type="submit" class="search" value="搜索">
</form>
</div>
****************** C S S 样式 *****************************************************************************
.search_wrapper {
position:relative;
float: right;
height: 45px;
width: 451px;
line-height: 45px;
margin-top: 13px;
border: 2px solid #7FC7A0;
background-color: #474645;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
}
.search_wrapper a {color:#E3E8E7; text-decoration:none;}
.search {
width: 40px;
height: 30px;
border: 1px solid #BDF4E4;
border-radius: 4px;
background-color: #90D3E3;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 15.03%,rgba(144,211,227,1.00) 70.47%);
color: #283A35;
font-family: "新宋体";
font-weight: bold;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: inset, 0 1px 0 #F3FAFB;
-webkit-box-shadow:inset 2px 2px 0px #F3FAFB;
box-shadow:inset 2px 2px 0px #F3FAFB;
}
.search :hover, search :focus {
width: 40px;
height: 30px;
border-radius: 4px;
background-color: #90D3E3;
background-image: -webkit-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
background-image: -moz-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
background-image: -o-linear-gradient(270deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
background-image: linear-gradient(180deg,rgba(144,211,227,1.00) 20.21%,rgba(255,255,255,1.00) 88.60%);
}
.search :active {
outline: 0;
-moz-box-shadow: inset 1px 4px 0px 0px #F3FAFB;
-webkit-box-shadow: inset 1px 4px 0px 0px #F3FAFB;
box-shadow: inset 1px 4px 0px 0px #F3FAFB;
}
.search ::-moz-focus-inner {
border: 0;
}
.skip {width:56px;float:left; margin: 0 2px;}
.skip_list {width: 56px; border: 2px solid #7FC7A0; position:absolute; left: -2px; top:-2px; background-color: #006812; z-index: 2; display:block;}
.search_input { height: 28px; width: 300px; border: solid #EDEDED 3px; font-size: 15px; font-weight: 600;}
.selected {background-color: #474645; display:block;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);}
.icon_1 { width: 15px; height: 12px; float:left; margin: 16px 0; background: url(../images/i_1.jpg) left no-repeat;}
慕田峪3555374
相关分类