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

  • zoom in
  • zoom out
  • text align left
  • text align center
  • text align right
  • Chỉnh màu chữ
  • Làm đậm

Hướng dẫn cách tạo Menu dọc theo chuẩn RWD

Hướng dẫn cách tạo Menu dọc theo chuẩn RWD (Responsive Web Design)

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum interdum orci in finibus. Cras eu ante condimentum, efficitur libero vitae, rhoncus eros. Curabitur a auctor sem, ac porta metus. Ut volutpat eu neque nec mattis. Nullam viverra sem vitae diam sollicitudin pulvinar. Ut elementum urna non mollis eleifend. Cras maximus rhoncus lacus, vitae pellentesque nunc sodales a. Donec blandit nec odio sit amet porttitor.

Phần định nghĩa HTML cho cấu trúc menu
 
 
Phần định nghĩa HTML cho phần header của trang web
 
 

ADMIN CONTROL PANEL

Phần định nghĩa CSS cho nội dung trang web
 html {  font-size: 16px;}

body {  
   margin: 0;  
   font-family: "Roboto", sans-serif;  
   font-size: 0.875rem;  
   line-height: 1.42857143;  
   color: #333;
}


header {  
position: relative;  
z-index: 999;
  
width: 100%;  
height: 54px;
  
background: #eee;  
box-shadow: rgba(0, 0, 0, 0.5) 0 -20px 20px 20px;
}


header h1 {  
margin: 0;  
padding: 0 10px;  
height: 54px;  
line-height: 54px;  
font-weight: 400;  
font-size: 18px;  
float: left;
}

header h2 {  
margin: 0;  
padding: 0 10px;  
height: 54px;  
line-height: 54px;  
font-weight: 400;  
font-size: 22px;  
float: right;
}


.wrapper {  
padding: 15px 30px;  
transition: all 0.3s ease-out;
}


.clearfix:after {  
content: "";  
display: block;  
clear: both;
}


@media (min-width: 768px) {
}

@media (min-width: 992px) {
  
body {    
overflow-y: scroll;  
}
  
.logo img {    
width: 200px;    
text-align: center;    
margin-top: 10px;    
float: none;  
}
  

.wrapper {    
margin-left: 200px;  
}
  

.wrapper__minify {    
margin-left: 50px;  
}

}
Phần định nghĩa CSS cho Menu
.vertical_nav, .collapse_menu .collapse_menu--icon {  
-moz-transition: all 0.3s ease-out;  
-webkit-transition: all 0.3s ease-out;  
transition: all 0.3s ease-out; 
}


* {  box-sizing: border-box; }

:focus,:active {  outline: none; }



.toggle_menu {  
display: block;  
float: left;  
width: 50px;  
height: 50px;  
line-height: 50px;  
padding: 0; 
 background: none;  
border: 0;  
text-align: center;  
cursor: pointer; 
}   

.toggle_menu i {    
display: block;    
font-size: 28px; 
}



.vertical_nav {  
position: absolute;  
left: -200px;  
top: 50px;  
bottom: 0px;  
width: 200px;  
background: #f6f6f6; 
}



.vertical_nav__closed {  
left: -200px !important; 
}


.vertical_nav__opened {  
left: 0px !important;  
box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px 30px; 
}



.menu {  
position: absolute;  
top: 20px;  
bottom: 40px;  
overflow-y: auto;  
width: 100%;  
margin: 0;  
padding: 0;  
list-style-type: none; 
}



.menu--item {  
position: relative;  
min-height: 40px;  
line-height: 40px; 
}



.menu--item__has_sub_menu .menu--link:after {  
position: absolute;  
top: 0;  
right: 15px;  
height: 40px;  
line-height: 40px;  
font-family: "FontAwesome";  
content: "\f0d7"; 
}



.menu--subitens__opened {  
background: #e9e9e9; 
}   

.menu--subitens__opened .menu--link {    
color: #000; 
}   

.menu--subitens__opened .sub_menu {    
display: block; 
}



.menu--link {  
display: block;  
overflow: hidden;  
font-size: 0.875rem;  
text-decoration: none;  
color: #666;  
font-weight: 400;  
white-space: nowrap;  
cursor: pointer; 
}   

.menu--link:hover, .menu--link:hover .menu--label {    
color: #000;    
background: #dddddd; 
}



.menu--icon {  
display: block;  
float: left;  
width: 50px;  
height: 40px;  
line-height: 40px;  
font-size: 20px; 
}



.menu--label {  
display: block;  
height: 40px;  
line-height: 40px; 
}



.sub_menu {  
display: none;  
overflow: hidden;  
padding-left: 0;  
list-style: none; 
}



