Lamweb.vn
  • Trang Chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web
Trang chủ Khóa học làm Web

Cách tạo menu xổ dọc trong HTML mới nhất 2020

ATPMedia Bởi ATPMedia
21/04/2020
Trong Khóa học làm Web, Kiến thức Website
0
Cách Tạo Menu Xổ Dọc Trong Html
0
Chia Sẻ
11.4k
Lượt Xem
Share on FacebookShare on Twitter

Menu xổ dọc là một trong những menu hay được mọi người sử dụng khi làm website ưu điểm nó sẽ ít chiếm diện tích của trang. Để biết cách tạo menu xổ dọc trong HTML thì cũng khá là đơn giản các bạn có thể làm theo hướng dẫn của bài viết này để biết được cách tạo menu xổ dọc trong HTML. Trong bài viết này, lamweb.vn sẽ viết bài viết  Cách tạo menu xổ dọc trong html mới nhất 2020.

Cách Tạo Menu Xổ Dọc Trong Html

Cách tạo menu xổ dọc trong html mới nhất 2020

Mặc dù menu ngang vẫn được dùng nhiều hơn nhưng ngoài ra mình biết có rất nhiều bạn vẫn mong muốn làm các menu hiển thị kiểu dọc. Nên ở bài này mình sẽ tut qua cho các bạn một kỹ thuật để tạo thực đơn dọc không khó khăn nhưng luôn luôn đẹp đẽ.

Về mẹo tạo thực đơn dọc thì chúng ta có thể làm như tạo menu ngang, đó là tạo một cái danh mục với

  • Rồi xóa list-style-type cho các thẻ
  • Bên trong là được chứ không cần làm nhiều bước giống như khi sử dụng thực đơn ngang.

    Tạo menu dọc cơ bản

    Ban đầu mình sẽ có một danh sách menu như sau:

    01
    02
    03
    04
    05
    06
    07
    08
    <div id="menu">
    <ul>
    <li><a href="#">Trang chủa>li>
    <li><a href="#">Tin tứca>li>
    <li><a href="#">Sản phẩma>li>
    <li><a href="#">Liên hệa>li>
    ul>
    div>

    Trước tiên là thêm CSS cho #menu ul để thêm màu nền này nọ một xíu cho đẹp, và nhất là bỏ đi mấy cái dấu chấm đầu định dạng của danh sách..

    01
    02
    03
    04
    05
    06
    07
    #menu ul
    background: #8AD385;
    width: 250px;
    padding: 0;
    list-style-type: none;
    text-align: left;

    Sau đó viết CSS cho các thẻ

  • Để thêm chiều cao cho nó với height và thêm line-height bằng với chiều cao để nó đứng giữa block.
    01
    02
    03
    04
    05
    06
    07
    #menu li
    width: tự động;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 1em;

    Cuối cùng là vạch CSS cho thẻ a bên trong thực đơn, chuyển nó qua thành block và thêm các phong cách quan trọng, cùng lúc tạo thêm hiệu ứng background khác khi rê chuột vào mục menu.

    01
    02
    03
    04
    05
    06
    07
    08
    09
    #menu li a
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block;
    #menu li:hover
    background: #CDE2CD;

    Kết quả ta có thế này:

    Tạo thực đơn dọc có đổ xuống (dropdown)

    Để tránh việc sử dụng đến jQuery trong serie CSS cơ bản này nên mình sẽ tut bạn làm một thực đơn dọc có đổ xuống nhưng k có hiệu ứng mà là nó sẽ xổ ra bên phải của menu mẹ khi rê chuột vào.

    Ngày nay bạn hãy sử dụng lại cái thực đơn dễ dàng phía trên và bổ sung các menu con vào như thế này:

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    <div id="menu">
    <ul>
    <li><a href="#">Trang chủa>li>
    <li><a href="#">Tin tứca>
    <ul class="sub-menu">
    <li><a href="#">WordPressa>li>
    <li><a href="#"><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEOa>a>li>
    <li><a href="#">Hostinga>li>
    ul>
    li>
    <li><a href="#">Sản phẩma>li>
    <li><a href="#">Liên hệa>li>
    ul>
    div>

    Và sử dụng lại CSS ở phần trên:

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    body
    font-family: sans-serif;
    font-size: 15px;
    #menu ul
    background: #8AD385;
    width: 250px;
    padding: 0;
    list-style-type: none;
    text-align: left;
    #menu li
    width: auto;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 1em;
    #menu li a
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block;
    #menu li:hover
    background: #CDE2CD;

    Bây giờ bạn đủ sức thấy các thực đơn con trong mục Tin tức bị lỗi hiển thị, nên chúng ta sẽ vạch thêm CSS cho nó giống như sau.

    Trước nhất là bạn hãy mang thằng #menu li về hiển thị kiểurelative.

    01
    02
    03
    #menu ul li
    position: relative;

    Và chuyển #menu .sub-menu (menu cấp 2) về dạng absolute rồi chỉnh vị trí hiển thị của nó thụt sang bên phải là 250px (bằng với chiều rộng menu), cùng lúc mang nó về sát mép top của phần tử mẹ.

    01
    02
    03
    04
    05
    #menu .sub-menu
    position: absolute;
    left: 250px;
    top: 0;

    Hiệu quả là bây giờ nó vừa mới thụt qua một bên rồi.

    menu-doc-co-ban-02
  • Ảnh này chưa có thuộc tính top: 0

    >>> Hướng dẫn cách tạo menu bán hàng trong word đơn giản nhất 2020

    Hiện nay chỉ cần viết thêm CSS để .sub-menu ẩn đi và hiện ra khi rê chuột vào #menu li có chứa .sub-menu nhé.

    01
    02
    03
    04
    05
    06
    07
    08
    09
    #menu .sub-menu
    position: absolute;
    left: 250px;
    top: 0;
    display: none;
    #menu li:hover .sub-menu
    display: block;

    IFrame

    Và mình xin nói thêm là đó chỉ là một thực đơn dễ dàng thôi nhưng bạn muốn làm các menu đẹp hơn thì phải rõ phương pháp sử dụng một menu đơn giản giống như vậy, rồi sau này bạn đủ sức xem qua thêm một số tutorial trên mạng để sử dụng theo.

    Xem thêm: Hướng dẫn cách làm menu thực đơn sáng tạo nhất 2020

