Cách tạo thanh menu trượt nằm bên trên blog hoặc website | GIÁO XỨ LỘC THỦY
12 Thánh tông đồ Audio suy niệm Audio truyện Công giáo Âm nhạc Bài Giảng mp3 Bạn có biết bạn trẻ xa nhà Bảo vệ sự sống Blog tips Ca kịch công giáo Các bài giáo lý của ĐTC Phanxicô Các hội đoàn Các mục chính Các Thánh Các thánh địa Công giáo Các thánh khác Các Tuần Cửu Nhật Kính Đức Mẹ Các vấn nạn xã hội Cắm hoa nghệ thuật Câu chuyện Giáng Sinh Châm ngôn công giáo Chiêm ngắm Chúa Chuyện phiếm đạo đời Chuyện về Giáo Lý và Giáo Dục Công Giáo đó đây Cửu Nhật Kinh Nguyện Danh Danh bạ website các giáo xứ - giáo họ việt nam Danh bạ website công giáo Di sản thế giới Du Lịch Đẹp + Để sống đạo hôm nay Đôi nét về Giáo xứ Đời sống cầu nguyện Đức Mẹ Hằng Cứu Giúp Đức Mẹ Lama Đức Thánh Cha phanxico Đức Tin và Khoa Học Đường Hy Vọng Gia đình Giải đáp thắc mắc cuộc đời Giao hat Vang Mai Giáo hạt Vàng Mai Giáo Hội Đông Phương Giáo lý - dân ca Giáo lý - kinh thánh Giáo sử Giáo xứ Media góc học tập Góc khám phá Góc nghệ thuật Góc thư giãn Góp nhặt Hạt Giống Lời Chúa Hình ảnh cổ xưa Hình ảnh Giáo xứ Lộc Thủy học tiếng anh Hướng dẫn sử dụng webblog Kết nối websites Kiến thức phổ thông Kính Đức Mẹ Kinh thánh tiếng anh Lẽ sống Lịch sử các Dòng tu Lịch sử Giáo Hội Việt Nam Lịch sử hình thành Giáo xứ Lộc Thủy Lòng Thương xót Chúa Lộc Thủy Lời Chúa qua bài hát Lời chúa theo chủ đề Mùa Vọng - Advent Năm thánh Lòng Thương Xót Nghe và suy gẫm Nghệ thuật Công Giáo Nghệ thuật sống Ơn gọi-tận hiến Phim công giáo Quỳnh lưu Radio Công Giáo Sách Công giáo sách tháng đức bà Sắc màu cuộc sống Sổ tay sinh hoạt suy gẫm Suy gẫm và Cầu nguyện Suy niệm Lời Chúa Suy niệm Lời Chúa mùa Phục Sinh Suy niệm Lời Chúa mùa TN A Suy niệm Lời Chúa năm A Suy niệm mùa chay Sức khỏe - ẩm thực Tài liệu Công Giáo tổng hợp Tài liệu dạy Giáo Lý Tài liệu Tuần Thánh Thánh ca Thánh ca cầu nguyện Thánh Ca Hoàng Diệp Thánh Mẫu học Thánh Mẫu La vang Thế giới Công Giáo Thơ - Truyện Công Giáo Thơ Công Giáo Thơ và cuộc sống Thủ thuật blog Thủ thuật facebook Thủ thuật google + Thư Viện Công Giáo Tiếng anh qua Lời Chúa Tiêu điểm Tìm hiểu phụng vụ Tin Công Giáo Tin Giáo xứ Tin tức Giáo xứ Lộc Thủy Tin Việt Nam và Thế Giới Tổ chức kỳ thi Giáo lý Tông huấn Giáo hội Công giáo Trang Trí Giáng Sinh Trắc nghiệm Giáo lý Trắc nghiệm Kinh Thánh Trắc nghiệm năm đức tin Truyện Công Giáo Truyện về Mẹ Tư liệu Giáo hội Công giáo việt nam Tư liệu Giáo phận Vinh Tư liệu Giáo xứ Lộc Thủy Từ vựng công giáo Anh-việt Tv Công giáo TVs và Radios khắp nơi Vấn đáp đức tin công giáo Videos Đặc Sắc Vietnamese English Prayers Vinh Quang Đức Maria Website Công Giáo bổ ích

Cách tạo thanh menu trượt nằm bên trên blog hoặc website

10:35:00

Cách tạo thanh menu trượt nằm bên trên blog hoặc website

Ở bài trước, chúng tôi có giới thiệu cách tạo thanh menu cố định ở cuối trang blog; Bài này sẽ hướng dẫn các bạn Cách tạo thanh menu trượt nằm bên trên blog hoặc website, hay còn gọi là menu cố định đầu trang blog, hoặc là menu trượt cố định ở đầu trang blog..



Bài này từ: blog  Võ Quốc An

