#Tạo hình với HTML & CSS

Trước hết thì mình cần phải xây dựng trước một cấu trúc menu với HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav id="fixNav">
  <ul>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Izwebz Store</a></li>
    <li><a href="#">Newbie</a></li>
    <li>
      <a href="#">Video</a>
      <ul class="sub-menu">
        <li><a href="#">Html & CSS</a></li>
        <li><a href="#">PHP & MySQL</a></li>
        <li><a href="#">jQuery</a></li>
     </ul>
    </li>
  </ul>
</nav>
Dựa vào cấu trúc trên thì các bạn có thể thấy, menu được xây dựng có 2 cấp. Bây giờ các bạn hãy tiến hành CSS cho menu, tôi xây dựng menu này có style giống như menu đang dùng trên izwebz.com.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#fixNav{
  width: 100%;
  height: 35px;
  background-color: #0082bb;
  display: block;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/
  position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
  top: 0; /*Nằm trên cùng*/
  left: 0; /*Nằm sát bên trái*/
  z-index: 100000; /*Hiển thị lớp trên cùng*/
}
#fixNav ul{
  margin: 0;
  padding: 0;
}
#fixNav ul li{
  list-style:none inside;
  width: auto;
  float: left;
  line-height: 35px; /*Cho text canh giữa menu*/
  color: #fff;
  padding: 0;
  margin-right:10px;
  position: relative;
}
#fixNav ul li a{
  text-transform: uppercase;
  white-space: nowrap; /*Cho chữ trong menu không bị wrap*/
  padding: 0 10px;
  color: #fff;
  display: block;
  font-size: 0.8em;
  text-decoration: none;
}
/*CSS Style cho Submenu*/
#fixNav ul li ul {
  position: absolute;
  width: auto;
  display: none;
  background-color: #252525;
  border-bottom: 3px solid #0082bb;
  padding-left: 5px;
}
 
#fixNav ul li ul li{
  display: block;
  padding:0;
  margin: 0;
  float: none; /*Bỏ float cho li cấp thứ 2*/
}
/* Hover cho submenu */
#fixNav ul li:hover {
  /* Hover thì li sẽ đổi màu*/
  background-color: #252525;
}
#fixNav ul li:hover ul{
  /*Display ra submenu*/
  display: block;
}
/*Không copy cái này, dùng tăng padding top bottom để demo cuộn*/
p{
  padding-top: 80px;
  padding-bottom: 80px;
}
Giải thích ý nghĩa của css tôi có chú thích comment phía trong code. Các bạn có thể xem và tham khảo. Sau khi làm xong menu như trên thì các bạn đã có cho mình một cái floating menu rồi đó. Bây giờ tôi sẽ giải thích rõ hơn. Các bạn hãy quan sát trong css chổ đầu tiên, khai báo cho #fixNav.
1
2
3
4
5
6
7
8
9
10
11
#fixNav{
  width: 100%;
  height: 35px;
  background-color: #0082bb;
  display: block;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.5); /*Đổ bóng cho menu*/
  position: fixed; /*Cho menu cố định 1 vị trí với top và left*/
  top: 0; /*Nằm trên cùng*/
  left: 0; /*Nằm sát bên trái*/
  z-index: 100000; /*Hiển thị lớp trên cùng*/
}
Các bạn có thể quan sát thấy css position có giá trị là fixed. Với bất kỳ đối tượng nào được gán css position có giá trị fixed, thì sẽ được cố định tại một vị trí nhất định. Vị trí đó sẽ phụ thuộc vào giá trị top left bottom right. Trong trường hợp này tôi khai báo top và left đều bằng 0, tức nó sẽ nằm trên cùng, bên trái. Do width:100% nên menu sẽ kéo dài toàn màn hình.