Header Ads Widget

Phương Phạm Blog

Tạo menu ngang có hiệu ứng khi rê chuột(kiểu 1)

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é!


 
 
 

Đăng nhận xét

0 Nhận xét