Thực hành Css Web – 112 – KỸ THUẬT TẠO MENU DỌC CƠ BẢN Mặc dù menu ngang vẫn được sử dụng nhiều hơn – StuDocu

KỸ THUẬT TẠO MENU DỌC CƠ BẢN

Mặc dù menu ngang vẫn được sử dụng nhiều hơn nhưng bên cạnh đó mình biết có
rất nhiều bạn vẫn muốn làm các menu hiển thị kiểu dọc. Nên ở bài này mình sẽ
hướng dẫn qua cho các bạn một kỹ thuật để tạo menu dọc đơn giản nhưng vẫn
đẹp mắt.
Về cách tạo menu dọc thì chúng ta có thể làm giống như tạo menu ngang, đó là
tạo một cái danh sách với <ul> rồi xóa list-style-type cho các thẻ <li> bên trong là
được chứ không cần làm nhiều bước như khi làm menu ngang.

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

Ban đầu mình sẽ có một danh sách menu như sau:
[html]
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Tin tức</a></li>
<li><a href=”#”>Sản phẩm</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div>
[/html]
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 dòng của danh sách..

#menu ul {
background: #8AD385;
width: 250px;
padding: 0;
list-style-type: none;
text-align: left;
}
Sau đó viết CSS cho các thẻ <li> để 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.

#menu li {
width: auto;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e8e8e8;
padding: 0 1em;
}
Cuối cùng là viết CSS cho thẻ a bên trong menu, chuyển nó qua thành block và
thêm các style cần thiết, đồng thời tạo thêm hiệu ứng background khác khi rê
chuột vào mục menu.

#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:
[codepen id=”myNbod”]

Tạo menu 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ẽ hướng
dẫn bạn làm một menu dọc có đổ xuống nhưng không có hiệu ứng mà là nó sẽ xổ
ra bên phải của menu mẹ khi rê chuột vào.
Bây giờ bạn hãy làm lại cái menu đơn giản phía trên và bổ sung các menu con vào
như thế này:
[html highlight=”4-10′′]
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Tin tức</a>
<ul class=”sub-menu”>
<li><a href=”#”>WordPress</a></li>
<li><a href=”#”>SEO</a></li>
<li><a href=”#”>Hosting</a></li>
</ul>
</li>
<li><a href=”#”>Sản phẩm</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div>
[/html]
Và sử dụng lại CSS ở phần trên:
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 có thể thấy các menu con trong mục Tin tức bị lỗi hiển thị, nên chúng
ta sẽ viết thêm CSS cho nó như sau.
Trước tiên là bạn hãy đưa thằng #menu li về hiển thị kiểurelative.

#menu ul li {
position: relative;

KỸ THUẬT TẠO MENU NGANG CƠ BẢN

Cách tạo menu ngang đơn giản
Để tạo menu ngang, chúng ta sẽ sử dụng thẻ <ul> để tạo khu vực menu và <li> để tạo từng mục trong
menu đó. Do vậy, trước tiên chúng ta có đoạn cấu trúc menu bằng HTML như sau, mình sẽ đặt menu
vào trong một cái thẻ <div> với id là #menu.
[html]
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Diễn đàn</a></li>
<li><a href=”#”>Tin tức</a></li>
<li><a href=”#”>Hỏi đáp</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div>
[/html]
Kế tiếp là ta có thêm một đoạn CSS sau để reset CSS cho dễ viết CSS về sau, và thêm một số style cho
toàn trang web như dùng font chữ có chân chẳng hạn.

/==Reset CSS==/

  • {
    margin: 0;
    padding: 0;
    }

/==Style cơ bản cho website==/
body {
font-family: sans-serif;
color: #333;
}
Được rồi, bây giờ chúng ta sẽ tiến hành xử lý cái menu.
Trước tiên là phần bao bọc menu (tức là thẻ <ul> trong #menu), chúng ta sẽ sử dụng thuộc tính list-
style-type để xóa các dấu đầu dòng, thêm màu nền và đưa văn bản bên trong ra giữa cho đẹp nha.

/==Style cho menu===/
#menu ul {
background: #1F568B;
list-style-type: none;
text-align: center;
}
Kết quả ta tạm có như sau:

