vietnamese Tiếng Việt english English
Hôm nay:
Home »

Menu ngang co kèm hình ảnh bên cạnh rất đẹp

Thứ Ba, 30 tháng 4, 2013
Chào các bạn !
Bài viết hôm nay xin giới thiệu cùng các bạn cách tạo menu ngang có kèm theo hình ảnh rất đẹp với hiệu tạo bóng khi click chuột vào. Hiệu ứng này thích ứng với tất cả cá trình duyệt internet hiện nay. Tiện ích sử dụng CSS và HTML rất dễ dàng thêm vào blog của bạn.



ảnh hiển thị

* Cách thực hiện:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>



/* The CSS Code for the menu starts here bloggertrix.com */

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgUNyjPlIAw2oYBdrP3wnqyclSXr3rtfZzoPlkvSoTHGee6fny_Ux6DPuSCY3GJ6ZTXbVwyRosZPvZ1nz4vVckUDYDhFKeA9U4_PU7Na2hCwD-alwwgz-mKpe3BGdwGxZXDIE2zMY_nI/s1600/bt_home.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-tx_Q3Ifg_IepEz9G2os4lrmjFaJ4zO0WSbzognYPmpXKuEjkxQXMTV5ncx6f7HxUK7ulUrTPAb90Gb8g9RBo5WeSIEbUebAEnBNBEjL4KLZAfBzqDWYWl0DPPJMSjG5p3X6AReWc2k/s1600/bt_bulb.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoHH6fbrPGFtlTsymVYxVFS0m2ZZ8qejdTdPazF4UyN-EzkY-nxKEci59MDBUy7LlypgW2EMtf-m8EAHX14adz6MQg51byier3rJpZdEOjC7LEsnmi9rQEK6zrKDwtBgwyOaNYGcO28dA/s1600/bt_database_add.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRb4RZbnRs9MXITpXqfQWwba1rBXc9RJM-v0RD4WwUFWS7BuTPyi02WHmRtqIlWIGrlaYksy1WMJcIqtGkH78uUDkSewD1mz50aYCtgcXMNoXVmsQTQnphGXyxxTPOpsIrBXBm9ifqwo/s1600/bt_films.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzbMBROkzrJDMW9aM8GgVLxU1cqmu61djwJmmjtkbrXtD8cue3Sjv9ZgqSz5d5Osj1Nd9IO_U6kkgbQB1iiBYeSZ_xAQNSPTeLUvuKpNICFO_56q2SeFtSAna0La1s7USzDSph9OkfxU/s1600/bt_mobile-phone.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(6) a{
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjERQ_522ToDzP9uoqrxo8FerPUg0BAluKUrIdjRExYP5qaNhVqPgKfwba8DVDosKwmjYD70K3n1z-hTwqC_93k2VBAaqc5xpCRy-UK9kjJMji9foYmxLT6Jp9gVVBPqKw59S7V56nw1M0/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat;
}
.shadowblockmenu ul li a:hover{color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div class="shadowblockmenu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Thủ thuật máy tính</a></li>
<li><a href="#">Thủ thuật Web</a></li>
<li><a href="#">Phim hay</a></li>
<li><a href="#">Ứng dụng Mobile</a></li>
<li><a href="http://www.quangvietmkt.blogspot.com/">Trợ giúp</a></li>
</ul>
</div>

 * Ở đây các bạn lưu ý các dòng sau:
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Thủ thuật máy tính</a></li>
<li><a href="#">Thủ thuật Web</a></li>
<li><a href="#">Phim hay</a></li>
<li><a href="#">Ứng dụng Mobile</a></li>
<li><a href="http://www.quangvietmkt.blogspot.com/">Trợ giúp</a></li>
Thay # bằng link liên kết, thay các dòng chữ màu xanh bằng tên menu của bạn.
Chúc các bạn thành công
theo buivansum
Tags: ,

Comments[ 0 ]


Đăng nhận xét