Tạo thực đơn ngang với hiệu ứng xuất hiện biểu tượng khi di chuột

Đăng bởi Admin | 19/10/13 | 0 nhận xét

Các nhà phát triển web sử dụng CSS3 để tạo biểu tượng di chuột hiệu quả. Đến với tiện ích này sẽ cho bạn thấy cách sử dụng CSS3 với sự xuất hiện của biểu tượng khi di chuột vào thực đơn hiệu quả mà không cần sử dụng bất kỳ thư viện JavaScript nào. CSS3 luôn luôn hữu ích để tùy chỉnh dễ dàng . Nó tạo ra hình ảnh động dễ dàng bởi vì đã được tối ưu hóa bằng HTML. 

Các danh mục đối với các blogger rất quan trọng. Chúng ta có thể điều hướng các trang của blog và bạn có thể tìm hiểu cách thêm CSS3 với biểu tượng xuất hiện khi di chuột. Thu thuat vi tinh tin rằng đây sẽ  là một tiện ích hữu ích cho bạn.

                                                                

Demo

Làm thế nào đểTạo thực đơn ngang với hiệu ứng xuất hiện biểu tượng khi di chuột?

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  ]]> </ b: skin> và thêm mã dưới đây ngay trên nó:

/* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Tới blogger Giao diện 
6. Bấm vào Thêm tiện ích và chọn thêm "HTML / Javascript" 
7. Dán mã dưới đây:

<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimYSJ9Pz_G4shREhEzv-u7vNlXTbBPX363FtZhV0hSBERfEpykMbZJ_lE4LvS1n96PnTBUvKsyT2Ow4hHSJ6xIpki7iIaDi4_-eOyw0zMrzL2J4DAtfF7yXpwbXOXamV1-GPp7tkvyEcU/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezsrUjed01yctSOyAk08d_Wanbh13E1BUtMBgq2wxgEc93z6IIQRE8541dtmF22_CogbspOUycOng3YBaZK_6oEWSPaDY2ap_JDeBxkoGwP7ZDWCv2yrvEs9yXmnHPilE4tdON9w9Wgo/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEyAwOaRBkuBtZb1zVDFx6iFF_LbTd0Qhmg3EWpMd7yW_07xzT4uKY_bO1Q2gS44hMb39pV87MzdeMs9hoasRlg-HhX_bkN00wqfUsfzWMrkqos9o8tjhhKIiw2yGa8az_Gl02IrH2Qqc/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8mtZZdVEqoniiuxuZhwW_M5X4dcv9LPP4MOmXAY_Y18HS31Mx-uwHuuWXcGliJWewJEE40myVlZBbg55u-lzEEGQcBUuUMdpYlwJW2lB_rhYr-wORpzWxxOgF97A7wN-RwAktaaCg8A/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDGlU8B3bDpbhQlmgN6tFbAs-kjpTLY0-vkZAn7bgusTtxS-OUS0N8JBrX2K-QWcSQp8Ec2gs80TUMw4ltBw1WgLgGRw66bdsGjzC-ap8CS1EmICjoIolxBYLgGJGyM24pk2icIzv4eCc/s1600/btrix-contact.png" /> </a> </li> </div>

* Lưu ý:

- Thay thế # với các liên kết của bạn. 

- Thay thế các link ảnh màu đỏ bằng link ảnh yêu thích của bạn.

8. Bây giờ lưu HTML / Javascript. bạn đang thực hiện và chuyển đến vị trí bạn cần.

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

                                                                                    Nguồn: bloggertrix.com