Kế tiếp, chúng ta sẽ muốn cho các mục con nằm dàng ngang nên sẽ dùng gì nè? Vâng, bạn có thể sử
dụng float: left cho tất cả thẻ <li> hoặc đưa về kiểu hiển thị inline-block.
Lựa chọn 1: Kiểu inline-block (khuyến khích)

#menu li {
color: #f1f1f1;
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: -5px;
}
Lựa chọn 2: Kiểu float

#menu li {
color: #f1f1f1;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
}
Sở dĩ kiểu float mình không có margin-left: -5px là vì cái 5px kia là kiểu display: inline-block nó tự
sinh ra nên phải xóa nó đi bằng cách này.
Nếu float thì nên thêm một vài thuộc tính như sau cho #menu ul.

#menu ul {
background: #1F568B;
list-style-type: none;
overflow: hidden;
width: 100%;
}
Kết quả sau khi làm kiểu Inline.

Và cuối cùng là thêm style cho các thẻ <a> bên trong, quan trọng nhất là sẽ đưa kiểu hiển thị cho các
thẻ này thành block để nó được phủ kín cái #menu ul.

#menu a {
text-decoration: none;
color: #fff;
display: block;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}
Kết quả khi hoàn thành:

####### }

#menu a {
text-decoration: none;
color: #fff;
display: block;
}
#menu a:hover {
background: #F1F1F1;
color: #333;
}
Bây giờ kết quả hiển thị ra là bạn sẽ thấy các menu con của thằng Tin tức bị hiển thị thế này:

Okay, vậy trước tiên, chúng ta cần phải cho .sub-menu ẩn đi cái đã.
/==Dropdown Menu==/
.sub-menu li {
display: none;
}
Bây giờ, chúng ta muốn tùy biến lại cái .sub-menu sẽ hiển thị (nếu có hiển thị) nằm bên ngoài cái
phần #menu ul để nó không bị đẩy lên như vậy. Như bài trước ta đã học rồi, để tùy biến vị trí một phần
tử mà không ảnh hưởng đến các phần tử khác thì sẽ sử dụng thuộc tínhposition. Nhưng mà chúng ta
muốn cái .sub-menu nó phải nằm gần menu mẹ, vậy thì chúng ta phải thiết lập #menu li thành
kiểu relative vì #menu li là các item cấp lớn nhất, mình gọi đó là menu mẹ.
#menu li {
position: relative;
}
Và tiếp theo là cho cái .sub-menu thành kiểu absolute để nó luôn luôn nằm trong phạm vi menu mẹ, tức
là nằm trong #menu li ấy. Chúng ta viết lại đoạn .sub-menu như sau:
.sub-menu {
display: none;
position: absolute;
}
Và cuối cùng, là chúng ta sẽ cho thằng .sub-menu sẽ hiển thị ra khi ta rê chuột vào menu mẹ, như vậy
ta sẽ kết hợp với một pseudo-class là :hover để làm việc này. Để hiển thị ra chúng ta gán display:
block cho nó.
#menu li:hover .sub-menu {
display: block;
}
Đoạn #menu li:hover .sub-menu nghĩa là khi chúng ta rê chuột vào #menu li thì nó sẽ thực hiện các
thay đổi cho .sub-menu.
Thêm một chút CSS cho cái menu con bên trong để nó xóa cái margin không cần thiết đi.

.sub-menu li {
margin-left: 0 !important;
}

THỰC HÀNH TẠO LAYOUT ĐƠN GIẢN

Bắt đầu

Bây giờ bạn hãy tạo một thư mục riêng và copy 昀椀le normalize và thư
mục img vào. Sau đó tạo thêm 昀椀le index (tập tin website) và style (chứa các
CSS của website).

Tạo các thư mục cần thiết
Bây giờ hãy mở 昀椀le index lên và bắt đầu viết HTML cho website nhé.
Việc trước tiên bạn cần viết là hãy viết các thẻ đầu tiên nhất của website bằng
HTML là khai báo loại tập tin, thẻ <html>, cặp <head> và cặp <body>.
[html]
<!DOCTYPE html>
<html lang=”vi”>
<head>
</head>
<body>
</body>
</html>
[/html]

