Để các bạn có một menu như ý muốn, làm đẹp thêm cho blog, hôm nay mình xin hướng dẫn tạo như sau: Demo
Bước 1. Đặt đoạn code dưới đây vào trước thẻ ]]></b:skin>
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0 }
.menu ul,.menu li {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:15px;
text-align:left; }
.menu h3 {
font-family:Arial, Helvetica, sans-serif;
font-weight:500;
font-size:12px;
line-height:15px;
margin-top:7px;
margin-bottom:14px;
padding-bottom:7px;
text-shadow: 1px 1px 1px #FFFFFF;
border-bottom:1px solid #888888; }
.menu {
list-style:none;
width:600px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #070534;
border: 0px solid #a40802;
border-top: 0px solid #fd190f;
background: -moz-linear-gradient(top, #454040, #3D1816);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A3E0C), to(#1C0402)); }
.menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li:hover {
z-index:2;
background:#070534;
border:1px solid #aaaaaa;
padding: 4px 9px 4px 9px;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px; }
.menu li.no_drop:hover {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li a {
color: #0AF034;
outline:0;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#0AF034; text-shadow: none; }
.menu li .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9YM3IXtDHtaXbj9x839wADLmyFPoCCHirQFJLRQpZYOwMuV2EWJ6VGoQoNwtXRboF89Sqojw6vZWJ8pLXeic0tXfDE_sOKLNGNX7OMCVSgYJK_38kzFnhYT5dJFj_lG3yXc2uq2KCPg/) no-repeat right 8px; }
.menu li:hover .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9YM3IXtDHtaXbj9x839wADLmyFPoCCHirQFJLRQpZYOwMuV2EWJ6VGoQoNwtXRboF89Sqojw6vZWJ8pLXeic0tXfDE_sOKLNGNX7OMCVSgYJK_38kzFnhYT5dJFj_lG3yXc2uq2KCPg/) no-repeat right 7px; }
.menu li:hover div a { color:#a40802; }
.menu li:hover div a:hover { color:#360603; }
.menu li ul li a:hover { color:#360603; }
.dropdown_1column,.dropdown_2columns {
margin:4px auto;
position:absolute;
background:#F4F4F4;
border:1px solid #aaaaaa;
border-top:none;
padding:10px 5px 10px 5px;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); }
.dropdown_1column,.dropdown_2columns {
left:-999em;
text-align:left;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
-khtml-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px; }
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 450px;}
.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto}
.col_1,.col_2 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px; }
.col_1 {width:130px;}
.col_2 {width:440px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {
font-size:12px;
line-height:16px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.
<b:section id='menu' maxwidgets='0' showaddelement='no'/>
<ul class='menu'>
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">Cot 1</a></li>
<li><a href="#">Cot 2</a></li>
<li><a href="#">Cot 3</a></li>
<li><a href="#">Cot 4</a></li>
<li><a href="#">Cot 5</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>
<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>
Chúc các bạn thành công!
Bước 1. Đặt đoạn code dưới đây vào trước thẻ ]]></b:skin>
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0 }
.menu ul,.menu li {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:15px;
text-align:left; }
.menu h3 {
font-family:Arial, Helvetica, sans-serif;
font-weight:500;
font-size:12px;
line-height:15px;
margin-top:7px;
margin-bottom:14px;
padding-bottom:7px;
text-shadow: 1px 1px 1px #FFFFFF;
border-bottom:1px solid #888888; }
.menu {
list-style:none;
width:600px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #070534;
border: 0px solid #a40802;
border-top: 0px solid #fd190f;
background: -moz-linear-gradient(top, #454040, #3D1816);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A3E0C), to(#1C0402)); }
.menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li:hover {
z-index:2;
background:#070534;
border:1px solid #aaaaaa;
padding: 4px 9px 4px 9px;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px; }
.menu li.no_drop:hover {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li a {
color: #0AF034;
outline:0;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#0AF034; text-shadow: none; }
.menu li .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9YM3IXtDHtaXbj9x839wADLmyFPoCCHirQFJLRQpZYOwMuV2EWJ6VGoQoNwtXRboF89Sqojw6vZWJ8pLXeic0tXfDE_sOKLNGNX7OMCVSgYJK_38kzFnhYT5dJFj_lG3yXc2uq2KCPg/) no-repeat right 8px; }
.menu li:hover .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig9YM3IXtDHtaXbj9x839wADLmyFPoCCHirQFJLRQpZYOwMuV2EWJ6VGoQoNwtXRboF89Sqojw6vZWJ8pLXeic0tXfDE_sOKLNGNX7OMCVSgYJK_38kzFnhYT5dJFj_lG3yXc2uq2KCPg/) no-repeat right 7px; }
.menu li:hover div a { color:#a40802; }
.menu li:hover div a:hover { color:#360603; }
.menu li ul li a:hover { color:#360603; }
.dropdown_1column,.dropdown_2columns {
margin:4px auto;
position:absolute;
background:#F4F4F4;
border:1px solid #aaaaaa;
border-top:none;
padding:10px 5px 10px 5px;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); }
.dropdown_1column,.dropdown_2columns {
left:-999em;
text-align:left;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
-khtml-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px; }
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 450px;}
.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto}
.col_1,.col_2 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px; }
.col_1 {width:130px;}
.col_2 {width:440px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {
font-size:12px;
line-height:16px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.
<b:section id='menu' maxwidgets='0' showaddelement='no'/>
<ul class='menu'>
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">Cot 1</a></li>
<li><a href="#">Cot 2</a></li>
<li><a href="#">Cot 3</a></li>
<li><a href="#">Cot 4</a></li>
<li><a href="#">Cot 5</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>
<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>
Chúc các bạn thành công!
kum ơm bài viets .mình cũng đANG tìm kiếm để tạo một cai menu thật đẹp đây!:X:A) :G)
Trả lờiXóaChúc bạn thiết kế đc 1 menu đẹp:D)
Trả lờiXóacam on vi cai bia bao cao nhung minh nghi nen co them mot vai cai doc dao hon
Trả lờiXóaNhờ bạn góp y thêm! Minh lập blog này phục vụ cho công việc! không quảng cáo cho nên cũng kg cần nhiều người vào xem cũng dc!:C)
Trả lờiXóahix, mình là con gái nên mấy cái phần này hơi khó, tìm mỏi cả mắt mà ko biết nó ở đâu để đặt code vào....>"<
Trả lờiXóaBẠN ƠI! MINH CŨNG CHƯA HIỂU Ý BẠN LẮM NHưNG THEO MINH NGHỈ PHẢI NGHIÊN CứU RÕ THỦ THUẬT RỒI MỚI HỎI! BẠN MỚI TIẾP CẬN BLOG THÌ LÀM VẬY LÀ TỐT LẮM RỒI!BẠN HỎI RÕ CHÚT NHA!:C) :D)
Trả lờiXóakeke...bài viết rất hay.
Trả lờiXóarất hay
Trả lờiXóa