API tools faq
paste
Advertisement
shababshihan

কাস্টম সার্চ বস্ক তৈরী করব কিভাবেঃ

shababshihan
May 6th, 2015
244
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.95 KB | None | 0 0
raw download clone embed print report
  1. কাস্টম সার্চ বস্ক তৈরী করব কিভাবেঃ
  2. ==============================
  3.  
  4. ধাপ-১ঃ HTML মার্কপ & CSS ষ্টাইল রেডি করা ।
  5. -------
  6. ধাপ-২ঃ jQuery বডিতে কল করা ।
  7. --------
  8. ধাপ-৩ঃ jQuery কমান্ড করা ।
  9. -------
  10. যেমনঃ
  11. HTML মার্কপঃ
  12. =====================
  13. <!DOCTYPE HTML>
  14. <html lang="en-US">
  15. <head>
  16. <meta charset="UTF-8">
  17. <title>fourth Task</title>
  18. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  19. <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  20.  
  21.  
  22. </head>
  23. <body>
  24.  
  25. <div class="fix main_menu_area">
  26. <div class="fix main_menu_wrapper">
  27. <div class="fix menu_left_logo">
  28. <a href="#" class="fix logo"><img src="google_logo.jpg" alt="" /></a>
  29. </div>
  30. <div class="fix search_button_wrapper">
  31. <button type="button" id="search_btn"><i class="fa fa-search"></i><i class="fa fa-times"></i></button>
  32. </div>
  33. <div class="fix main_menu">
  34. <ul id="nav_menu">
  35. <li><a href="#home"><span>Home</span></a></li>
  36. <li><a href="#about"><span>About</span></a></li>
  37. <li><a href="#product"><span>Our Product</span></a></li>
  38. <li><a href="#books"><span>Our Books</span></a></li>
  39. <li><a href="#contact"><span>Contact Us</span></a></li>
  40. <li><a class="external" href="http://www.google.com"><span>Google</span></a></li>
  41. </ul>
  42. </div>
  43. </div>
  44. <div class="fix search_box_area">
  45. <div class="fix search_box_wrapper">
  46. <div class="fix search_box">
  47. <form action="">
  48. <input type="text" placeholder="Search You Content !" class="search_input" />
  49. <button type="submit" class="search_submit"><i class="fa fa-search"></i></button>
  50. </form>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. --------------------------------------------------------------------------------------------
  56. CSS ষ্টাইলঃ
  57. ============
  58. body{margin:0;padding:0;font-size:16px;line-height:20px;font-family:arial;position: relative;}
  59. .fix:after{content:'';display: table;clear: both;}
  60. .main_menu_area{
  61. background: #000;
  62. position: relative;
  63. z-index: 9999;
  64. }
  65. .main_menu_area.fixed{
  66. position: fixed;
  67. top: 0px;
  68. left: 0px;
  69. width: 100%;
  70. height: auto;
  71. background: rgba(0, 0, 0, 0.9);
  72. }
  73. .main_menu_wrapper{
  74. width: 980px;
  75. margin: 0 auto;
  76. }
  77. .menu_left_logo{
  78. float: left;
  79. }
  80. a.logo{
  81. display: block;
  82. padding: 0px;
  83. font-size: 60px;
  84. line-height: 60px;
  85. text-decoration: none;
  86. color: #fff;
  87. -webkit-transition: all .5s;
  88. transition: all .5s;
  89. width: 200px;
  90. height: 100px;
  91. }
  92. a.logo img{
  93. display: block;
  94. max-width: 100%;
  95. -webkit-transition: all .5s;
  96. transition: all .5s;
  97. }
  98. a.logo:hover{}
  99. .main_menu_area.fixed a.logo{
  100. height: 50px;
  101. width: 100px;
  102. }
  103. .main_menu{
  104. float: right;
  105. }
  106. ul#nav_menu{
  107. margin: 0px;
  108. padding: 0px;
  109. }
  110. ul#nav_menu>li{
  111. float: left;
  112. display: inline-block;
  113. position: relative;
  114. }
  115. ul#nav_menu>li>a:before{
  116. content:'';
  117. position: absolute;
  118. top: 0px;
  119. left: 0px;
  120. width: 100%;
  121. height: 0%;
  122. background: #333;
  123. -webkit-transition: all .5s;
  124. transition: all .5s;
  125. -webkit-transform: skew(-10deg);
  126. }
  127. ul#nav_menu>li>a:after{content:'';
  128. position: absolute;
  129. bottom: 0px;
  130. left: 0px;
  131. width: 100%;
  132. height: 0%;
  133. background: #333;
  134. z-index: 1;
  135. -webkit-transition: all .5s;
  136. transition: all .5s;
  137. }
  138. ul#nav_menu>li>a:hover:before{
  139. height: 100%;
  140. }
  141. ul#nav_menu>li>a:hover:after{
  142. height: 0%;
  143. }
  144. ul#nav_menu>li>a.active:before{
  145. height: 100%;
  146. }
  147. ul#nav_menu>li>a.active:after{
  148.  
  149. }
  150. ul#nav_menu>li>a{
  151. display: block;
  152. padding: 39px 20px;
  153. color: #fff;
  154. text-decoration: none;
  155. font-size: 18px;
  156. line-height: 22px;
  157. -webkit-transition: all .5s;
  158. transition: all .5s;
  159.  
  160. position: relative;
  161. z-index: 9;
  162. }
  163. ul#nav_menu>li>a>span{
  164. position: relative;
  165. z-index: 10;
  166. }
  167. ul#nav_menu>li>a:hover{
  168. color: red;
  169.  
  170. }
  171. ul#nav_menu>li>a.active{
  172. color: red;
  173.  
  174. }
  175. .main_menu_area.fixed ul#nav_menu>li>a{
  176. padding: 14px 20px;
  177. }
  178. .contact_section{
  179. width: 800px;
  180. margin: 50px auto;
  181. }
  182. .body_content h1{
  183. text-align: center;
  184. font-size: 50px;
  185. line-height: 50px;
  186. }
  187. .contact_section p{margin-bottom:20px;}
  188. .section{
  189. padding: 30px 0px;
  190. }
  191. .section h2{
  192. text-align: center;
  193. font-size: 40px;
  194. line-height: 50px;
  195. }
  196.  
  197.  
  198. /* Search Button Style */
  199. .search_button_wrapper{
  200. float: right;
  201. }
  202. #search_btn{
  203. background: transparent;
  204. border: 0px solid #fff;
  205. color: #fff;
  206. height: 100px;
  207. width: 60px;
  208. text-align: center;
  209. font-size: 25px;
  210. -webkit-transition: all .5s;
  211. transition: all .5s;
  212. cursor: pointer;
  213. }
  214. #search_btn.change i.fa-search {
  215. display: none;
  216. }
  217. #search_btn i.fa-times {
  218. display: none;
  219. }
  220. #search_btn.change i.fa-times {
  221. display: block;
  222. }
  223. .main_menu_area.fixed #search_btn{
  224. height: 50px;
  225. }
  226. #search_btn:hover {
  227. background: #333;
  228. color: red;
  229. outline: 0;
  230. }
  231. #search_btn.change{
  232. background: #333;
  233. color: red;
  234. }
  235. #search_btn:focus {
  236. outline: 0;
  237. }
  238. .search_box_area{
  239. position: absolute;
  240. top: 100%;
  241. left: 0px;
  242. width: 100%;
  243. height: auto;
  244. background: #000;
  245. border-top: 2px solid #333;
  246. display: none;
  247. }
  248. .main_menu_area.fixed .search_box_area{
  249. background: rgba(0, 0, 0, 0.9);
  250. }
  251. .search_box_wrapper{
  252. width: 980px;
  253. margin: 0 auto;
  254. padding: 20px 0px;
  255. }
  256. .search_box{
  257. background: #fff;
  258. border-radius: 500px;
  259. overflow: hidden;
  260. }
  261. .main_menu_area.fixed .search_box{
  262. background: rgba(255, 255, 255, 0.8);
  263. }
  264. input.search_input{
  265. display: inline-block;
  266. float: left;
  267. width: 90%;
  268. border: 0px solid #fff;
  269. padding: 10px 20px;
  270. font-size: 20px;
  271. height: 23px;
  272. background: transparent;
  273. }
  274. input.search_input:hover, input.search_input:focus {
  275. outline: 0;
  276. }
  277. button#contact_close{
  278. position: absolute;
  279. top: 30px;
  280. right: 50px;
  281. width: 50px;
  282. height: 50px;
  283. background: #fff;
  284. border: 0px solid #fff;
  285. font-size: 30px;
  286. cursor: pointer;
  287. }
  288. button.search_submit{
  289. width: 5%;
  290. background: transparent;
  291. border: 0px solid #fff;
  292. height: 44px;
  293. font-size: 20px;
  294. cursor: pointer;
  295. -webkit-transition: all .5s;
  296. transition: all .5s;
  297. }
  298. button.search_submit:hover, button.search_submit:focus {
  299. outline: 0;
  300. color: red;
  301. }
  302.  
  303. jQuery কমান্ডঃ
  304. =============
  305. // jQuery For Custom Search Box
  306. $(document).ready(function() {
  307. $('button#search_btn').on('click', function() {
  308. $(this).toggleClass('change').parents('div.main_menu_area').find('div.search_box_area').fadeToggle(500);
  309. });
  310. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!