Hôm nay Mình sẽ giới thiệu đến cho các bạn một
mẫu menu mới hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi,
opera,.... Mẫu này có đặc điểm là các menu con sẽ sắp xếp thành từng cột với
những chuyên mục lớn và chuyên mục nhỏ. Các bạn có thể xem ảnh demo bên dưới.
EMO
» Cách thêm Dropmenu xổ dọc theo cột cho
blogger
1. Đăng nhập vào blog
2. Chọn Bố
cục (layout)
3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscip và dán đoạn code bên dưới vào.
<style>
/*
Menu http://namkna.blogspot.com/ */
#menu{width:100%margin:0
auto;padding:5px auto;height:50px;width:100%;margin:0
auto;background-color:#1E75A8;background: -webkit-gradient(radial, 80% 20%, 0,
80% 40%, 100, from(#fff), to(#1E75A8)); /* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #1fff, #1E75A8);
/* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner,
#fff, #1E75A8); /* IE 10 */ background: -ms-radial-gradient(80% 20%,
closest-corner, #fff, #1E75A8);}
#mega-menu
ul {list-style: none;left:0;top:1px;z-index:99}
ul#topnav
{float: left;width:98%;position: relative;height:
33px;background: none;}
ul#topnav
li {float: left;height: 33px;padding:
0px;}
ul#topnav
li a {font-weight:bold;padding:6px 24px 19px 10px;display: block;color:
#fff;text-shadow:1px 1px 0 #111;font-size:13px;text-decoration: none;}
ul#topnav
li:hover {background: #f5f5f5}
ul#topnav
li:hover a#fff1, ul#topnav li:hover a#fff2, ul#topnav li:hover a#fff3,
ul#topnav li:hover a#fff4, ul#topnav li:hover a#fff5, ul#topnav li:hover
a#fff6{color:#111;text-shadow:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO52Wp3hnyFLbELqUtFoA1eP-ZsIIa3lGp-FopVoXykdr5q4Ak_zDx02AaSceYLzN5GNu1K1v8ncSq7lfnd9CuqL5Ox_VbQks-lVUPjUko_GvO-YxvVFnbSVSrls8jggWU_6qf-CpjVRft/s1600/arrow_black-namkna-blogspot-com.gif);background-repeat:no-repeat;background-position:right 12px}
ul#topnav
li.mg-home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa7aRkCZxGBy4D8Om-wg4jeg6AROqS81z6gfGCC59PviMWE0XSR5Tc6jtCa84H_JkhWV9cv8JQM5IWwZ0LDvRx1C5FXo8md79uQSQQsML9NH_Lcz-SFuWWPWYiLYRtzy9ituFmv-DAxst/s1600/home-ld.fw-namkna-blogspot-com.png) no-repeat center center!important;width:45px;margin-top:-2px}
ul#topnav
li.sitemap {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMScKEMVzcFH1u1KxGem6WLiLsD5trgcMrgFmkVENBiWpHiYNOQEfD2ss1IBbb1K5Zw6xu21LT_mPga5GJtNN0jw4_97X3ImUwWO_pBt40s9-EEz_IVUfBy6BEPWF-7P5wb6NYSzQGGo4/s1600/sitemap-namkna-blogspot.png) no-repeat center center!important;width:45px;margin:0}
ul#topnav
li.sitemap a {height:15px;}
ul#topnav
li.mg-home a {height:15px;}
ul#topnav
li div.sub {position: absolute;display: none;top: 42px;background:
#fff;padding:-1px -2px 0px;border-right:1px solid #DBDBDB;border-left:1px solid
#DBDBDB;border-bottom:1px solid #DBDBDB;color:#000;margin-bottom:
0px;margin-top: -2px;margin-right: -2px;z-index:0}
ul#topnav
li div.sub a{font-weight:normal;text-shadow:none}
ul#topnav
li:hover div.sub {display: block;}
ul#topnav
li div.sub p {margin-bottom:1px;text-align:justify;}
ul#topnav
li div.sub div.cont {float: left;width:100%}
ul#topnav
li div.sub div.cont c1 {color:#111;padding:7px 4px;border-top:1px solid #fff;border-right:1px
solid
#DBDBDB;margin-top:0px;height:20px;width:179px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c2 {color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0;height:20px;width:150px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c3 {color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:153px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c4, ul#topnav li div.sub div.cont
c5{color:#111;border-top:1px solid #fff;border-left:1px solid
#DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:163px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c6{color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:161px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c7 {color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;border-right:1px solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-right:-3px;margin-top:0px;height:20px;width:166px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size:
13px;font-weight:bold;display:block;z-index:9}
ul#topnav
li div.sub div.cont c8 {color:#111;border-top:1px solid #fff;padding:7px
4px;border-right:1px solid #DBDBDB;margin-top:0px;height:20px;width:179px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c9 {color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:150px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c10 {color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:153px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c11{color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:163px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c12{color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:164px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c13{color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-top:0px;height:20px;width:160px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav
li div.sub div.cont c14 {color:#111;border-top:1px solid #fff;border-left:1px
solid #DBDBDB;border-right:1px solid #DBDBDB;padding:7px
4px;margin-left:-1px;margin-right:-3px;margin-top:0px;height:20px;width:166px;text-align:center;background:
#F5F5F5;font-family:tahoma;font-size:
13px;font-weight:bold;display:block;z-index:9}
ul#topnav
li div.sub div.cont a{display:block;
margin-top:0;padding:0;margin-right:-1px;padding:5px;color:#000;border-top:1px
solid #DBDBDB;background: #fff}
ul#topnav
li div.sub div.cont a:hover{background: #F48829;background:
-moz-linear-gradient(top, rgba(244, 150, 75, 1) 0%, rgba(217, 87, 0, 1)
100%);background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(244, 150, 75, 1)), color-stop(100%,rgba(217, 87, 0,
1)));background: -webkit-linear-gradient(top, rgba(244, 150, 75, 1)
0%,rgba(217, 87, 0, 1) 100%);background: -o-linear-gradient(top, rgba(244, 150,
75, 1) 0%,rgba(217, 87, 0, 1) 100%);background: -ms-linear-gradient(top,
rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f4964b',
endColorstr='#d95700',GradientType=0 );
background:
linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1)
100%);color:#fff !important;padding:5px;font-weight:bold}
ul#topnav
li div.ms1 {width:183px;left: 0px;}
ul#topnav
li div.ms2 {width:1196px;left: 0px;}
ul#topnav
li div.ms3 {width:1196px;left: 0px;}
ul#topnav
li div.ms4 {width:343px;left: 297px;}
ul#topnav
li div.ms5 {width:343px;left: 395px;}
ul#topnav
li div.ms6 {}
ul#topnav
li div.sub div.cs11 {width:182px}
ul#topnav
li div.sub div.cs21 {width:186px}
ul#topnav
li div.sub div.cs211 {height:120px;width:156px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs212 {height:120px;width:160px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs213 {height:120px;width:170px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs214 {height:120px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs215 {height:120px;width:168px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs216 {height:120px;width:173px;border-left:1px solid
#dbdbdb;margin-left:1px;}
ul#topnav
li div.sub div.cs31 {width:186px}
ul#topnav
li div.sub div.cs311 {height:93px;width:156px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs312 {height:93px;width:160px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs313 {height:93px;width:170px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs314 {height:93px;width:170px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs315 {height:93px;width:168px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav
li div.sub div.cs316 {height:93px;width:173px;border-left:1px solid
#dbdbdb;margin-left:1px;}
ul#topnav
li div.sub div.cs41 {width:170px;}
ul#topnav
li div.sub div.cs411 {width:170px;height:145px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav
li div.sub div.cs51 {width:170px}
ul#topnav
li div.sub div.cs511 {width:170px;height:93px;border-left:1px solid
#dbdbdb;margin-left:1px}
ul#topnav
li a.ftt{background:none;font-weight:bold;padding:0 4px 0 7px;display: block;color:
#fff;text-shadow:1px 1px 0 #111;font-size:13px;text-decoration: none;margin:6px
7px 0 0}
ul#topnav
li:hover a.ftt{color:#111;text-shadow:none;}
ul#topnav
a.f1, a.f2, a.f3, a.f4, a.f5{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaN2oJViN_DwMkdzcNRZNY1hCaFyS1UMZJcP0zHhca-TRAPAg-B7xYjtxWvwxL4eCR8ea5q1JWA0Y0Bl9y0Wz2bpj3ZSXDeaULKhwovNqpWDEobdHgD1XzGPOjw62EHx80hbs8ltFbzRLz/s1600/arrow_white-namkna-2.gif);background-repeat:no-repeat;background-position:right 12px}
ul#topnav
a.f1:hover, a.f2:hover, a.f3:hover, a.f4:hover,
a.f5:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO52Wp3hnyFLbELqUtFoA1eP-ZsIIa3lGp-FopVoXykdr5q4Ak_zDx02AaSceYLzN5GNu1K1v8ncSq7lfnd9CuqL5Ox_VbQks-lVUPjUko_GvO-YxvVFnbSVSrls8jggWU_6qf-CpjVRft/s1600/arrow_black-namkna-blogspot-com.gif);background-repeat:no-repeat;background-position:right 12px}
#search{background:transparent;float:right;width:180px;height:19px;margin-top:3px}
#search
form{float:left}
#search
input[type="text"]{background:#DDD;float:left;border:1px solid
#444343;width:146px;margin-top:1px;padding:2px
15px;font-size:12px;text-align:right}
#search
input[type="text"]:focus{background:#FFF}
#search
input[type="submit"]{display:none}
</style>
<!--Menu
Start http://namkna.blogspot.com/ -->
<div
id='menu'>
<div
id='mega-menu'>
<ul
id='topnav'>
<li><a class='f1' href='/'
id='fff1'><img height='25px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1j8TzcdBZybz_5jzmJjTNSRksFim5crQJ-eiQL-Rs2o9hXvZIieucePw6GSFiSvkpn0ODN7vRiaz_7Otr42OvlDHzmIGKHw4Yiq_28JWPg0zGKmwkkCTRFPthO429DN2K7kG_QONwpnt/s1600/icon_home-namkna-2.png' style='margin-top:-3px'/></a>
<div class='sub ms1'>
<div class='cont cs11'>
<a href='#'>Tác giả</a>
<a href='#'>Thông báo</a>
<a
href='#'>Namkna.blogspot.COM</a>
<a href='#'>Tin tức MMO</a>
<a href='#'>Thông tin liên
hệ</a>
<a href='#'>Chính sách
comments</a>
<a href='#'>Điều khoản sử
dụng</a>
</div></div></li>
<li><a class='f2' href='#'
id='fff2'>Ngân hàng</a>
<div class='sub ms2'>
<div class='cont cs21'>
<c1>Payza</c1>
<a href='#'>Đăng ký và
verify</a>
<a href='#' rel='prettyphoto'>Một số
loại phí</a>
<a href='#' rel='prettyphoto'>Hướng
dẫn chuyển tiền</a>
</div>
<div class='cont cs211'>
<c2>Liberty Reserve</c2>
<a href='#'>Hướng dẫn đăng
ký</a>
<a href='#' rel='prettyphoto'>Một số
loại phí</a>
</div>
<div class='cont cs212'>
<c3>Paypal</c3>
<a href='#'>Hướng dẫn đăng
ký</a>
<a href='#'>Một số lưu ý</a>
</div>
<div class='cont cs213'>
<c4>WebMoney</c4>
<a href='#'>Hướng dẫn đăng
ký</a>
</div>
<div class='cont cs214'>
<c5>Egopay</c5>
<a href='#'>Hướng dẫn đăng
ký</a>
</div>
<div
class='cont cs215'>
<c6>Perfect
Money</c6>
<a href='#'>Hướng dẫn đăng
ký</a>
<a href='#'>Một số loại phí</a>
</div>
<div
class='cont cs216'>
<c7>Thông
tin</c7>
<a href='#'>Zip Code</a>
</div>
</div>
</li>
<li><a class='f3' href='#'
id='fff3'>Chương trình</a>
<div
class='sub ms3'>
<div
class='cont cs31'>
<c8>ADF.LY</c8>
<a
href='#'>Hướng dẫn đăng ký</a>
</div>
<div
class='cont cs311'>
<c9>Chương
trình mới</c9>
</div>
<div
class='cont cs312'>
<c10>Đang
cập nhật</c10>
</div>
<div
class='cont cs313'>
<c11>Chương
trình mới</c11>
</div>
<div
class='cont cs314'>
<c12>Đang
cập nhật</c12>
</div>
<div
class='cont cs315'>
<c13>Chương
trình mới</c13>
</div>
<div
class='cont cs316'>
<c14>Chương
trình mới</c14>
</div>
</div></li>
<li><a
class='f4' href='#' id='fff4'>Blogspot</a>
<div
class='sub ms4'>
<div
class='cont cs41'>
<a
href='/search/label/namkna?max-results=10'>Giới thiệu căn bản</a>
<a href='#'>Thủ thuật</a>
<a href='#'>Hướng dẫn thiết
kế</a>
<a href='#'>Kỹ năng</a>
<a href='#'>SEO</a>
</div>
<div
class='cont cs411'>
<a href='#'>Hosting</a>
<a href='#'>CSS</a>
<a href='#'>HTML</a>
<a href='#'>Mã giảm giá</a>
<a href='#'>Mẫu Blog</a>
</div></div></li>
<li><a class='f5' href='#'
id='fff5'>Công cụ</a>
<div
class='sub ms5'>
<div
class='cont cs51'>
<c11>MMO</c11>
<a href='#'>Roboform</a>
</div>
<div
class='cont cs511'>
<c11>Blogspot</c11>
<a href='#'>Code Converter</a>
<a href='#'>Hex Color Codes</a>
</div>
</div></li>
<li class='sitemap'><a href='#'
title='Sơ đồ trang web'></a></li>
<div
id='search'>
<form
action='/search' class='search' id='searchform' method='get'>
<input
name='q' onblur='if (this.value == "") {this.value = "Type and
Enter";}' onfocus='if (this.value == "Type and Enter")
{this.value ="";}' size='30' type='text' value='Type and Enter'/>
</form>
</div>
</ul>
</div>
</div>
<div
class='clear'>
4.
Lưu mẫu lại
và xem kết quả nha.
» Tùy chỉnh nâng cao:
1.
Nếu các tiêu đề Menu bị tụt xuống dòng như ảnh bên dưới:
=> Khắc phục: hãy thay gí trị top:1px thanhg giá trị khác (Có thể sử dụng giá trị âm ví dụ:top:-10px)
2. nếu giữa tiêu đề menu và sub menu có khoảng cách hãy chỉnh lại height: 33px cho phù hợp.
3. Nếu không hiện các menu xổ xuống.
- Nguyên nhân là do các thuộc tính hidden trên
các thành phần của blog.
Không có nhận xét nào:
Đăng nhận xét