Làm thế nào để có công việc lập trình web chỉ sau 90 ngày học tại nhà? BẤM VÀO ĐÂY XEM MIỄN PHÍ

Bấm SUBSCRIBE ngay để theo dõi video mới trên youtube:

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

Menu đa cấp được sử dụng rất nhiều trong các website, nó mang lại sự tiện lợi cho việc hiển thị các hệ thống có đa danh mục. Trong bài này hocweb123 hướng dẫn các bạn tạo menu đa cấp bằng HTML-CSS một cách tiện lợi 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 

<html>
    <head>
        <title>Tạo menu đa cấp(>3cấp)</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="head" class="clearfix">
                <div class="wrapper_container">
                    <div id="logo">
                        <a href="">
                            <img src="images/logo.png">
                        </a>
                    </div>
                    <ul id="main_menu">
                        <li><a href="">Máy tỉnh bảng</a></li>
                        <li>
                            <a href="">Điện thoại</a>
                            <ul class="sub_menu">
                                <li><a href="">Samsung</a>
                                    <ul class="sub_menu">
                                        <li><a href="">Glaxy Win</a></li>
                                        <li><a href="">Note 1</a>
                                            <ul class="sub_menu">
                                                <li><a href="">Glaxy Win</a></li>
                                                <li><a href="">Note 1</a></li>
                                                <li><a href="">Note 2</a></li>
                                                <li><a href="">Glaxy Trend</a>
                                                    <ul class="sub_menu">
                                                        <li><a href="">Glaxy Win</a></li>
                                                        <li><a href="">Note 1</a></li>
                                                        <li><a href="">Note 2</a></li>
                                                        <li><a href="">Glaxy Trend</a></li>
                                                        <li><a href="">Glaxy V</a></li>
                                                    </ul></li>
                                                <li><a href="">Glaxy V</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="">Note 2</a></li>
                                        <li><a href="">Glaxy Trend</a></li>
                                        <li><a href="">Glaxy V</a></li>
                                    </ul>
                                </li>
                                <li><a href="">Asus</a></li>
                                <li><a href="">Lenove</a></li>
                                <li><a href="">Apple</a></li>
                                <li><a href="">Oppo</a></li>
                            </ul>
                        </li>
                        <li><a href="">Tablet</a></li>
                        <li><a href="">Latop</a></li>
                        <li><a href="">App/game</a></li>
                        <li><a href="">Tin tức</a></li>
                        <li><a href="">Khuyến mãi</a></li>
                    </ul>
                    <form id="search">
                        <input type="text" name="s" placeholder="Tìm kiếm">
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
            <div id="main_content">
                <div class="wrapper_container">
                    <div class="info_page">
                        <p class="website">HOCWEB123.COM</p>
                        <p class="tuts_name">Cách tạo menu đa cấp bằng html css</p>
                    </div>
                </div>
            </div>
            <div id="footer">
                <div class="wrapper_container">
                    <div class="info">
                        <p>HOCWEB123 - Đào tạo lập trình thực tế</p>
                        <p>Địa chỉ: Phú Đô-Nam Từ Liêm-Hà Nội</p>
                        <p>Tel:0988-859-692</p>
                        <p>Email:phancuong.qt@gmail.com</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

 

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à 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 các bạn cần có tư duy phân tích tình huống tốt để đưa ra các style hợp lý có thể xây dựng menu dạng n cấp. 

Bạn có thể xem phần 1 tại đây: http://hocweb123.com/cach-tao-menu-da-cap-bang-html-css-phan-1.html

Url Link

http://hocweb123.com/cach-tao-menu-da-cap-bang-html-css-phan-2.html

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