.sub_menu--link {  
display: block;  
padding-left: 50px;  
padding-right: 16px;  
font-size: 0.875rem;  
color: #666;  
text-decoration: none; 
}    

.sub_menu--link:hover {    
color: #000;    
background: #dddddd; 
}



.sub_menu--link__active {  
color: #000;  
font-weight: 500; 
}



.collapse_menu {  
display: none; 
}


@media (min-width: 992px) {   
.vertical_nav {    left: 0; }
   
.toggle_menu {    display: none; } 
.vertical_nav__minify {    width: 50px; }      
.vertical_nav__minify 
.menu {      overflow: visible; }       
.vertical_nav__minify .menu--label {      
display: none;     
 position: absolute;      
top: 0;      
left: 50px;     
width: 150px;      
padding-left: 16px;      
padding-right: 16px;      
background: #e9e9e9;      
font-weight: 500; 
}       

.vertical_nav__minify .menu--item__has_sub_menu .menu--link:after {      
content: ""; 
}     

.vertical_nav__minify .menu--subitens__opened .menu--label,    .vertical_nav__minify .menu--subitens__opened .sub_menu {      
display: block; 
}       

.vertical_nav__minify .sub_menu {      
position: absolute;      
top: 40px;      
left: 50px;      
width: 150px;     
background: #e9e9e9; 
}       

.vertical_nav__minify 
.sub_menu--link {      
padding-left: 16px; 
}       

.vertical_nav__minify .collapse_menu--icon {      
-webkit-transform: rotate(180deg); 
}
   

.collapse_menu {    
position: absolute;    
bottom: 0px;    
display: block;    
width: 100%;    
height: 40px;    
line-height: 40px;    
padding: 0;    
border: 0;    
border-top: 1px solid #e6e6e6;    
background: #f6f6f6;    
color: #666;    
font-size: 0.875rem;    
text-align: left;    cursor: pointer; 
}      

.collapse_menu:hover {      
color: #000;      
background: #dddddd; 
}       
.collapse_menu .collapse_menu--icon {      
display: block;      
float: left;      
width: 50px;      
height: 40px;      
line-height: 40px;      
font-size: 20px; 
}
.collapse_menu .collapse_menu--icon:before {        
content: "\f053"; 
}     

.collapse_menu .collapse_menu--label {      
display: block;      
height: 40px;      
line-height: 40px; 
} 
}
Phần định nghĩa JQUERY xử lý menu
'use strict';


var tid = setInterval( function () {  
if ( document.readyState !== 'complete' ) return;  
clearInterval( tid );

  
var querySelector = document.querySelector.bind(document);
  
var nav = document.querySelector('.vertical_nav');  
var wrapper = document.querySelector('.wrapper');
  
var menu = document.getElementById("js-menu");  
var subnavs = menu.querySelectorAll('.menu--item__has_sub_menu');

  

querySelector('.toggle_menu').onclick = function () {
    
nav.classList.toggle('vertical_nav__opened');
    
wrapper.classList.toggle('toggle-content');
  };

  

querySelector('.collapse_menu').onclick = function () {
   
 nav.classList.toggle('vertical_nav__minify');
    
wrapper.classList.toggle('wrapper__minify');
    
for (var j = 0; j < subnavs.length; j++) {
      
subnavs[j].classList.remove('menu--subitens__opened');
    
}
  
};

 

for (var i = 0; i < subnavs.length; i++) {
    
if (subnavs[i].classList.contains('menu--item__has_sub_menu') ) {
      
subnavs[i].addEventListener('click', function (e) {
        
e.preventDefault();
        
for (var j = 0; j < subnavs.length; j++) {
          
if(this != subnavs[j])            
subnavs[j].classList.remove('menu--subitens__opened');
        
}
        

this.classList.toggle('menu--subitens__opened');
      
}, false);
    
}  
}


}, 100 );
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
Bạn có thể quan tâm

Tạo hiệu ứng phóng to sản phẩm Học lập trình web

Hướng dẫn cách tạo Slide bài viết bằng Jquery Học lập trình web

Hướng dẫn tạo Slidebox quảng cáo bằng Jquery Học lập trình web

Hướng dẫn tạo menu dọc cho website Học lập trình web

Cách tạo chức năng xem thêm bằng Jquery Học lập trình web

Hướng dẫn tạo Marquee bằng Jquery Học lập trình web

Hướng dẫn cách tạo hiệu ứng chữ cầu vòng Học lập trình web

Hướng dẫn tạo chữ lật bằng JQUERY Học lập trình web

Hướng dẫn sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web Học lập trình web

Hướng dẫn tạo cửa sổ Popup đơn giản bằng JQUERY Học lập trình web