Bài viết của tôi

Các bài viết về công nghệ, coder,... từ kinh nghiệm thực tế.
  • Tất cả
  • android (1)
  • blogspot (22)
  • code (30)
  • download (8)
  • Error (1)
  • Javascript (2)
  • kiến thức (2)
  • phần cứng (3)
  • phần mềm (5)
  • seo (13)
  • tài liệu (1)
  • thủ thuật (12)
  • tiện ích (1)
Tạo Menu DropDown đơn giản bằng CSS

Tạo Menu DropDown đơn giản bằng CSS

Hiên nay, có rất nhiều cách làm menu, nhưng mình vẫn thích dạng menu DropDown. Và đặt biệt là menu này rất đơn giản, chỉ vài dòng CSS là xon...

Hiên nay, có rất nhiều cách làm menu, nhưng mình vẫn thích dạng menu DropDown. Và đặt biệt là menu này rất đơn giản, chỉ vài dòng CSS là xong. Ưu điểm cửa menu này là không có Javascript nên nhẹ website hơn.
Tạo Menu DropDown đơn giản bằng CSS


Code CSS
ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

ul li:hover {
  background: #555;
  color: #fff;
}

ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}

ul li ul li:hover { background: #666; }

ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


Code HTML
<ul><code><code>
<li>Home</li>
<li>About</li>
<li>
    Portfolio
    <ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</code></code></ul>

Demo:

  • Home
  • About
  • Portfolio
    • Web Design
    • Web Development
    • Illustrations
  • Blog
  • Contact

Đăng nhận xét

Đọc nhiều nhất

Bài viết mới hơn