Tất cả bài viết | Bootstrap

Hướng dẫn thiết kế hộp tìm kiếm theo danh mục sản phẩm

Trong bài học lập trình web này các Bạn sẽ được Hướng dẫn thiết kế hộp tìm kiếm theo danh mục sản phẩm cho website

Bước 1: Tạo cấu trúc HTML

 
 
   
    
    Tìm kiếm sản phẩm 
    		 
      
       
        
        
        Điện tử
         
        Thời trang nữ
         
        Thời trang nam
         
        Nhà cửa và đời sống
         
         
        Tất cả

Bước 2: Tạo cấu trúc CSS

body{    
margin-top:20px;
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY

Bước 5: Xử lý chọn danh mục sản phẩm bằng JQUERY

$(document).ready(function(e){    
$('.search-panel .dropdown-menu').find('a').click(function(e) {	
	e.preventDefault();	
	var param = $(this).attr("href").replace("#","");	
	var concept = $(this).text();	
	$('.search-panel span#search_concept').text(concept);	
	$('.input-group #search_param').val(param);	
});
});

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất