Mình vừa thiết kế xong cho blog của mình một thanh Top Navigation Menu như các bạn có thể thấy (thanh menu ở trên cùng). Lý do mình tạo thêm thanh menu này vì mình muốn đưa thêm nhiều page ra ngoài trong khi Primary Navigation Menu thì lại quá ngắn. Thông thường một Genesis Childtheme có hai thanh menu là Primary Navigation và Secondary Navigation. Một số themes đặt Secondary Navigation Menu ở bên trên nhưng một số themes lại đặt ở bên dưới của Primary Navigation Menu. Bây giờ mình sẽ hướng dẫn các bạn đưa thanh Secondary Navigation Menu lên trên để thành Top Navigation Menu hoặc tạo ra thêm một thanh Top Navigation Menu hoàn toàn mới.
Sử dụng Secondary Navigation Menu
Cách đơn giản nhất để tạo Top Navigation Menu là sử dụng Secondary Navigation Menu. Nếu thanh Secondary Navigation nằm ở bên dưới, chúng ta sẽ chuyển nó lên trên top bằng cách thêm code sau vào file funstion.php trong childtheme:
|
1 2 |
remove_action( 'genesis_after_header', 'genesis_do_subnav' ); add_action( 'genesis_before_header', 'genesis_do_subnav' ); |
Tạo thêm thanh menu mới
Trong trường hợp bạn vừa muốn sử dụng thanh Secondary Navigation Menu, vừa muốn có một thanh menu trên top. Khi đó chúng ta sẽ tạo thêm một thanh menu thứ ba. Để làm việc này, trước tiên chúng ta phải khai báo thêm một thanh menu mà mình đặt là Top Navigation Menu bằng cách sử dụng code:
|
1 2 3 4 |
add_theme_support ( 'genesis-menus' , array ( 'primary' => 'Primary Navigation Menu' , 'secondary' => 'Secondary Navigation Menu' , 'top' => 'Top Navigation Menu' ) ); |
Sau khi chèn code này vào file funstion.php, bạn vào Appearance -> Menus bạn sẽ thấy có thêm một thanh menu nữa có tên là Top Navigation Menu.
Tiếp theo chúng ta sẽ thêm nội dung cho menu này bằng cách dùng code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function top_navigation_menu() { if ( ! genesis_nav_menu_supported( 'top' ) ) return; if ( has_nav_menu( 'top' ) ) { $args = array( 'theme_location' => 'top', 'container' => '', 'menu_class' => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top', 'echo' => 0, ); $nav = wp_nav_menu( $args ); $pattern = genesis_markup( '<nav class="top">%2$s%1$s%3$s</nav>', '<div id="topnav">%2$s%1$s%3$s</div>', 0 ); $nav_output = sprintf( $pattern, $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) ); echo apply_filters( 'third_navigation_menu', $nav_output, $nav, $args ); }} |
Bây giờ bạn đã có được một thanh menu thứ ba, bạn có thể thêm các đối tượng cho thanh menu này giống như đối với Primary Navigation Menu và Secondary Navigation Menu.
Công việc cuối cùng là đưa Top Navigation Menu ra ngoài. Ta tiếp tục sử dụng code:
|
1 |
add_action( 'genesis_before_header', 'top_navigation_menu' ); |
Còn một việc nữa là chúng ta sẽ design thanh Top Navigation Menu sao cho phù hợp với giao diện của blog. Để làm việc này chúng ta sẽ thêm một số lớp css sau vào file style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/* Top Navigation ------------------------------------------------------------*/ #topnav { background: #000; clear: both; overflow: hidden; } #topnav .wrap { color: #fff; font-size: 13px; margin: 0 auto; width: 960px; } #topnav ul { float: right; margin: 0px; width: 100%; } #topnav li { float: right; text-align: center; list-style-type: none; font-family:"Times New Roman", Times, serif; font-size: 13px; margin: 0 0 0 10px; } #topnav li a { color: #fff; display: block; font-size: 15px; padding: 5px 17px 5px 15px; position: relative; text-decoration: none; } #topnav li a:hover, #topnav li a:active, #topnav .current_page_item a, #topnav .current-cat a, #topnav .current-menu-item a { background: #333; color: #fff; } #topnav li a .sf-sub-indicator { overflow: hidden; text-indent: -9999px; } #topnav li li a, #topnav li li a:link, #topnav li li a:visited { background: #fff; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; color: #CC0000; font-size: 13px; padding: 5px 10px; text-transform: none; width: 100px; text-align: left; } #topnav li li a:hover, #topnav li li a:active { background: #E0E0E0; } #topnav li ul { height: auto; left: -9999px; margin: 0 0 0 -10px; position: absolute; width: 100px; z-index: 9999; } |
Đây là code mình sử dụng, các bạn có thể thiết kế lại cho phù hợp với blog của mình.
Như vậy là bạn đã có được một thanh Top Navigation Menu hoàn chỉnh. Trong quá trình thực hiện nếu có vấn đề thắc mắc bạn hãy để lại comment bên dưới. Chúc bạn thành công! {c1}
