Code thanh menu cuoi trang kieu 4

Code menu ngang cuối trang có tab gắn logo kiểu 4 Khác với kiểu 2 và kiểu 3, ở menu này, các tab sẽ đổi màu khi thầy cô rê chuột và sẽ dẫn thầy cô đến một trang Web/blog khác khi thầy cô[r]

Trang 1

Code menu ngang cuối trang có tab gắn logo (kiểu 4)

Khác với kiểu 2 và kiểu 3, ở menu này, các tab sẽ đổi màu khi thầy cô rê chuột và

sẽ dẫn thầy cô đến một trang Web/blog khác khi thầy cô bấm vào "nó".

Hơn nữa, ở mỗi tab thầy cô có thể gắn Logo (24px x 24px) bất kỳ để minh hoạ cho tiêu đề mà mình gắn trên đó Nếu logo có kích cở quá lớn thì nó sẽ hiển thị thành nền của tab mà thầy cô gắn logo vào.

Thầy cô có thể thay đổi màu nền, màu chữ, thông số canh lề, khoảng cách, di chuyển tab lên xuống …khi thanh menu hiển thị chưa phù hợp Thầy cô copy mô tả dưới đây xem thử (chỉnh màn hình 1024by768px)

*Mô tả: Thầy cô thay đổi những phần được tô đậm

