Thủ thuật Thesic : tạo menu 2 tầng

Live Demo : http://thuthuatwordpress.com/simplethesic

Menu 2 tầng giúp tăng click do được cung cấp nhiều thông tin và thiết kế bắt mắt hơn .

Mặc định có thể tạo Menu 2 level đơn giản bằng cách .. xuống dòng ;) { Live demo }

Các bước design nav Menu với css :

Bước 1 : Dời vị trí thành Menu xuống dưới ảnh nền Header


remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'my_navmenu');

Bước 2 : Thêm & tùy chỉnh code custom_functions

DOwnload code: http://adf.ly/BI6mu

Bước 3: Code Trang trí CSS { Paste vào custom_css }

.nav{
border-top:1px solid #e48902;
border-bottom:1px solid #e48902;
list-style:none;
font-size:9pt;
line-height:100%;
font-weight:100;
margin:0px;
padding:0px;
background:#eee;
float:left;
width:100%;
font-family: Verdana;
}
.nav ul{
margin:0px;padding:0px; float:left; width:100%;
}
.nav li.noline{
border:0;
}
.nav li{
border-right:1px solid #555;
float:left;
display:block;
padding:0px;
margin:0px;
}
.nav li a{
color:#323232;
text-decoration:none;
display:block;
text-transform:uppercase;
padding:5px 11px;
margin:0px;
font-family: Verdana;
}
.nav li a span{
color:#d83900;
text-transform:lowercase;
display:block;
font-size:9px;
font-family: Verdana;
}
.nav li a:hover, .nav li a:hover span{
background:#fed758;
color:black!important;
font-family: Verdana;
}
* html .nav li a:hover{
background:#333;color:#fff;
}
.nav li.lastnav{
border-left:1px solid #fff;
border-right:none;
float:right;
display:block;
}
.nav li.lastnav a:hover, .nav li.lastnav a:hover span{
background:#4a4a4a;
}
.clear {
clear:both;
height:0.001em;
margin:0px;
padding:0px;
display:block;
}