Tạo thêm thanh menu ngang ở cuối trang màn hình

Gốc > THỦ THUẬT WEB-BLOG > Thủ thuật blog Violet >

Tạo bài viết mới Tạo thêm thanh menu ngang ở cuối trang màn hình

Luộc được thanh menu ngang cuối trang màn hình của báo thanhnien.com.vn, Dương Phước Sang xin giới thiệu với các bạn để chúng ta cùng nhau trao đổi và sử dụng
Demo: Xem thanh menu cuối trang màn hình của blog TƯ LIỆU TOÁN HỌC

Code: Chọn tất cả

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Menubar</title></head><link rel="stylesheet" type="text/css" href="http://dpsang.zxq.net/violet/menubar.css"><script src="http://dpsang.zxq.net/violet/menubar.js" type="text/javascript"></script><body><div style="left:50%; position: absolute; bottom: 0px;"><div style="left:-385px; position: absolute; bottom: 0px;"><div class="toolbar" >    <div class="toolbar-menu" id="toolbar-menu" style="display:block;">    <ul>        <li>            <a class="toolbar-home" href="javascript:note()"></a>            <ul class="toolbar-cm">                <li><a href="http://violet.vn/dpsang/">Trang chủ</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4442001">ÔN tập tốt nghiệp</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4442006">Luyện thi ĐH-CĐ</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4442011">Bồi dưỡng Học sinh giỏi</a></li>                <li><a href="http://violet.vn/dpsang/entry/list/cat_id/4320614">Kiến thức toán 10</a></li>                <li><a href="http://violet.vn/dpsang/entry/list/cat_id/4320615">Kiến thức toán 11</a></li>                <li><a href="http://violet.vn/dpsang/entry/list/cat_id/4320617">Kiến thức toán 12</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4320593">Bài tập toán</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4320594">Bài tập toán</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4320598">Giáo án toán</a></li>                <li><a href="http://violet.vn/dpsang/present/list/cat_id/4320604">Bài giảng toán</a></li>                <li><a href="http://violet.vn/dpsang/document/list/cat_id/4320608">Tư liệu toán</a></li>                <li><a href="http://violet.vn/dpsang/entry/list/cat_id/4323404">Thư viện phần mềm</a></li>                <li><a href="http://violet.vn/dpsang/entry/list/cat_id/4423799">Hỗ trợ web, blog</a></li>            </ul>        </li>    </ul>  <a class="guianh" id="cboxbutton1" href="javascript:;" onclick="togglecbox1()"></a><div style="left:50%; position: absolute;"><div style="left:-275px; position: absolute;"><div id="cboxdiv1" style="display: none; position: fixed; bottom: 15px; width: 0px; background: #EDF3F7; padding: 0px; line-height: 0;border:#C3D7E5 0px solid;border-radius: 0px;"></div></div></div>    <a class="guifile" id="cboxbutton2" href="javascript:;" onclick="togglecbox2()"></a><div style="left:50%; position: absolute;"><div style="left:-163px; position: absolute;"><div id="cboxdiv2" style="display: none; position: fixed; bottom: 29px; width: 0px; background: #EDF3F7; padding: 0px; line-height: 0;border:#C3D7E5 0px solid;border-radius: 0px;"></div></div></div>       <a class="kho" id="cboxbutton3" href="javascript:;" onclick="togglecbox3()"></a><div style="left:50%; position: absolute;"><div style="left:-163px; position: absolute;"><div id="cboxdiv3" style="display: none; position: fixed; bottom: 19px; width: 1px; background: #EDF3F7; padding: 0px; line-height: 0;border:#C3D7E5 0px solid;border-radius: 0px;"></div></div></div>    <a class="tienich" id="cboxbutton4" href="javascript:;" onclick="togglecbox4()"></a><div style="left:50%; position: absolute;"><div style="left:-163px; position: absolute;"><div id="cboxdiv4" style="display: none; position: fixed; bottom: 16px; width: 1px; background: #EDF3F7; padding: 0px; line-height: 0;border:#C3D7E5 0px solid;border-radius: 0px;"></div></div></div>      <a class="chat" id="cboxbutton5" href="javascript:;" onclick="togglecbox5()"></a><div style="left:50%; position: absolute;"><div style="left:-163px; position: absolute;"><div id="cboxdiv5" style="display: none; position: fixed; bottom: 19px; width: 1px; background: #EDF3F7; padding: 0px; line-height: 0;border:#C3D7E5 0px solid;border-radius: 0px;"></div></div></div>  <a class="giaitri" id="cboxbutton6" href="javascript:;" onclick="togglecbox6()"></a><div style="left:50%; position: absolute;"><div style="left:-163px; position: absolute;"><div id="cboxdiv6" style="display: none; position: fixed; bottom: 19px; width: 1px; background: #EDF3F7; padding: 0px; line-height: 0;border:#C3D7E5 0px solid;border-radius: 0px;"></div></div></div>       <a class="up" href="#""></a>      <a class="down" href="javascript:scroll(0,9999999)""></a>      <a class="chuy" href="javascript:chuy()""></a></div></div></div></div></body></html>

Hướng dẫn:
Đầu tiên bạn tải hai file sau đây về máy của mình
File thứ nhất: http://dpsang.zxq.net/violet/menubar.css
File thứ hai: http://dpsang.zxq.net/violet/menubar.js
File thứ nhất dùng để quy định định dạng cho thanh menu ngang. Bạn hãy lưu ý vào các link ảnh (đuôi .png) trong file thứ nhất, đó là các link ảnh dùng làm nút lệnh trên thanh menu. Nếu muốn thay đổi các nút lệnh trên thanh menu thì bạn thay đổi các link ảnh này bởi link ảnh mới của bạn.
File thứ hai chứa các mã javascript dùng để mở các menu trên thanh menu ngang. Trong file thứ hai này, các bạn chú ý vào các link có dạng http://dpsang.zxq.net/......., đó là các trang được chèn thích hợp vào các nút lệnh trên thanh menu ngang. Các bạn có thể thay đổi các link ấy phù hợp với nhu cầu sử dụng của mình.

Nói chung, các bạn cần chỉnh sửa nội dung trong hai file trên đây liên quan trùng khớp với đoạn code đã được cung cấp, sau đó mở thêm một khối chức năng mới rồi dán code vào phần văn bản là được

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

Nhắn tin cho tác giả

Dương Phước Sang @ 12:39 11/04/2011
Số lượt xem: 2695

Số lượt thích: 0 người