.shadowblockmenu ul{

border: 1px solid #BBB;

border-width: 3px 0; /* Dich chuyển thanh menu lên hay xuống */

padding: 0;

Trang 2

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: #0066CC; /*Màu chữ thứ 1 hiển thị trên thanh menu */

padding: 8px 15px 8px 9px; /* Canh lề giưa logo, chữ, tab, thanh menu*/

margin: 0;

text-decoration: none;

border-right: 1px solid #BBB; /* Khoảng cách giữa các tab trên thanh menu và màu hiển

thị của khoảng cách*/

-moz-box-shadow: inset -7px 0 10px rgba( 114,114,114, 0.4); /* Add inset shadow to each menu item First 3 values in ( 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);

Trang 3

text-shadow: 0 -1px 1px #BBB; /* Màu chữ thứ 2 hiển thị trên thanh menu */

-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes

*/

-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{ /* Extra style for first menu link */

border-left: 1pxsolid #BBB; /* add border to left side of first menu link */

padding-left:22px; /* Khoảng cách giữa logo và chữ */

background: url(http://d4.violet.vn/uploads/blogs/754645/clock-icon.png) 1px center no-repeat; /*Link ảnh của logo */

}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */

padding-left:23px; /* Khoảng cách giữa logo và chữ trên 1 tab */

background: url(http://d4.violet.vn/uploads/blogs/754645/html-icon.png) 1px center no-repeat; /* Link ảnh của logo */

}

Trang 4

background:

url(http://d4.violet.vn/uploads/blogs/754645/axialis-icon-workshop-icon_01.png) 1px center no-repeat; /* Link ảnh của logo */

}

background: url(http://d4.violet.vn/uploads/blogs/754645/font-expert-icon.png) 1px center no-repeat; /* Link ảnh của logo */

}

background: url(http://d4.violet.vn/uploads/blogs/754645/google-icon.png) 1px center no-repeat; /* Link ảnh của logo */

}

Trang 5

background:

url(http://d4.violet.vn/uploads/blogs/754645/notebook-with-icons-icon.png ) 1px center no-repeat; /* Link ảnh của logo */

}

background:

url(http://d4.violet.vn/uploads/blogs/754645/devices-audio-input-microphone-icon.png) 1px center no-repeat; /* Link ảnh của logo */

}

background: url( http://d4.violet.vn/uploads/blogs/754645/apps-preferences-desktop-icons-icon.png ) 1px center no-repeat; /* Link ảnh của logo */

}

background: url(http://d4.violet.vn/uploads/blogs/754645/vietnam-icon1.png) 1px center no-repeat; /* Link ảnh của logo */

}

background: url(http://d4.violet.vn/uploads/blogs/754645/emails-folder-icon.png) 1px center no-repeat; /* Link ảnh của logo */

Trang 6

.shadowblockmenu ul li a:hover{

color: black;

-moz-box-shadow: inset -7px 0 10px rgba(30, 144, 255, 0.4), inset 0 0 12px

rgba(60,162,221, 15);/*Hai màu trên tab của menu*/

-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.15), inset 0 0 12px rgba( 60,162,221, 15);

box-shadow: inset -7px 0 10px rgba( 30, 144, 255, 0.4), inset 0 0 12px rgba(60,162,221, 15);/*Đậm nhạt của hai màu*/

}

</style>

<div style=

"position: fixed; width: 100%;

height: 29px; /* Ngang, rộng và di chuyển lên xuống các tab mà thầy cô muốn thêm

1 thanh menu nữa*/

z-index: 0; left: 0pt; /* Canh lề các tab*/

bottom: 0pt; border-top: 0px ;

padding: 0px 1px; /*Kích thước thanh menu di chuyển các tab lên xuống, sang trái phải

*/

background-color: rgb(243, 243, 243); /*Thầy cô xóa dòng này sẽ lấy trang blog làm

nền*/

font-family: Times New Roman; font-size: 10pt; font-weight: Bold;"

Trang 7

<ul>

<li><a href="http://www.clocklink.com/"

target="_blank">Code đồng hồ</a></li>

Thử HTML</a></li>

<li><a href="http://trangnhat.net/tienich/tiengviet.htm"target="_blank">Xử lí văn

bản</a></li>

Google dịch</a></li>

<li><a href=" http://ziczac.vn/karaoke.html"target="_blank">Karaoke</a></li>

<li><a href=" http://violet.vn/songkimsnhn2007/entry/list/cat_id/6173365

"target="_blank">Tổng hợp</a></li>

Trang 8

<li><a href="http://www.lichsuvietnam.vn/home.php?

option=com_weblinks&catid=2&Itemid=36 "target="_blank">Lịch sử</a></li>

</ul>

</div>

* Mở rộng thêm:

- Ở đoạn code phía trên có tất cả là 10 tab, vì vậy nếu thấy cô muốn thay đổi theo ý mình thì copy (hoặc xóa bớt cho phù hợp) dòng lệnh dưới đây rồi dán vào phía dưới

và thay đổi số thứ tự nằm trong ngoặc đơn theo số lớn dần.

.shadowblockmenu li:nth-of-type(10) a{ /* Extra style for 2nd menu link */

padding-left:25px;

background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */

}

Sau đó, copy thêm dòng lệnh này dán trên dòng </ul> cuối cùng

<li><a href="địa chỉ liên kết">Tên hiển thị số </a></li>

- Ví dụ: Ở đoạn code trên hiện có 10 tab, tôi muốn thêm 10 tab nữa là 20 tab, thì code sẽ giống như thế này:

Trang 9

.shadowblockmenu ul{

border: 1px solid #BBB;

border-width: 3px 0; /* Dich chuyển thanh menu lên hay xuống */

padding: 0;

margin: 0;

overflow: hidden;

}

………

shadowblockmenu li:nth-of-type(11) a{ /* Extra style for 2nd menu link */ padding-left:25px;

background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */ }

.shadowblockmenu li:nth-of-type(12) a{ /* Extra style for 2nd menu link */ padding-left:25px;

shadowblockmenu li:nth-of-type(14) a{ /* Extra style for 2nd menu link */ padding-left:25px;

Trang 10

Sau đó, thầy cô thay đổi thông số … : height: 29px; /* Ngang, rộng và di chuyển lên xuống các tab mà thầy cô muốn thêm 1 thanh menu nữa*/

</style>

<li><a href="địa chỉ liên kết">Tên hiển thị số 11</a></li>

………

</ul>

</div>

Chúc các thầy cô và các bạn thành công

Định dạng
Số trang	10
Dung lượng	28,89 KB