Loading post navigation ...
 
 

Pro page

15
Nhận xét

[ Yêu cầu ] Tạo menu giống trang phununet.com

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn vnbook.tk (vnbook.tk)
[FD's BlOg] - Tiếp tục loạt bài về tạo thanh menu cho blogspot, hôm nay mình lại giới thiệu cho các bạn 1 style menu khác nữa. Với thanh menu này ta sẽ dùng đến jQuery. Đặc điểm của style menu này là mỗi Menu chính sẽ có 1 màu nền riêng, và có các submenu nằm ngay bên dưới sẽ hiển thị khi rê chuột vào (tương tự như các menu VnE mà mình đã giới thiệu).


Xem demo : LIVE DEMO


Hình ảnh minh họa :


☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML

3. Chèn đoạn code bên dưới vào trước thẻ đóng </head> (nếu chèn đoạn code JS bên dưới vào trong code template nó báo lỗi thì hãy chèn thẳng nó vào trong widget HTML/javascript chứa code của thủ thuật)


<link href="http://data.fandung.com/blog/demo/menu-color/menu.css" rel="stylesheet" type="text/css">


<style type="text/css">
.color-menu {
overflow: hidden;
margin-left: auto;
margin-right: auto;
width: 655px;
text-align: left;
font-family: Arial;
}
</style>


<script src="http://data.fandung.com/js/jquery.js"></script>


<script type="text/javascript">


function changeSub(i)
{
$(".DDSubMenu").css("display","none");
if(i == 0)
{
$('#DDSub0').css('display','block');
}
if(i == 1)
{
$('#DDSub1').css('display','block');
}
if(i == 2)
{
$('#DDSub2').css('display','block');
}
if(i == 3)
{
$('#DDSub3').css('display','block');
}
if(i == 4)
{
$('#DDSub4').css('display','block');
}
if(i == 5)
{
$('#DDSub5').css('display','block');
}
if(i == 6)
{
$('#DDSub6').css('display','block');
}
if(i == 7)
{
$('#DDSub7').css('display','block');
}
if(i == 8)
{
$('#DDSub8').css('display','block');
}
if(i == 9)
{
$('#DDSub9').css('display','block');
}
if(i == 10)
{
$('#DDSub10').css('display','block');
}
if(i == 11)
{
$('#DDSub11').css('display','block');
}
if(i == 12)
{
$('#DDSub12').css('display','block');
}


}


</script>


/* Chú thích : Đoạn code JS trên là để hiển thị các Submenu con, nếu bạn có nhiều hơn 12 menu chính thì cứ việc thêm code tương tự vào, dư cũng ko sao, nhưng tốt nhất nên thêm vừa đủ. */
/* Xóa đoạn chú thích này khi thực hiện */


<script type="text/javascript">


function getParamURL( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}


function menuInit()
{
var catId = getParamURL("Cat_ID");
var id= parseInt(catId);
if(id==null || id.toString()=="NaN")
id=0;
$('.item[id^=div]').each(function(){
var id = $(this).attr('id');
$('#'+id+' > div').css('background',$(this).attr('colortab'));
$('#'+id+' > div > div').css('background',$(this).attr('colortab'));
});
$('.item > [class^=item]').css('background-color')
var obj = $('.item[select="'+ id.toString() + '"]');
if(id!=0)
$('#' + obj.attr('id')).attr('class','item_select');
$('.item_select > div').css("background",$('.item_select').attr('colortab'));
$('.item_select > div > div').css("background",$('.item_select').attr('colortab'));
$('.horizontalbar').css("background",$('.item_select').attr('colortab'));
$('.item').mouseover(function(){


$('.item_selected').attr('class','item');
$(this).attr('class','item_selected');
$('.horizontalbar').css("background",$(this).attr('colortab'));
changeSub($(this).attr('select'));
})


/// Control link of menu's item
var url = window.location.href;
var headUrl = window.location.href;
if(headUrl.indexOf("ChuyenMuc")>=0 && headUrl.indexOf("ChuyenMucCon")<0)
{
if(headUrl.indexOf("?")>=0)
headUrl = headUrl.substring(0,url.indexOf("?"));


}
else
{
headUrl = "#";
}
$('.item').click(function(){
if($(this).attr("select")=="0")
{
window.location.href = "http://www.fandung.com";
return;
}
// thay dòng http://wwww.fandung.com thành địa chỉ URL blog của bạn


if(url.indexOf("&")>=0)


url = headUrl;
window.location.href = url;
})
}
</script>


4. Save template
5. Tạo 1 widget HTML/Javascript và dán code HTML bên dưới vào :

<div class="color-menu">
<div>

<div style="height: 29px; padding-left: 10px;">
<div id="div0" class="item" style="width: 56px;" select="0" colortab="#ff6d00">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Home</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div1" class="item" style="width: 56px;" select="1" colortab="#afc904">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 1</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div2" class="item" style="width: 56px;" select="2" colortab="#FA0707">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 2</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div3" class="item" style="width: 56px;" select="3" colortab="#A0CAC9">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 3</div>
</div>
</div>

<div class="item" style="width: 2px;">
</div>

<div id="div4" class="item" style="width: 56px;" select="4" colortab="#980270">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 4</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div5" class="item" style="width: 56px;" select="5" colortab="#0839D8">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 5</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<!-- Chú thích (xóa đoạn code in nghiêng này đi khi thực hiện)-->

<!--code trên dùng với 5 menu chính, nếu muốn thêm meu chính thì chỉ việc thay thêm code như bên dưới vào ngay vị trí này :

<div id="div6" class="item" style="width: 56px;" select="6" colortab="#F839D8">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 6</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

Code màu cam trong đoạn code trên là để tùy chỉnh độ rộng của các menu chính cho phù hợp với với tên hiển thị của các menu chính. Như trong bản demo, mình đều dùng chung kích thước là 56px.
Code màu xanh chính là màu nền của menu chính.
Code màu đỏ là để liên kết với SubMenu
-->

<!-- END Chú thích -->

</div>

<div class="horizontalbar" style="background: rgb(0, 98, 189) none repeat scroll 0% 0%; overflow: hidden; height: 5px; z-index: 1000000000;"></div>

</div>

<!-- START SubMenu -->

<div style="overflow: hidden; height: 27px; clear: both; color: rgb(51, 51, 51); width: 100%; text-align: right; background-image: url(http://farm4.static.flickr.com/3448/3811418642_f21be69ed6_o.png); background-repeat: repeat;" id="divSubMenu">

<div id="DDSub0" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 480px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="http://www.fandung.com/feeds/posts/default">RSS posts</a> | <a href="http://www.fandung.com/feeds/comments/default">RSS Comments</a>
</div>
</div>

<div id="DDSub1" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 488px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 1.1</a> | <a href="#">Sub 1.2</a> | <a href="#">Sub 1.3</a>
</div>
</div>

<div id="DDSub2" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 430px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 2.1</a> | <a href="#">Sub 2.2</a> | <a href="#">Sub 2.3</a>
</div>
</div>

<div id="DDSub3" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 372px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 3.1</a> | <a href="#">Sub 3.2</a> | <a href="#">Sub 3.3</a>
</div>
</div>

<div id="DDSub4" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 312px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 4.1</a> | <a href="#">Sub 4.2</a> | <a href="#">Sub 4.3</a>
</div>
</div>

<div id="DDSub5" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 255px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 5.1</a> | <a href="#">Sub 5.2</a> | <a href="#">Sub 5.3</a>
</div>
</div>

<!-- Chú thích (xóa đoạn code in nghiêng này đi khi thực hiện) -->
<!--
Nếu muốn thêm các Submenu cho các menu tiếp theo (Menu 6, Menu 7, ...) thì các bạn thêm code bên dưới vào ngay vị trí này:

<div id="DDSub6" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 197px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 6.1</a> | <a href="#">Sub 6.2</a> | <a href="#">Sub 6.3</a>
</div>
</div>

-->
<!-- END Chú thích -->

</div>

<!-- END SubMenu -->

<script>
menuInit();
</script>

</div>

- Chú ý đoạn code màu tím, đây chính là code để căn cho các SubMenu nằm ngay bên dưới Menu chính (đây là lệnh căn lề phải, các bạn điều chỉnh lại để cho các Submenu dược hiển thị tốt nhất)

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


Enter your mail address:

15

Tuấn Nguyễn

xé tem :D

Minh Hai

hay qua, ban gioi thieu menu cai nao cung dep ~x(

vutd

Cũng xuất phát từ các đơn đặt hàng nữa chứ. :)

f9x

Tuyệt vời quá, nhờ fandung làm những khung nội dung xanh và tím nằm ở 2 cột trái phải, như trang này. Cám ơn trước.

http://news.zing.vn/news/dep/su-that-ve-vuong-mien-cua-hoang-diep/a62510.html

fandung

@f9x : cái này dùng 1 chút CSS là bạn có thể thực hiện được, nhưng với cách thực hiện này, các ảnh trang trí cho nền bạn sẽ phải sửa kích thước của chúng lại.(nếu muốn hiển thị được đẹp hơn)

Như bạn thấy đó, trang zing.news do họ dùng chung 1 hình nền, nên chỉ ở cột bên phải nó mới hiển thị đủ ảnh nền (ảnh màu xanh và tím), còn ở cột bên trái, do có độ rộng nhỏ hơn cột bên phải, nên 1 phần ảnh nền này đã bị che đi mất

f9x

Fandung ơi mình không biết làm. Nhờ bạn giúp

Lâm

Menu nào bạn giới thiệu cũng đẹp hết bạn giỏi CSS bạn chỉ mình cách làm Menu Giống của One-Theme dc ko bạn .CẢm ơn Nhiều

Phan Dũng

@Lâm : bạn nói trang One-Theme nào??? bạn phải nói rõ mình mới có thể trả lời được chứ!

Unknown

nói cung bạn hướng dẫn quá chung chung mình đọc chả hiểu gì cả

Syntech

Mình sử dụng khi lưu lại nó báo lỗi, mặc dù copy nguyên code và chưa chỉnh sửa gì cả.
Lỗi thông báo: Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The entity name must immediately follow the '&' in the entity reference.

Huy Tập

anh Dũng ơi giờ blog google thay đổi phần thiết lập chỉnh sửa rồi,ko bít chỗ nào mà áp dụng

dinhdungpc

chào anh em muốn 1 menu như v1vn.com mong anh sớm hồi âm cho em

Phạm Hữu Dư

Menu này đẹp quá, em sẽ áp dụng vào blog của em :D

Unknown

bác fandung ơi, sao bây giờ nó k chạy nữa rồi, là sao vậy?

Unknown

Dũng ơi, cho mình hỏi, mình muốn thay đổi kích thước, font chữ của bài viết thì mình chỉnh sửa theo lệnh nào trong HTML vậy? Mình mò blog 1 hồi chắc panh ta lông quá!!! Hướng dẫn giúp mìn nhé!
Thanks



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home