jquery实现二级导航菜单

文章目录

博客的内容变多了之后,如果只有一级的导航菜单最多也就5,6个分类,用户往往难以迅速的找到自己感兴趣的内容,这时就需要二级导航菜单了。下面介绍下如何使用jquery实现二级导航菜单。

php内容输出

事实上wordpress已经支持了自定义菜单,你可以使用自定义菜单,亦可以使用代码来实现。代码更加简洁些吧,我是这么想的,给一段输出首页、分类、独立页面的代码。

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
function dm_page_menu( $args = array() ) {
 $defaults = array('sort_column' => 'menu_order, post_title', 'menu_class' => 'menu', 'echo' => true, 'link_before' => '', 'link_after' => '');
 $args = wp_parse_args( $args, $defaults );
 $args = apply_filters( 'wp_page_menu_args', $args );
 
 $menu = '';
 
 $list_args = $args;
 
 // Show Home in the menu
 if ( isset($args['show_home']) && ! empty($args['show_home']) ) {
  if ( true === $args['show_home'] || '1' === $args['show_home'] || 1 === $args['show_home'] )
   $text = __('Home');
  else
   $text = $args['show_home'];
  $class = '';
  if ( is_front_page() && !is_paged() )
   $class = 'class="current_page_item"';
  $menu .= '<li ' . $class . '><a href="' . get_option('home') . '">' . $args['link_before'] . $text . $args['link_after'] . '</a></li>';
  // If the front page is a page, add it to the exclude list
  if (get_option('show_on_front') == 'page') {
   if ( !empty( $list_args['exclude'] ) ) {
    $list_args['exclude'] .= ',';
   } else {
    $list_args['exclude'] = '';
   }
   $list_args['exclude'] .= get_option('page_on_front');
  }
 }
 
 $list_args['echo'] = false;
 $list_args['title_li'] = '';
 $menu .= str_replace( array( "\r", "\n", "\t" ), '', wp_list_categories('depth=2&echo=0&title_li=').wp_list_pages($list_args) );
 
 if ( $menu )
  $menu = '<ul id="' . $args['menu_class'] . '">' . $menu . '</ul>';
 
 $menu = apply_filters( 'wp_page_menu', $menu, $args );
 if ( $args['echo'] )
  echo $menu;
 else
  return $menu;
}

只需要在header.php中调用:

1
<?php dm_page_menu('show_home=1&menu_class=navbar'); ?>

html及css

html结构一般如下所示:

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
<div id="menu">
    <ul id="navbar">
        <li class="..."><a href="http://.../">Home</a></li>
        <li class="...">
            <a href="http://.../">菜单1</a>
            <ul class="children">
                <li class="..."><a href="http://.../">菜单项1</a></li>
                <li class="..."><a href="http://.../">菜单项2</a></li>
                <li class="..."><a href="http://.../">菜单项3</a></li>
            </ul>
        </li>
        <li class="...">
            <a href="http://.../">菜单2</a>
            <ul class="children">
                <li class="..."><a href="http://.../">菜单项4</a></li>
            </ul>
        </li>
        <li class="...">
            <a href="http://.../">菜单3</a>
            <ul class="children">
                <li class="..."><a href="http://.../">菜单项5</a></li>
                <li class="..."><a href="http://.../">菜单项6</a></li>
            </ul>
        </li>
        ...
    </ul>
</div>

css样式化一下:

先要为#menu ul li 添加position:relative;属性,这个很重要。下面样式化二级菜单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 二级菜单 */
#menu  ul.children {
    display:none; /* 初始化页面时不显示出来 */
    width:180px;
    position:absolute;
    top:37px;
    left:0px;
    background: #eceef0;
}
/* 二级菜单的菜单项 */
#menu ul.children li {
    float:none; /* 垂直排列 */
    margin:0;
    padding:3px 0;
 
}

Jquery控制下拉效果

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function()
    {
        $("#navbar li").hover(function()
        {  
        $('ul', this).stop(false,true);
            $('ul', this).slideDown(300);
        },function()
        {
        $('ul', this).stop(false,true);
           $('ul', this).slideUp(300);
        });
    });

总结

都是经过亲自实验的并且是我正在用的,具体效果可以看我的导航菜单。

本文出自 TENNFY博客,转载时请注明出处及相应链接。

本文永久链接: https://www.tennfy.com/484.html

下一篇文章:

上一篇文章:

4人参与了讨论

  1. 博主你的博客排版错位了

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

6 + 0 = ?


您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

返回顶部