Yahoo
This article and the code by Renx original, I hope to bring help to you netizens.
Begin
In order to do this Yahoo search box, I divided three steps:
1. To do the search category first button, click and other buttons will look different, this is quite simple
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"> http://www.w3.org/1999/xhtml"> <title>search_bar</title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <style> body,html { font-size:12px; } . none {Display:none;} . block {Display:block;} . S_c {Width:800px;text-align:center} . S_c ul{clear:both;margin:0;} . S_c li{list-style:none;float:left;position:relative;width:70px;} . c_0 {padding:0px 10px 0px 10px;line-height:22px} . c_0 A{color: #666; text-decoration:none;} . c_1 {padding:4px 0;width:70px; Background: #0075eb; border:1px solid #054576; border-bottom-width:0;text-decoration:none;} . c_1 A{color: #FFF; font-weight:bold;text-decoration:none;} . c_2 {padding:4px 0;width:70px;background: #a10303; border:1px solid #662626; border-bottom-width:0;} Position:absolute;bottom: -7px;left:0;} . c_3 {padding:4px 0;width:70px;background: #B01FAA; border:1px solid #760473; border-bottom-width:0;} . White a {color: #FFF; font-weight:bold;text-decoration:none;} </style> <script language= "JavaScript" > function AA (s_id) { for (i=1;i<4;i++) { if (i==s_id) { document.getElementById ("M" +i). Classname= "C_" +i+ "white"; } else { document.getElementById ("M" +i). Classname= "C_0"; } } } </script> <body> <div class= "S_c" ><ul> <li><div id= "M1" class= "C_1" ><a href= "###" > Classification First </a></div></li> <li><div id= "m2" class= "c_0" ><a href= "###" > Classified second </a></div></li> <li><div id= "M3" class= "c_0" ><a href= "###" > Classification Third </a></div></li> </ul> </div> </body>
|
Of course, this is not enough, then realize the second step effect.
2. Add a search input box, and you can change the color of the
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"> http://www.w3.org/1999/xhtml"> <title>search_bar</title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <style> body,html { font-size:12px; } . none {Display:none;} . block {Display:block;} . S_c {Width:800px;text-align:center} . S_c ul{clear:both;margin:0;} . S_c li{list-style:none;float:left;position:relative;width:70px;} . s_b {border:1px solid #666;} . s_b span{padding:20px 20px;vertical-align:middle; . s_b input{margin:8px 8px; . search_0 {background: #fff;} . search_1 {background: #d2e4fc;} . search_2 {background: #fcd2d2;} . search_3 {background: #F9D3FA;} . search_4 {background: #defbfb;} . search_5 {background: #fce8d2;} . search_6 {background: #FCEBB9;} . c_0 {padding:0px 10px 0px 10px;line-height:22px} . c_0 A{color: #666; text-decoration:none;} . c_1 {padding:4px 0;width:70px; Background: #0075eb; border:1px solid #054576; border-bottom-width:0;text-decoration:none;} . c_1 A{color: #FFF; font-weight:bold;text-decoration:none;} . c_2 {padding:4px 0;width:70px;background: #a10303; border:1px solid #662626; border-bottom-width:0;} Position:absolute;bottom: -7px;left:0;} . c_3 {padding:4px 0;width:70px;background: #B01FAA; border:1px solid #760473; border-bottom-width:0;} . White a {color: #FFF; font-weight:bold;text-decoration:none;} </style> <script language= "JavaScript" > function AA (s_id) { for (i=1;i<4;i++) { if (i==s_id) { document.getElementById ("s" +i). Classname= "Block is"; document.getElementById ("M" +i). Classname= "C_" +i+ "white"; document.getElementById ("Uid_" +i). focus (); } else { document.getElementById ("s" +i). Classname= "None"; document.getElementById ("M" +i). Classname= "C_0"; } } } </script> <body> <div class= "S_c" ><ul> <li><div id= "M1" class= "C_1" ><a href= "###" > Classification First </a></div></li> <li><div id= "m2" class= "c_0" ><a href= "###" > Classified second </a></div></li> <li><div id= "M3" class= "c_0" ><a href= "###" > Classification Third </a></div></li> </ul> </div> <div class= "S_b" > <div class= "Block" id= "S1" ><div class= "search_1" ><span>search the Web:</span><input name= "UID" id= "uid_1"/><span> button </span></div></div> <div class= "None" id= "S2" ><div class= "search_2" ><span>search the Web:</span><input name= " UID "id=" uid_2 "/><span> button </span></div></div> <div class= "None" Id= "S3" ><div class= "Search_3" ><span>search the Web:</span><input name= " UID "id=" uid_3 "/><span> button </span></div></div> </div> </body>
|
3. Now add an arrow, make a frame, of course, also want different colors
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"> http://www.w3.org/1999/xhtml"> <title>search_bar</title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <style> body,html { font-size:12px; } . none {Display:none;} . block {Display:block;} . S_c {Width:800px;text-align:center} . S_c ul{clear:both;margin:0;} . S_c li{list-style:none;float:left;position:relative;width:70px;} . s_b {border:1px solid #666;} . s_b span{padding:20px 20px;vertical-align:middle; . s_b input{margin:8px 8px; . search_0 {background: #fff;} . search_1 {background: #d2e4fc;} . search_2 {background: #fcd2d2;} . search_3 {background: #F9D3FA;} . search_4 {background: #defbfb;} . search_5 {background: #fce8d2;} . search_6 {background: #FCEBB9;} . c_0 {padding:0px 10px 0px 10px;line-height:22px} . c_0 A{color: #666; text-decoration:none;} . c_1 {padding:4px 0;width:70px; Background: #0075eb; border:1px solid #054576; border-bottom-width:0;text-decoration:none;} . c_1 A{color: #FFF; font-weight:bold;text-decoration:none;} . C_1 B{width:100%;height:11px;background:url ("Picture/sc1.gif") no-repeat 50% Bottom;position:absolute;bottom: -7px ; left:0;} . c_2 {padding:4px 0;width:70px;background: #a10303; border:1px solid #662626; border-bottom-width:0;} . c_2 B{width:100%;height:11px;background:url ("Picture/sc2.gif") no-repeat 50% Bottom; Position:absolute;bottom: -7px;left:0;} . c_3 {padding:4px 0;width:70px;background: #B01FAA; border:1px solid #760473; border-bottom-width:0;} . C_3 B{width:100%;height:11px;background:url ("Picture/sc3.gif") no-repeat 50% Bottom;position:absolute;bottom: -7px ; left:0;} . c_4 {padding:4px 0;width:70px;background: #41abb5; border:1px solid #297a80; border-bottom-width:0;} . C_4 B{width:100%;height:11px;background:url ("Picture/sc4.gif") no-repeat 50% Bottom;position:absolute;bottom: -7px ; left:0;} . c_5 {padding:4px 0;width:70px;background: #d95000; border:1px solid #96450c; border-bottom-width:0;} . C_5 B{width:100%;height:11px;background:url ("Picture/sc5.gif") no-repeat 50% Bottom;position:absolute;bottom: -7px ; left:0;} . c_6 {padding:4px 0;width:70px;background: #ec9e2e; border:1px solid #B28B12; border-bottom-width:0;} . C_6 B{width:100%;height:11px;background:url ("Picture/sc6.gif") no-repeat 50% Bottom;position:absolute;bottom: -7px ; left:0;} . White a {color: #FFF; font-weight:bold;text-decoration:none;} </style> <script language= "JavaScript" > function AA (s_id) { for (i=1;i<7;i++) { if (i==s_id) { document.getElementById ("s" +i). Classname= "Block is"; document.getElementById ("M" +i). Classname= "C_" +i+ "white"; document.getElementById ("Uid_" +i). focus (); } else { document.getElementById ("s" +i). Classname= "None"; document.getElementById ("M" +i). Classname= "C_0"; } } } </script> <body> <div class= "S_c" ><ul> <li><div id= "M1" class= "C_1" ><a href= "###" ><b></b> classification first </a></div></li > <li><div id= "m2" class= "c_0" ><a href= "###" ><b></b> classification second </a></div></li > <li><div id= "M3" class= "c_0" ><a href= "###" ><b></b> classification third </a></div></li > <li><div id= "M4" class= "C_0" ><a href= "###" ><b></b> classification fourth </a></div></li > <li><div id= "M5" class= "C_0" ><a href= "###" ><b></b> classification fifth </A></DIV></LI > <li><div id= "M6" class= "C_0" ><a href= "###" ><b></b> classification sixth </A></DIV></LI > </ul> </div> <div class= "S_b" > <div class= "Block" id= "S1" ><div class= "search_1" ><span>search the Web:</span><input name= "UID" id= "uid_1"/><span> button </span></div></div> <div class= "None" id= "S2" ><div class= "search_2" ><span>search the Images:</span><input Name= "UID" id= "uid_2"/><span> button </span></div></div> <div class= "None" Id= "S3" ><div class= "Search_3" ><span>search the Images:</span><input Name= "UID" id= "uid_3"/><span> button </span></div></div> <div class= "None" Id= "S4" ><div class= "Search_4" ><span>search the Audio</span><input name= "UID" id= "uid_4"/><span> button </span></div></div> <div class= "None" Id= "S5" ><div class= "Search_5" ><span>search the News</span><input name= " UID "id=" uid_5 "/><span> button </span></div></div> <div class= "None" Id= "S6" ><div class= "Search_6" ><span>search the Shopping</span><input Name= "UID" id= "uid_6"/><span> button </span></div></div> </div> </body>
|
Now it seems almost OK, the efficiency is a little low, next time optimization