Cách tạo menu đa cấp bằng HTML-CSS – Phần 2

Posted on by adminChuyên mục:Kiến thức Internet
Bấm SUBSCRIBE ngay để theo dõi video mới trên youtube :Menu đa cấp được sử dụng rất nhiều trong những website, nó mang lại sự tiện nghi cho việc hiển thị những mạng lưới hệ thống có đa hạng mục. Trong bài này hocweb123 hướng dẫn những bạn tạo menu đa cấp bằng HTML-CSS một cách tiện nghi dễ hiễu nhất .
Phần 1 : http://hocweb123.com/cach-tao-menu-da-cap-bang-html-css-phan-1.html

Xây dựng menu đa cấp bằng html css

Cấu trúc thư mục

— css
— images
— index.html

Nội dung code HTML 


    
        Tạo menu đa cấp(>3cấp)
        
        
        
    
    
        

            
            

            

                

                    

                        
HOCWEB123.COM

                        Cách tạo menu đa cấp bằng html css

 

Code Css của menu đa cấp

*{ margin: 0px; padding: 0px;}
a{ text-decoration: none; color: #888;}
ul li{ list-style: none;}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    clear: both;
    display: block;
}
body{ font-family: arial; font-size: 13px; }

.wrapper_container{
    width: 960px;
    margin: 0px auto;
}

/*this is style header*/
#head{ background: #f4f4f4;}
#logo, #main_menu{ float: left;}
#logo img{height: 42px;
margin-top: 5px;}
#search{ float: right;}

#main_menu>li{ float: left; border-right: 1px solid #E8E8E8;}
#main_menu>li:last-child{ border-right: none;}
#main_menu li{ position: relative;}
#main_menu>li a{display: block; text-transform: none; padding: 10px;}
#main_menu>li>a{ text-transform: uppercase;}
#main_menu>li>a{ display: block; padding: 20px;}

#main_menu li .sub_menu{ position: absolute; display: none;
width: 200px;
background: #f5f5f5;
top: 0px;
left: 100%;
}
#main_menu li:hover>.sub_menu { display: block;}
#main_menu>li>.sub_menu{top: 55px;position: absolute;
left: 0px;}
#main_menu li:hover{ background: #fcfcfc;}

#search input[type='text']{width: 139px;
margin-top: 14px;
padding: 5px;
outline: none;
background: #EFEFEF;
background: url(../images/search.png) no-repeat 106px 2px;
border: none;
background-size: 28px;}


/*this is style main_content*/
#main_content { min-height: 450px;}
#main_content .info_page p{ text-align: center; text-transform: uppercase; }
#main_content .info_page p:first-child{ font-size: 35px;
color: #f00;
margin-top: 40px;
margin-bottom: 7px;}
#main_content .info_page p:last-child{ color: #E48585;}


/*this is style footer*/
#footer{  background: #f9f9f9;
padding: 20px 0px;
color: #A6A6A6;
line-height: 20px;
}
#footer .info p:first-child{ text-transform: uppercase;}

Kết luận

Vậy là tất cả chúng ta cùng nhau đi hết 2 phần hướng dẫn làm menu đa cấp. Trong bài này những bạn cần có tư duy nghiên cứu và phân tích trường hợp tốt để đưa ra những style hài hòa và hợp lý hoàn toàn có thể kiến thiết xây dựng menu dạng n cấp .
Bạn hoàn toàn có thể xem phần 1 tại đây : http://hocweb123.com/cach-tao-menu-da-cap-bang-html-css-phan-1.html

admin