Thêm các thẻ khai báo thông tin

Bây giờ chúng ta sẽ làm từ trên xuống dưới, trước tiên mình sẽ khai báo thông tin
về tài liệu website này như tiêu đề, mô tả và quan trọng nhất là gắn hai tập tin
style và normalize vào để nó đọc CSS trong đó.

Như chúng ta đã học ở phần đầu rồi, chúng ta sẽ có các thẻ sau để khai báo thông
tin cho tài liệu HTML tropng cặp thẻ <head>.
[html highlight=”2-8′′]
<head>
<meta charset=”utf-8″ />
<title>Thach Pham Blog</title>
<meta name=”description” content=”Thực hành tạo layout bằng HTML và CSS cơ
bản” />
<meta name=”author” content=”ThachPham” />
<meta name=”keyword” content=”hoc css,css co ban,css layout” />
<link type=”text/css” rel=”stylesheet” href=”style” />
<link type=”text/css” rel=”stylesheet” href=”normalize” />
</head>
[/html]

Tạo các khu vực trong website

Bây giờ việc quan trọng nhất là bạn phải ước lượng được bố cục của website như
thế nào để tiến hành tạo ra các thẻ <div> tương ứng với từng bố cục, và phải biết

</div><!–#container–>
</body>
[/html]
Lưu ý cho mình một điều là các chỗ mình ghi <!–#xxx–> là các câu lệnh ghi chú
trong HTML để bạn dễ nhìn sau này khi tài liệu có nhiều thẻ <div> chứ nó không có
ý nghĩa gì trên trình duyệt.

Viết nội dung cho từng phần

Tiếp theo là chúng ta sẽ tạo ra các thẻ chứa nội dung cho từng thành phần vì
không ai vừa viết thẻ vừa viết CSS cả mà chỉ nên viết CSS sau khi hoàn thành nội
dung HTML.

Phần #menu

Giống như cách chúng ta tạo menu dọc ở phần trước, menu sẽ được khai báo
bằng một thẻ tạo danh sách như sau trong khu vực #menu.
[html]
<div id=”menu”>
<ul>
<li><a href=”#”>Trang chủ</a></li>
<li><a href=”#”>Dịch vụ</a></li>
<li><a href=”#”>Sản phẩm</a></li>
<li><a href=”#”>Tin tức</a></li>
<li><a href=”#”>Diễn đàn</a></li>
<li><a href=”#”>Liên hệ</a></li>
</ul>
</div><!–END #menu–>
[/html]

Phần #content

Trong phần #content này chúng ta có 3 phần nhỏ nữa là #header, .call-to-
action và .row. Chúng ta sẽ làm từng phần một:

Phần #header

Ở phần này chúng ta sẽ chèn một tấm ảnh tên là tplogo2014 trong thư
mục img/ và một cái slogan như sau:
[html]
<div id=”header”>
<div id=”logo”><img src=”img/tplogo2014″ /></div>
<div id=”slogan”><h3>Học HTML và CSS cơ bản miễn phí</h3></div>
</div><!–#header–>
[/html]

Phần .call-to-action

Phần này chúng ta cũng có một số nội dung đơn giản như sau:

[html]
<div class=”call-to-action”>
<h3>Bạn sẽ được học những gì?</h3>
<p>Nếu bạn là người mới tìm hiểu về website thì serie này sẽ giúp các bạn hình
dung rõ hơn việc làm một giao diện website tĩnh bằng HTML và CSS vì tất cả giao
diện website đều sử dụng HTML & CSS để lên bố cục cho giao diện, giúp bạn tự
làm một giao diện website cho riêng mình.</p>
</div><!–.call-to-action–>
[/html]

Phần .row

Phần này chúng ta sẽ có 3 cột nên có 3 phần con bên trong nữa, ở ví dụ này thì
mình cho 3 cột với nội dung giống y hệt nhau nhé mà chỉ khác hình ảnh thôi.

