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

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

Thứ Bảy, 4 tháng 8, 2012

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 }

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

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;

}