kết quả từ 1 tới 5 trên 5

Tạo dropdown menu đơn giản với CSS và HTML

  1. #1
    Ðến Từ
    TP. Hồ Chí Minh
    Thành Viên Thứ: 253607
    Bài gửi
    5

    Tạo dropdown menu đơn giản với CSS và HTML

    Nội dung file html. Nếu bỏ vào file html của các bạn thì copy nội dung của <div class="main_menu">

    <!DOCTYPE html>

    <html>
    <head>
    <title>Tạo menu bằng html và css</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
    <div class="wrapper">
    <div class="main_menu">
    <ul>
    <li><a href="">Trang chủ</a></li>
    <li><a href="">Giới thiệu</a></li>
    <li><a href="">Sản phẩm</a>
    <ul>
    <li><a href="">Menu con 1</a></li>
    <li><a href="">Menu con 2</a></li>
    <li><a href="">Menu con 3</a></li>
    <li><a href="">Menu con 4</a></li>
    <li><a href="">Menu con 5</a></li>
    </ul>
    </li>
    <li><a href="">Tin tức</a></li>
    <li><a href="">Giỏ hàng</a></li>
    <li><a href="">Liên hệ</a></li>
    <li><a href="">Tin tức</a></li>
    <li><a href="">Giỏ hàng</a></li>
    <li><a href="">Liên hệ</a></li>
    </ul>
    <div class="clear"></div>
    </div>
    </div>
    </body>
    </html>

    Nội dung file css
    * { margin: 0px; padding: 0px;}
    li{ list-style: none;}
    a{text-decoration: none;color: #FFF;font-size: 16px;}
    .clear{ clear: both;}
    .wrapper{ width: 960px; height: 500px; background: #F8F8F8; margin: 0px auto; }
    .main_menu{ background: #00A69B; margin-top: 30px;}
    .main_menu>ul>li{ float: left;padding: 11px 27px; position: relative; border-right: 1px dotted #ACACAC;}
    .main_menu>ul>li:last-child{ border-right: none;}
    .main_menu>ul>li>ul{ display: none; position: absolute; background: #00A69B;top: 41px;width: 198px; left: 0px;}
    .main_menu>ul>li:hover ul{ display: block;}
    .main_menu ul li:hover{ background: #5F5C5C; transition: all 0.25s;}
    .main_menu>ul>li>ul>li{ padding: 5px 10px;}
    .main_menu>ul>li>ul>li{ border-bottom: 1pxdotted#ACACAC;}

    Quick reply to this message Trả lời       

  2. #2
    Ðến Từ
    TP. Hồ Chí Minh
    Thành Viên Thứ: 255868
    Giới tính: Nam
    Bài gửi
    1

    Reply: Tạo dropdown menu đơn giản với CSS và HTML

    Menu bây giờ dùng jquery làm đẹp hơn

  3. #3
    Ðến Từ
    TP. Hồ Chí Minh
    Thành Viên Thứ: 253607
    Bài gửi
    5

    Reply: Tạo dropdown menu đơn giản với CSS và HTML

    Dùng jquery thì đẹp nhưng nặng hơn. Nói chung thích đơn giản và nhẹ thì dùng css là tốt rồi

  4. #4
    Ðến Từ
    Hà Nội
    Thành Viên Thứ: 247344
    Giới tính: Nữ
    Bài gửi
    10.192

    Reply: Tạo dropdown menu đơn giản với CSS và HTML

    giờ đa số dùng jQuery rồi, nói chung cũng không nặng lắm đâu
    Thực sự thì mình chưa thấy ai lại hiền lành, dễ thương và tốt bụng như bạn Khách vậy

  5. Đã cảm ơn VSupport:


  6. #5
    Ðến Từ
    TP. Hồ Chí Minh
    Thành Viên Thứ: 253607
    Bài gửi
    5

    Reply: Tạo dropdown menu đơn giản với CSS và HTML

    Bác nói thế thì em cũng chịu thua. . Mà em không nhầm thì vforum.vn cũng sử dụng hiệu ứng css cho menu trên thôi kìa.

Nhãn