TẠO MENU PRO VỚI HIỆU ỨNG CURRENT LABEL - 9 September 2010 - All 4 You
Monday, 23-Jan-2017, 2:22 AM
Welcome Guest | RSS
Main » 2010 » September » 9 » TẠO MENU PRO VỚI HIỆU ỨNG CURRENT LABEL
10:02 AM
TẠO MENU PRO VỚI HIỆU ỨNG CURRENT LABEL

Các style menu trước đây bạn đã biết qua vnblognet [dot] com hay ở một số trang thủ thuật Blogger khác đơn thuần chỉ  có các hiệu ứng sổ dọc , sổ ngang để định hướng các Label  và  thường  được  gọi là Menu Navigation mà thôi (Navbar). Đối với Current menu là style menu mới với hiệu ứng Current (hiện hành). Tức là khi bạn đang ở trang hiện hành mà có Label  liên quan tới 1 menu nào đó trên thành menu, thì menu đó sẽ có style khác biệt so với các menu khác.

VnBlognet [dot] com : Thực ra đây là thủ thuật của Fandung mà các bạn biết qua trang Fandung.com và nay đang viết về thủ thuật blog bên mothuthuat.com

2Hình ảnh minh họa :

current-menu1 - mothuthuat.com
Khi xem ở trang đầu tiên của 1 label

current-menu2 - mothuthuat.com
Khi xem ở trang tiếp theo thì hiệu ứng current vẫn còn

2Tạo menu với hiệu ứng current:

- Để thực hiện menu này các bạn tạo 1 widget HTML/Javascript ở dưới Header và dán code bên dưới vào :

Code

