***************** j s *****************************************************************************************************// 获取 classNamefunction 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;}
添加回答
举报
0/150
提交
取消