[html]
<div class=”row”>
<div id=”box1″ class=”col”>
<h2>Lorem ipsum dolor sit amet</h2>
<img src=”img/css-icon” alt=”CSS” />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales,
faucibus libero ut, posuere felis. Donec imperdiet suscipit accumsan. Aenean
consequat condimentum velit ut tempor. Nam porta massa in metus bibendum
congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at
ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper
id.</p>
</div>
<div id=”box2″ class=”col”>
<h2>Lorem ipsum dolor sit amet</h2>
<img src=”img/url-icon” alt=”URL” />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales,
faucibus libero ut, posuere felis. Donec imperdiet suscipit accumsan. Aenean
consequat condimentum velit ut tempor. Nam porta massa in metus bibendum
congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at
ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper
id.</p>
</div>
<div id=”box3″ class=”col”>
<h2>Lorem ipsum dolor sit amet</h2>
<img src=”img/html-icon” alt=”HTML” />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales,
faucibus libero ut, posuere felis. Donec imperdiet suscipit accumsan. Aenean
consequat condimentum velit ut tempor. Nam porta massa in metus bibendum
congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at
ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper
id.</p>
</div>
</div><!–.call-to-action–>
[/html]

Phần #footer

Phần footer thì chúng ta chỉ đơn giản là có nội dung như này thôi.

[html]
<div id=”footer”>
<p>Copyright &copy; 2015 – Serie học HTML & CSS cơ bản tại
thachpham.</p>
</div><!–#footer–>
[/html]
Bây giờ ta đã có một văn bản thuần HTML như hình.

/==Lên khung cho website==/
#container {
padding-left: 150px;
position: relative;
left: 0;
width: 100%;
}
#menu {
position: fixed;
height: 100%;
background-color: #191818;
width: 150px;
left: 0;
}
Sở dĩ ở #container mình có padding-left là vì mình muốn nó dư một khoảng trống
150px bên tay trái của trang để đỡ bị thằng #menu che mất. Ở #menu mình sử dụng
kiểu hiển thị là fixed để nó đứng cố định trên trang.
Kết quả ban đầu ta được thế này.

Viết CSS cho #menu

Bây giờ mình sẽ tiếp tục làm cái menu cho nó hiển thị đẹp hơn một xíu giống như
ảnh demo vậy. Trước tiên là xóa các style của danh sách mặc định đi và xóa
margin, padding.

/==Trang trí menu==/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
Và thêm chiều cao cho từng mục bên trong menu.

#menu ul li {
line-height: 2;
height: 2;
}

/==Call to Action==/
.call-to-action {
padding: 1 20%;
background: #EFEFEF;
border: 1px solid#E8E8E8;
}
Cuối cùng là đến phần chia cột trong .row để nó hiển thị thành 3 cột. Trước tiên là
thêm overflow: auto cho .row để nó có thể clear 昀氀oat và margin để nó cách xa các
phần tử khác một chút.

/==Chia cột phần content==/
.row {
overflow: auto;
margin: 1 auto;
}
Tiếp theo là viết CSS cho class .col nằm trong đây để nó 昀氀oat qua bên trái và
thêm margin cần thiết để cách xa nhau ra. Riêng phần .row .col:last-child nghĩa là
mình chọn cột .row .col cuối cùng trong khu vực này để cho nó 昀氀oat qua bên phải,
xóa margin-right để hiển thị cân đối hơn.

/==Chia cột phần content==/
.row {
overflow: auto;
margin: 1 auto;
}
.row .col {
float: left;
width: 31%;
margin-right: 2%;
}
.row .col:last-child {
float: right;
margin-right: 0;
}
Và viết CSS nốt cho mấy cái ảnh bên trong cho nó 昀氀oat qua bên trái chữ.

/* Style cho ảnh */
.row .col img {
float: left;
margin-right: 1em;
}
Kết quả ta có:

Kết quả sau khi viết CSS cho #content

Viết CSS cho #footer

Phần này thì dễ rồi, ta chỉ là muốn giảm kích thước chữ xuống một xíu, cho màu
nhạt hơn và thêm cái viền trên (border-top).

/==Footer==/
#footer {
font-size: 85%;
border-top: 1px solid #E6E6E6;
color: #838383;
padding: 1em 3em;
}
Kết quả