Tất cả bài viết | Lập trình Jquery

Hướng dẫn tạo menu Slide In & Slide Out dùng HTML,CSS,JQUERY

Hướng dẫn tạo menu Slide In & Slide Out dùng HTML, CSS, & JQUERY

Phần HTML định nghĩa cấu trúc của menu

 
  
    Menu 
   
 
  
  Trang chủ
   
  Giới thiệu
   
  Sản phẩm
   
  Dịch vụ
   
  Tin tức
   
  Liên hệ

Phần HTML định nghĩa nội dung trang web

 
  
  Hướng dẫn tạo menu Slide In & Slide Out dùng HTML,CSS,JQUERY 
  
 
  
 
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể  
   hocwebgiare.com nơi đào tạo thiết kế web chuyên sâu với chất lượng được cam kết cụ thể

Phần JQUERY dùng để hiện/ẩn menu

Phần CSS định nghĩa giao diện cho menu

body{	
  background-color: #A5E2E5;	
  margin: 0px auto;	
  padding: 0px;
 }
#menu{  
background-color:#1037EF;  
width:100%;  
height:40px;  
line-height:40px;  
color:white;  
font-family:helvetica;  
font-size:25px;  
padding-left:10px;  
box-sizing:border-box;
}
#menu_button{  
width:auto;  
cursor:pointer;
}

ul{	
display: none;	
padding: 0px;	
margin: 0px;	
width: 240px;	
height: 90%;	
background-color: #3639F0;	
position: absolute;	
box-shadow: inset 0px 0px 50px 0px #1DD1EF;
}

li{  
  border-bottom:1px solid #08F5DB;
}
li:hover{  
width:240;  
background-color:#F7A202;  
box-shadow:inset 0px 0px 50px 0px #F4E408;  
-webkit-transition: all 300ms linear;  
-ms-transition: all 300ms linear;  
transition: all 300ms linear;  
border-right:1px solid #FC070F;
}

li a{  
height:40px;  
line-height:40px;  
display:block;  
color:#FFFFFF;  
text-decoration:none;  
font-size:18px;  
font-family: Arial;  
padding-left:10px;
}

li:hover a{  
padding-left:25px;  
color:white;  
-webkit-transition: all 200ms linear;  
-ms-transition: all 200ms linear;  
transition: all 200ms linear;
}

#content{  
margin-top:10px;  
text-align:center;  
font-family: Arial;
}

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