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 1

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 2: http://hocweb123.com/cach-tao-menu-da-cap-bang-html-css-phan-2.html

Cấu trúc thư mục

--css

--images

--index.html

<p style="text-align:center"><img alt="" src="/uploads/images/Html-css/huong_dan_tao_menu_da_cap_hocweb123.png" /><em>X&acirc;y dựng menu đa cấp bằng html css</em></p>

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

Trong phần này chúng ta đã hoàn thành việc xây dựng code html và style menu cấp 1 thành công. Ở phần tiếp chúng ta cùng nhau phân tích và hoàn thành menu đa cấp.

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

 

Url Link

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

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