Wordpress主题中顶栏(Zurb基础)的菜单漫游器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Wordpress主题中顶栏(Zurb基础)的菜单漫游器相关的知识,希望对你有一定的参考价值。

Turns Wordpress custom menus into responsive-ready menu that comes with foundation framework. code goes into functions.php
  1. /*
  2. http://codex.wordpress.org/Function_Reference/register_nav_menus#Examples
  3. */
  4. register_nav_menus(array(
  5. 'top-bar-l' => 'Left Top Bar', // registers the menu in the WordPress admin menu editor
  6. 'top-bar-r' => 'Right Top Bar'
  7. ));
  8.  
  9.  
  10. /*
  11. http://codex.wordpress.org/Function_Reference/wp_nav_menu
  12. */
  13. // the left top bar
  14. function foundation_top_bar_l() {
  15. wp_nav_menu(array(
  16. 'container' => false, // remove nav container
  17. 'container_class' => 'menu', // class of container
  18. 'menu' => '', // menu name
  19. 'menu_class' => 'top-bar-menu left', // adding custom nav class
  20. 'theme_location' => 'top-bar-l', // where it's located in the theme
  21. 'before' => '', // before each link <a>
  22. 'after' => '', // after each link </a>
  23. 'link_before' => '', // before each link text
  24. 'link_after' => '', // after each link text
  25. 'depth' => 5, // limit the depth of the nav
  26. 'fallback_cb' => false, // fallback function (see below)
  27. 'walker' => new top_bar_walker()
  28. ));
  29. } // end left top bar
  30.  
  31. // the right top bar
  32. function foundation_top_bar_r() {
  33. wp_nav_menu(array(
  34. 'container' => false, // remove nav container
  35. 'container_class' => '', // class of container
  36. 'menu' => '', // menu name
  37. 'menu_class' => 'top-bar-menu right', // adding custom nav class
  38. 'theme_location' => 'top-bar-r', // where it's located in the theme
  39. 'before' => '', // before each link <a>
  40. 'after' => '', // after each link </a>
  41. 'link_before' => '', // before each link text
  42. 'link_after' => '', // after each link text
  43. 'depth' => 5, // limit the depth of the nav
  44. 'fallback_cb' => false, // fallback function (see below)
  45. 'walker' => new top_bar_walker()
  46. ));
  47. } // end right top bar
  48.  
  49. /*
  50. Customize the output of menus for Foundation top bar classes
  51. */
  52.  
  53. class top_bar_walker extends Walker_Nav_Menu {
  54.  
  55. function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
  56. $element->has_children = !empty($children_elements[$element->ID]);
  57. $element->classes[] = ($element->current || $element->current_item_ancestor) ? 'active' : '';
  58. $element->classes[] = ($element->has_children) ? 'has-dropdown' : '';
  59.  
  60. parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
  61. }
  62.  
  63. function start_el(&$output, $item, $depth, $args) {
  64. $item_html = '';
  65. parent::start_el($item_html, $item, $depth, $args);
  66.  
  67. $output .= ($depth == 0) ? '<li class="divider"></li>' : '';
  68.  
  69. $classes = empty($item->classes) ? array() : (array) $item->classes;
  70.  
  71. if(in_array('section', $classes)) {
  72. $output .= '<li class="divider"></li>';
  73. $item_html = preg_replace('/<a[^>]*>(.*)</a>/iU', '<label>$1</label>', $item_html);
  74. }
  75.  
  76. $output .= $item_html;
  77. }
  78.  
  79. function start_lvl(&$output, $depth = 0, $args = array()) {
  80. $output .= " <ul class="sub-menu dropdown"> ";
  81. }
  82.  
  83. } // end top bar walker

以上是关于Wordpress主题中顶栏(Zurb基础)的菜单漫游器的主要内容,如果未能解决你的问题,请参考以下文章

基础zurb中的toggle-topbar问题

全宽居中导航顶栏 - Zurb Foundation

Zurb Foundation 4:如何在悬停时更改顶栏部分的背景颜色?

以编程方式打开基础 zurb 下拉菜单

scss 基础顶栏更改为移动菜单

Zurb/Foundation 框架:如何将 top-bar-section 向左对齐而不是向右对齐