Tạo bài viết
Đăng ký
04/10/2018, 20:08

Tạo Mega Menu đơn giản với CSS thuần

Tranh thủ chút ít thời gian, mình sẽ post cho các bạn một mẫu menu đa cấp với chỉ bằng CSS3 mà không phải dùng bất kì đoạn script nào. Với kiểu menu này, các bạn tha hồ dùng cho những dự án thiết kế web của mình. Xem Demo | Download HTML Như thường lệ, chúng ta sẽ xây dựng khung ...

Tranh thủ chút ít thời gian, mình sẽ post cho các bạn một mẫu menu đa cấp với chỉ bằng CSS3 mà không phải dùng bất kì đoạn script nào. Với kiểu menu này, các bạn tha hồ dùng cho những dự án thiết kế web của mình.

Tạo Mega Menu đơn giản với CSS thuần

Xem Demo | Download

 HTML

Như thường lệ, chúng ta sẽ xây dựng khung chuẩn html như sau :

?
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
65
<div class="menu-wrapper">
      <ul class="nav">
        <li>
          <a href="#">Menu Item 1</a>
          <div>
            <div class="nav-column">
              <h3>Heading 1</h3>
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
                <li><a href="#">Item 7</a></li>
              </ul>
            </div>
            <div class="nav-column">
              <h3>Heading 2</h3>
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
              </ul>
              <h3>Heading 3</h3>
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
              </ul>            </div>
            <div class="nav-column">
              <h3>Heading 4</h3>
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
              </ul>
            </div>
            <div class="nav-column">
              <h3 class="orange">Highlighted Heading</h3>
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
              </ul>
              <h3 class="orange">Highlighted Heading</h3>
              <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a></li>
        <li><a href="#">Menu Item 4</a></li>
        <li><a href="#">Menu Item 5</a></li>
        <li class="nav-search">
          <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
          </form>
        </li>
      </ul>
</div>

CSS

Sau đó, chúng ta sẽ định dạng menu với đoạn css sau :

?
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
@import url("http://fonts.googleapis.com/css?family=Roboto");
 
/* mini reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    border: none;
    margin: 0;
    outline: none;
    padding: 0;
}
.nav a {
  text-decoration: none;
}
.nav li {
  list-style: none;
}
 
/* menu container */
.nav,
input {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.nav {
    cursor: default;
    display: inline-block;
    position: relative;
    z-index: 500;
}
 
/* menu list */
.nav &gt; li {
    display: block;
    float: left;
}
 
/* menu links */
.nav &gt; li &gt; a {
  background: #372f2b;
  border-left: 1px solid #4b4441;
  border-right: 1px solid #312a27;
  display: block;
  color: #fcfcfc;
  font-weight: bold;
  height: 54px;
  line-height: 54px;
  padding: 0 20px;
  position: relative;
  text-shadow: 0 0 1px rgba(0,0,0,.35);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 510;
}
.nav &gt; li:hover &gt; a {
  background: #4b4441;
}
.nav &gt; li:first-child &gt; a {
  border-left: none;
  border-radius: 3px 0 0 3px;
}
 
/* search form */
.nav &gt; li.nav-search &gt; form {
  border-left: 1px solid #4b4441;
  height: 54px;
  position: relative;
  awidth: inherit;
  z-index: 510;
}
.nav &gt; li.nav-search input[type="text"] {
  background: #372f2b;
  color: #999;
  display: block;
  font-weight: bold;
  font-size: 14px;
  float: left;
  height: 24px;
  line-height: 24px;
  padding: 15px 0;
  text-shadow: 0 0 1px rgba(0,0,0,.35);
  -webkit-transition: all .3s ease 1s;
  transition: all .3s ease 1s;
  awidth: 1px;
}
.nav &gt; li.nav-search input[type="text"]:focus {
  color: #fcfcfc;
}
.nav &gt; li.nav-search input[type="text"]:focus,
.nav &gt; li.nav-search:hover input[type="text"] {
  padding: 15px 20px;
  -webkit-transition: all .3s ease .1s;
  transition: all .3s ease .1s;
  awidth: 110px;
}
.nav &gt; li.nav-search input[type="submit"] {
    background: #372f2b url(../img/search-icon.png) no-repeat center center;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    display: block;
    float: left;
    height: 54px;
    padding: 0 25px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    awidth: 20px;
}
.nav &gt; li.nav-search input[type="submit"]:hover {
  background-color: #4b4441;
}
 
/* menu dropdown */
.nav &gt; li &gt; div {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 3px 3px;
  position: absolute;
  display: block;
  left: 0;
  opacity: 0;
  overflow: hidden;
  top: 50px;
  -webkit-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
    visibility: hidden;
    awidth: 100%;
}
.nav &gt; li:hover &gt; div {
    opacity: 1;
    overflow: visible;
    visibility: visible;
}
 
/* menu content styles */
.nav .nav-column {
    float: left;
    padding: 2.5%;
    awidth: 20%;
}
.nav .nav-column h3 {
    color: #372f2b;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    margin: 20px 0 10px 0;
    text-transform: uppercase;
}
.nav .nav-column h3.orange {
  color: #ff722b;
}
.nav .nav-column li a {
    color: #888;
    display: block;
    font-weight: bold;
    line-height: 26px;
}
.nav .nav-column li a:hover {
  color: #666;
}

Chúc các bạn thành công !

Tags: css3 mega menu menu

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2025