Dạng menu này có kiểu khá đẹp - Do mỗi người có mỗi ý
thích khác nhau để trang trí cho trang web/blog nên mình chia sẻ lên cho cộng đồng dạng menu này mình
cũng thấy ưng ý.
Các bạn xem demo tại đây để có cái nhìn tổng quan hơn trước khi thao tác!
Bạn làm theo các bước sau:
Bước 1: Bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán code này vào.
Bước 2:
<style type="text/css">
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* kiểu chữ và cỡ chữ */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* Lề phải giữa các mục trình đơn */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* Đường kính ngang */
height:50px; /* dọc đường kính */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 chuyển động */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* màu nền */
-webkit-border-radius: 50%; /* bán kính menu để tạo ra dang tròn */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* di chuyển văn bản xuống để nó xuất hiện trung tâm trong mục trình đơn */
}
</style>
<div class="spotlightmenu">
<ul>
<li><a href="#"><span>Menu 1</span></a></li>
<li><a href="#"><span>Menu 2</span></a></li>
<li><a href="#"><span>Menu 3</span></a></li>
<li><a href="#"><span>Menu 4</span></a></li>
<li><a href="#"><span>Menu 5</span></a></li>
</ul>
</div>
Sau đó bạn thay:
+ Menu 1, Menu 2 bằng tên menu do bạn đặt
+ href="#" thay # bằng "địa chỉ" liên kết khi click chuột vào.
Chúc các bạn thực hiện thành công nhé!
- Trang chủ-icon
- ISPRING SUITE
- TIN TỨC
- E-LEARNING
- _iSpring Suite tiếng Việt
- _Phần mềm soạn eLearning
- _Thủ thuật soạn giảng eLearning
- _Soạn giảng elearning với iSpring Suite
- _Tổng hợp mẫu game
- _Xử lý lỗi khi làm bài giảng E-Learning
- WINDOWS
- _Giảng dạy - học tập
- _Ứng dụng văn phòng
- _Phần mềm Phương phạm
- _Nhập điểm - Học trực tuyến
- _Thử thuật wesite NukeViet
- _Phần mềm khác
- Game PowerPoint
- VIDEO ELEARNING
0 Nhận xét
Khi trả lời hoặc đưa ra một câu hỏi xin vui lòng:
1) Hiểu rằng tiếng Việt không phải là ngôn ngữ đầu tiên của tất cả mọi người vì vậy hãy khoan dung lỗi chính tả và ngữ pháp xấu.
2) Nếu một câu hỏi vẫn chưa được câu sau đó, hoặc yêu cầu làm rõ, bỏ qua nó, hoặc chỉnh sửa các câu hỏi và sửa chữa vấn đề. Xúc phạm không được chào đón.
3) Với mỗi bài viết, các bạn không rõ ở điểm nào. Xin hãy nêu ý kiến của mình dưới comments!
Hoặc có thể liên hệ qua Email: phavaphu@gmail.com
----------------------------------------------------------
Chúc các bạn sức khỏe và thành công trong cuộc sống!