Nguồn : https://thachpham.com

Tags: cách tạo menu trong phpcách tạo menu xổ dọc trong htmlcode menu dọc đẹpcode menu htmlmenu dọc css đẹptạo menu 2 cấp htmltạo menu dọc bootstraptạo menu dropdown bằng csstạo menu xổ xuống trong wordpress
Bài Viết Trước

Tổng hợp những nghề dễ làm giàu mới nhất 2020

Bài Viết Tiếp Theo

Cách đăng bài trên wordpress mới nhất 2020

Bài Viết Tiếp Theo
Cách đăng Bài Trên Wordpress

Cách đăng bài trên wordpress mới nhất 2020

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

  • Nổi Bật
  • Bình Luận
  • Mới Nhất
cách chỉnh ảnh bìa riêng tư trên Facebook

Hướng dẫn cách chỉnh ảnh bìa riêng tư trên Facebook mới nhất 2021

27/04/2021
khoa-binh-luan-facebook-1

Hướng dẫn các cách khóa bình luận trên facebook mới nhất 2021

09/10/2021
id facebook

Hướng dẫn các cách tìm email qua id facebook mới nhất 2022

11/12/2021
tải office 365

Hướng dẫn cài đặt Office 365 Free mới nhất 2022

11/12/2021
Huong Dan Cach Lam Mot Blog Ca Nhan Moi Nhat 2020 1862

Hướng dẫn cách làm một blog cá nhân mới nhất 2020

1
Hướng Dẫn Cách Tạo Web Miễn Phí Trên Google Mới Nhất 2020

Hướng dẫn cách tạo web miễn phí trên google mới nhất 2021

1
Top 5 plugin chống copy wordpress cho nhà phát triển website

Top 5 plugin chống copy wordpress cho nhà phát triển website

0
Thị phần là gì? Tổng quan về những thông tin của thị phần đối với doanh nghiệp