Hướng dẫn tạo thanh Drop Menu cố định ở đầu blog.

Post By: Võ Quốc An On: 21-03-2012 33 comments
Cách tạo thanh menu trượt nằm bên trên blog hoặc website
Hôm trước mình đã hướng dẫn tạo thanh menu cố định ở đầu blog nhưng với thủ thuật trên thì nó chỉ đơn giản là một menu từ linklist. Hôm nay mình sẽ phát triển thủ thuật này lên 1 tí theo lời nhờ của iG4VN thêm hiệu ứng drop cho thanh menu này.


1. Vào template chèn đoạn css sau phía trên thẻ ]]></b:skin>
#topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px;    line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;    float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}
2. Tiếp tục chèn đoạn code sau vào bên dưới thẻ mở <body...> (dấu ... có thể khác nhau hoặc không có tùy blog)
<div id='topmenu-outer'>
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML31' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm thủ thuật ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm thủ thuật ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm thủ thuật ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='www.voquocan.com'/>
</form></div>
<div style='clear:both'/>
</div>
</div>
3. Save template lại rồi về mục Phần tử trang bạn sẽ thấy xuất hiện một tiện ích HTML mới ở đầu blog. Bạn chèn đoạn code sau vào tiện ích HTML trên:
<ul class="menu">
<li class="drop0"><a href="http://www.voquocan.com">Trang Chủ</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/sitemap.html">Sơ Đồ Blog</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/voquocan.html">About Me</a></li>
<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Danh sách Label</a>
<div class="drop1">
<ul>
<li><a href="http://www.voquocan.com/search/label/Thủ thuật blog?max-results=5">Tất cả thủ thuật</a></li>
<li><a href="http://www.voquocan.com/search/label/Blogger?max-results=5">Blogger</a></li>
<li><a href="http://www.voquocan.com/search/label/Comments?max-results=5">Comments</a></li>
<li><a href="http://www.voquocan.com/search/label/Emoticons?max-results=5">Emoticons (Icons)</a></li>
<li><a href="http://www.voquocan.com/search/label/Bookmark?max-results=5">Bookmark</a></li>
</ul>
</div></li>

<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Bài Viết Xem Nhiều</a>
<div class="drop2">

<div class="col">
<h3>Menu</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Float Menu</a></li>
<li><a href="http://www.voquocan.com/2012/02/drop-menu.html">Drop Menu 1</a></li>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Drop Menu 2</a></li>
</ul>
</div>

<div class="col">
<h3>Template</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/share-template-01.html">Template 01</a></li>
<li><a href="http://www.voquocan.com/2012/03/template.html">HTML</a></li>
<li><a href="http://www.voquocan.com/2012/03/css01.html">CSS</a></li>
</ul>
</div>

<div class="col">
<h3>Comments</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/threaded-comment.html">Comments 6 cấp</a></li>
<li><a href="http://www.voquocan.com/2012/01/mot-giao-dien-khac-cho-threaded.html">Comments 2 cấp</a></li>
<li><a href="http://www.voquocan.com/2011/12/tao-khung-quick-comments-cho-blog-cbox.html">Quick Comments</a></li>
</ul>
</div>

<div class="col">
<h3>Blogger</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/link.html">Liên kết blog</a></li>
<li><a href="http://www.voquocan.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="http://www.voquocan.com/2011/12/nhung-ieu-can-luu-y-khi-design-blog.html">Bí Quyết</a></li>
</ul>

</div></div></li></ul>
Save lại là xem như hoàn thành.
4. Thay đổi code:
Đoạn code ở bước 1 là css. Bạn tìm hiểu bài viết này nếu muốn thay đổi về css.
Đoạn code ở bước 2 thay www.voquocan.com thành địa chỉ blog của bạn.
Đoạn code ở bước 3 Trong đoạn code này chú ý 1 tí bạn sẽ thấy có 3 class lớn.
 » drop0: là không drop menu.
 » drop1: là menu drop 1 cột.
 » drop2: là menu drop 2 cột
Bạn thay đổi nội dung cho phù hợp là được.
Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ hướng dẫn trong thời gian sớm nhất có thể. Chúc bạn thành công!

Đăng nhận xét

[blogger][facebook][disqus]

Author Name

{picture#https://1.bp.blogspot.com/-E9BgdfTl7Ug/Xpa2B9OupwI/AAAAAAAAA1U/PnbaR3h3-jE-jQ5GwdNpEvZGUfRWCLz6gCLcBGAsYHQ/s1600/Ch%25C6%25B0a%2B%25C4%2591%25E1%25BA%25B7t%2Bt%25C3%25AAn-1.png} {facebook#https://www.facebook.com/giaoxulocthuygpvinh} {twitter#https://twitter.com/giaoxulocthuy} {youtube#https://www.youtube.com/@giaoxulocthuy}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.