<style type="text/css">
.nav {
border-top:1px solid #ddd;
background:#bbb;
width:692px;
height:30px;
}
.nav ul {display:inline;}
.nav li {
float:left;
padding:0 10px;
line-height:30px;
height:30px;
border-right: 1px solid #ddd;
}
.nav li:hover {background:#efefef;}

.nav li a{
text-decoration:none;
text-transform:uppercase;
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
letter-spacing:2px;
font-weight:900;
}
.current-cat{
background:#fff;
}
li.current-cat:hover{
background:#fff;
}
</style>

<script type='text/javascript'>
function currentpage (url,name) {
var name = name ;
var url = url;
var current = location.href;

if ((name=="Home")&&(current=="http://demo2.fandung.com/")) {
document.write ('<li class="current-cat"><a href="'+url+'">'
+name+'</a></li>');
}
else if ((name=="Label 1")&&(current.match(/label\/Label1/gi)=="label/Label1")) {
document.write ('<li class="current-cat"><a href="'+url+'">'
+name+'</a></li>');
}
else if ((name=="Label 2")&&(current.match(/label\/Label2/gi)=="label/Label2")) {
document.write ('<li class="current-cat"><a href="'+url+'">'
+name+'</a></li>');
}
else if ((name=="Label 3")&&(current.match(/label\/Label3/gi)=="label/Label3")) {
document.write ('<li class="current-cat"><a href="'+url+'">'+name+'</a></li>');
}

// vị trí thêm code tương tự để tạo các menu khác (vị trí 1)

else {
document.write ('<li><a href="'+url+'">'+name+'</a></li>');
}
}
</script>

<div class="nav">
<ul>
<script type='text/javascript'> currentpage("http://demo2.fandung.com/"
,"Home"); </script>
<script type='text/javascript'> currentpage("http://demo2.fandung.com/search/label/Label1"
,"Label 1"); </script>
<script type='text/javascript'> currentpage("http://demo2.fandung.com/search/label/Label2"
,"Label 2"); </script>
<script type='text/javascript'> currentpage("http://demo2.fandung.com/search/label/Label3"
,"Label 3"); </script>
<!-- vị trí thêm code tương tự để tạo các menu khác (vị trí 2) -->
</ul>
</div>

3Chỉnh sửa code CSS:

- Để thay đổi màu, độ rộng, chiều cao… của thanh Menu : các bạn chỉnh lại thông số trong code bên dưới:

Code
.nav {
border-top:1px solid #ddd;
background:#bbb;
width:692px;
height:30px;
}

- thay đổi màu hiệu ứng hover (rê chuột):

Code
.nav li:hover {background:#efefef;}

- thay đổi màu nền của menu current :

Code
.current-cat{
background:#fff;
}
li.current-cat:hover{
background:#fff;
}

4Chỉnh sửa code Javascript :

-  Code 1 :

thay http://demo2.fandung.com/ thành link blog của bạn

Code
if ((name=="Home")&&(current=="http://demo2.fandung.com/"))

Code 2 :
Code
else if ((name=="Label 1")&&(current.match(/label\/Label1/gi)=="label/Label1"))

+ lệnh này có ý nghĩa là khi name (tên menu hiển thị trên thanh menu) có giá trị là Label 1và trong link của trang hiện hành có chứa cụm kí tự "label/Label1” thì menu đó sẽ có hiệu ứng current. 

+ Ví dụ ta muốn tạo menu có tên là 
Tình Yêu và link của trang nhãn chứa các bài viết về tình yêu là:

http://demo2.fandung.com/search/label/Love thì code 2 của chúng ta sẽ có dạng như bên dưới :

else if ((name==”Tình Yêu")&&(current.match(/label\/Love/gi)==”label/Love"))

Lưu ý : lệnh match ở trong đọan code trên sẽ không chạy được với các nhãn tiếng việt và có kí tự khỏang trắng. Để chạy được các bạn phải chuyển các kí tự tiếng việt và kí tự khỏang trắng thành các chuỗi thay thế.

- Ví dụ như ở trên, nhưng menu Tình Yêu sẽ có link là:

http://demo2.fandung.com/search/label/Tình Yêu. Khi này bạn phải chuyển cụm kí tự Tình Yêu trong đọan code js thành như thế này:

T%C3%ACnh%20Y%C3%AAu và code js thứ 2 của chúng ta sẽ như thế này

Code
else if ((name==”Tình Yêu")&&(current.match(/label\/T%C3%ACnh%20Y%C3%AAu/gi)==”label/T%C3%ACnh%20Y%C3%AAu"))

- Để biết được việc các kí tự này sẽ được thay thế bằng kí tự nào, các bạn chỉ cần dán link chứa các kí tự đặt biệt đó lên thanh address của trình duyệt web là sẽ có kết quả ngay.

Code 3 :

Code
<script type='text/javascript'> currentpage("http://demo2.fandung.com/search/label/Label1"
,"Label 1"); </script>

- Đây là đọan code tạo menu, thay đổi lại các giá trị cho tương ứng.

Nguồn: vnblognet.com

Category: Menu | Views: 1288 | Added by: all4u | Rating: 0.0/0
Total comments: 181 2 »
18  
I have exactly what info I want. Check, please. Wait, it's free? <a href="http://jijqufadqg.com">Awosmee!</a>

17  
Learning a ton from these neat artselci.

16  
whats up all4u.dmon.com owner discovered your blog via Google but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have discovered website which offer to dramatically increase traffic to your site http://massive-web-traffic.com they claim they managed to get close to 4000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my website. Hope this helps :) They offer most cost effective services to increase website traffic at this website http://massive-web-traffic.com

15  
Want to make up to $2,543 a DAY with ZERO traffic?

... STOP. You need to see this...

http://make-2000usd-day.com

It's BRAND NEW, And just about the
most "ghetto" money making method I've ever seen...

$2,543 a DAY without ANY traffic?

No PPC, no PPV, no CPA, no so-called 'push
button softwares' scams, no 'loopholes'...

Something TOTALLY different.

... A REAL system that's been pulling in
over $2,000 a day and $14980/week!

Best of all? He's got REAL PROOF.

http://make-2000usd-day.com

(You'll even see REAL examples, not *just*
his $400k a year clickbank account)

Honestly - This has blown me away.

It requires no traffic, no investment and
absolutely NO experience.

And after trying out what the system is...
I can confidently say it works, too.

Don't miss out on this goldmine - http://make-2000usd-day.com

Talk soon,
Gabriela

14  
After getting more than 10000 visitors/day to my website I thought your all4u.dmon.com website also need unstoppable flow of traffic...

Use this BRAND NEW software and get all the traffic for your website you will ever need ...

= = > > http://mass-autopilot-traffic.net

In testing phase it generated 867,981 visitors and $540,340.

Then another $86,299.13 in 90 days to be exact. That's $958.88 a
day!!

And all it took was 10 minutes to set up and run.

But how does it work??

You just configure the system, click the mouse button a few
times, activate the software, copy and paste a few links and
you're done!!

Click the link BELOW as you're about to witness a software that
could be a MAJOR turning point to your success.

= = > > http://mass-autopilot-traffic.net

13  
Get up to 100000 forum backlinks with our backlinks service & massive targeted traffic

Your all4u.dmon.com website will get thousands of visitors/day using superb backlink blast today. See proof how website traffic increased from 400 to 4000 visitors/day and how your website can get same results - http://get-more-web-traffic.net

We are able post your custom post up to 100’000 forums worldwide, so your site get insane amount of backlinks
and as a result your website will be ranked #1 positions in search engines and your website will get large amount of free, targeted online web traffic from search engines in shortest time.

Most affordable and most powerful service for web traffic and backlinks in the world!

Are you ready to for massive traffic flood to your site? If yes then Order now: http://get-more-web-traffic.net

12  
What if there was a way to get thousands of visitors a day to your all4u.dmon.com website and make $144,000 in one month
with:

* No prior experience
* No SEO or tech experience
* No selling or cold calling
* No substantial investments in advertising or marketing

Sounds crazy, but it's true, and here's proof:

http://massive-fb-traffic.com

I don't know how long this system is going to be up, but you
owe it to yourself to check it out...

http://massive-fb-traffic.com

It will just take a minute, and it could change your life
for the better!

http://massive-fb-traffic.com

Best Regards,
Chris

11  
Get up to 100000 forum backlinks with our backlinks service & massive targeted traffic

Your all4u.dmon.com website will get thousands of visitors/day using best backlink blast today. See proof how web traffic increased from 400 to 4000 visitors/day and how your website can get same results - http://targeted-web-traffic.org

We are able post your custom post up to 100’000 forums worldwide, so your site get insane amount of backlinks
and as a result your website will be ranked #1 positions in search engines and your website will get amazing amount of free, targeted online web traffic from search engines in very short time.

Most affordable and most powerful service for web traffic and backlinks in the world!

Are you ready to for massive traffic flood to your site? If yes then Order now: http://targeted-web-traffic.org

10  
Are you as frustrated why your website traffic is low?

What if there was simple wordpress seo plugin which can drive your all4u.dmon.com wordpress website traffic from zero to 55000 visitors/month...??

Don't believe see proof here: http://wp-seo-pressor.com

Google keeps changing it’s algorithm and knocking sites our of prime positions resulting in an immediate drop in sales…

…It really gets me frustrated!

I’d even moved all my sites across to wordpress (because that’s what google says is the best platform) and the results were only slightly better.

That was until I found WP SEO Pressor, it’s a simple plugin you can use to get #1 rankings in search engines and get free laser targeted traffic for your website…

…YEP that’s right, I installed it and started to get some incredible results, check them out here:

http://wp-seo-pressor.com

I noticed that your site all4u.dmon.com sits on wordpress and that this could possibly help you out…

…all you gotta do is install it and follow the steps you can see how I did it here:

http://wp-seo-pressor.com

Let me know how you go…

Regards, Kevin

9  
hi dee hi all4u.dmon.com blogger found your blog via search engine but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have discovered site which offer to dramatically increase traffic to your blog http://xrumer-service.com they claim they managed to get close to 4000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my website. Hope this helps :) They offer best <a href=http://xrumer-service.com>services to increase website traffic</a> Take care. Jeremy

1-10 11-18
Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page