Thị phần là gì? Tổng quan về những thông tin của thị phần đối với doanh nghiệp

0
Thị phần là gì? Tổng quan về những thông tin của thị phần đối với doanh nghiệp

Thị phần là gì? Tổng quan về những thông tin của thị phần đối với doanh nghiệp

31/07/2022
Máy bơm định lượng là gì? Nguyên lý hoạt động của bơm định lượng

Máy bơm định lượng là gì? Nguyên lý hoạt động của bơm định lượng

18/07/2022
Hiệu quả giảm béo tại Pasteur kéo dài bao lâu, có tốt hay không

Hiệu quả giảm béo tại Pasteur kéo dài bao lâu, có tốt hay không

19/07/2022
TOP Website Affiliate ưa chuộng tại Việt Nam

TOP Website Affiliate ưa chuộng tại Việt Nam hiện nay

01/07/2022
Swadleyroofsystems
Thương hiệu tài trợ
Trang thông tin doanh nghiệp ATP Holdings. ATP Media - Giải pháp truyền thông online Mua Bán Website và Domain đẹp - Kho Tên Miền Thiết Kế Web Trọn Gói, Chuẩn Seo, Tư Vấn Tối Ưu Site Miễn Phí. ATP LINK - Nền Tảng Tạo Bio Link, Bio Page Miễn Phíp Tuyensi.vn - Nguồn hàng sỉ tốt nhất Việt Nam SimpleShop – Tạo Web Shop, Tích Hợp Quản Lý Đơn, Giao Vận & Thanh Toán Online ATPCare - Giải pháp bán hàng đa nền tảng trên facebook marketing ATP Software - Giải pháp marketing đa kênh phần mềm facebook, zalo, instagram Tạo CV Online, Tìm Việc Làm Nhanh, Tuyển Dụng Hiệu Quả Miễn Phí. ATP Academy - Nền tảng khóa học nghề Marketing. Simplepage.vn - Dịch vụ thiết kế landing page chuyên nghiệp Bảng Xếp Hạng Top Chủ Đề Tốt Nhất | Giúp Bạn Đọc So Sánh & Đánh Giá ATP Land - Sàn môi giới bất động sản thứ cấp Top 1 Việt Nam
  • Asset 2mobile HOTLINE TƯ VẤN MIỄN PHÍ
0707.6666.56

Để lại số điện thoại để nhận tư vấn miễn phí từ chúng tôi.

XÂY DỰNG NGÔI NHÀ ONLINE CÙNG ATPWEB

  • Trang Chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web
Menu
  • Trang Chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web
THÔNG TIN
  • Giải pháp truyền thông
  • Phần mềm quản lý Fanpage
  • Kiến thức Website
  • Nhạc Hot
  • Thế giới voucher
  • Tải Office 365
PHẦN MỀM CÔNG CỤ
  • Tìm việc làm
  • Phần mềm erp
  • Khóa học miễn phí
  • Tạo cv online miễn phí
  • Phát live stream miễn phí
  • Quản lý fanpage miễn phí
  • Thiết kế website theo mẫu
LIÊN KẾT
  • Top chủ đề
  • Chợ cư dân
  • Kinh doanh gì
  • Thiết kế website trọn gói
  • Học kinh doanh miễn phí
  • Đánh giá dự án bất động sản
  • Dịch vụ chăm sóc website
  • Dịch vụ viết content
DỊCH VỤ
  • Kiến thức về nghề Content
  • Thiết kế website Blog cá nhân
  • Thiết kế webiste thực phẩm organic
  • Thiế kế website bán hàng công nghệ
  • Thiết kế website Spa - Thẩm mỹ viện
  • Thiết kế website tin tức - báo trực tuyến

© 2019 | ATP Media | Liên Hệ Hợp Tác

DMCA.com Protection Status
  • Trang Chủ
  • Kiến thức Website
  • Khóa học làm Web
  • Làm Web căn bản
  • Plugin căn bản
  • Check chỉ số Web

Đăng ký tư vấn

(Anh/chị vui lòng nhập đúng định dạng số điện thoại đang sử dụng)

Nhân viên ATP sẽ liên lạc hỗ trợ anh/chị trong ít phút nữa