Tạo dropdown menu cho thesis theme

Hôm qua mathblog đã thay đổi giao diện cho thân thiện với bạn đọc hơn. Vì mới tiếp cận Thesis Theme nên khá vất vả mới làm xong cái menu theo phong cách Genesis Theme. Xin chia sẻ với các bạn.

Bước 1. Các bạn thêm vào file custom_functions.php đoạn code sau:
/* Tạo dropdown menu giống Genesis theme. http://mathblog.org*/
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’); /*(Bỏ nav menu mặc định của wordpress).*/
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’); /*(Chuyển nav menu xuống dưới header)*/
function topnav_menu() {
?>
<ul id=”topnav”>
<li><a href=”http://mathblog.org”>Trang chủ</a></li>
<li><a href=”http://mathblog.org/about-me”>Giới thiệu</a></li>
<li><a href=”http://book.mathblog.org/”target=”blank”>Tài liệu</a></li>
<li><a href=”http://tn.mathblog.org/”target=”blank”>Trắc nghiệm</a></li>
<li><a href=”http://mathblog.org/sitemap-2/”>Sơ đồ trang</a></li>
</ul>
<?php
}
add_action(‘thesis_hook_before_header’, ‘topnav_menu’);/* (Đoạn code trên thêm menu mới vào trước header. Các bạn có thể thêm tùy ý các tab)*/
Bước 2. Tùy chỉnh hiển thị bằng cách thêm đoạn code sau vào file custom.css:
.custom .menu { background: #333333;border-bottom: 0.1em solid #6495ED;clear: both;width: 960px;color: #FFFFFF;}
.custom .menu li { background: #333333;float: left;list-style: none;
margin: 0;
padding: 0;
}
.custom .menu a {
background: none;
color: #FFFFFF;
display: block;
font-size: 12px;
margin: 0;
padding: 6px 10px 5px 10px;
text-decoration: none;
position: relative;
}
.custom .menu .current a, .custom .menu .current-cat a { cursor: pointer }
.custom .menu ul {width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.custom .menu li a:hover, .custom .menu li a:active, .custom .menu .current_page_item a {
background: #000000;
color: #FFFFFF;
}
.custom .menu li a.sf-with-ul {
padding-right: 20px;
}
.custom .menu li a .sf-sub-indicator {
background: url(http://mathblog.org/wp-content/themes/thesis_18/custom/images/arrow-down.png);
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 11px;
right: 5px;
}
.custom .menu li li a, .custom .menu li li a:link, .custom .menu li li a:visited {
background: #333333;
color: #FFFFFF;
width: 158px;
font-size: 11px;
margin: 0;
padding: 6px 10px 6px 10px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
position: relative;
}
.custom .menu li li a:hover, .custom .menu li li a:active {
background: #000000;
}
.custom .menu li li a .sf-sub-indicator {
background: url(http://mathblog.org/wp-content/themes/thesis_18/custom/images/arrow-right.png);
top: 10px;
}
.custom .menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0 0 0 -1px;
padding: 0;
}
.custom .menu li ul a {
width: 160px;
}
.custom .menu li ul ul {
margin: -33px 0 0 179px;
}
.custom .menu li:hover ul ul, .custom .menu li:hover ul ul ul, .custom .menu li.sfHover ul ul, .custom .menu li.sfHover ul ul ul {
left: -999em;
}
.custom .menu li:hover ul, .custom .menu li li:hover ul, .custom .menu li li li:hover ul, .custom .menu li.sfHover ul, .custom .menu li li.sfHover ul, .custom .menu li li li.sfHover ul {
left: auto;
}
.custom .menu li:hover, .custom .menu li.sfHover {
position: static;
}
/***** Nav Menu ********************/
#topnav {
clear: both;
width: 960px;
height: 31px;
background: #333333;
color: #FFFFFF;
border-bottom: 1px solid #666666;
margin: 0;
padding: 0;
}
#topnav .wrap {
}
#topnav ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#topnav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#topnav li a {
color: #FFFFFF;
display: block;
font-size: 12px;
margin: 0;
padding: 6px 10px 5px 10px;
text-decoration: none;
position: relative;
}
#topnav li a:hover, #topnav li a:active, #topnav .current_page_item a {
background: #000000;
color: #FFFFFF;
}
#topnav li a.sf-with-ul {
padding-right: 20px;
}
#topnav li a .sf-sub-indicator {
background: url(images/arrow-down.png);
display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 11px;
right: 5px;
}
#topnav li li a, #topnav li li a:link, #topnav li li a:visited {
background: #333333;
color: #FFFFFF;
width: 158px;
font-size: 11px;
margin: 0;
padding: 6px 10px 6px 10px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
position: relative;
}
#topnav li li a:hover, #topnav li li a:active {
background: #000000;
}
#topnav li li a .sf-sub-indicator {
background: url(images/arrow-right.png);
top: 10px;
}
#topnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0 0 0 -1px;
padding: 0;
}
#topnav li ul a {
width: 160px;
}
#topnav li ul ul {
margin: -33px 0 0 179px;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li.sfHover ul ul, #topnav li.sfHover ul ul ul {
left: -999em;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li.sfHover ul, #topnav li li.sfHover ul, #topnav li li li.sfHover ul {
left: auto;
}
#topnav li:hover, #topnav li.sfHover {
position: static;
}
#topnav li.right {
float: right;
margin: 0;
padding: 6px 10px 6px 10px;
}
#topnav li.right a {
display: inline;
margin: 0;
padding: 0;
border: none;
background: none;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
}
#topnav li.right a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#topnav li.date {
}
#topnav li.rss a {
background: url(images/rss.png) no-repeat left center;
margin: 0 0 0 10px;
padding: 3px 0 3px 16px;
}
#topnav li.search {
padding: 0 10px 0 10px;
}
#topnav li.twitter a {
background: url(images/twitter-nav.png) no-repeat left center;
padding: 3px 0 1px 20px;
}