由于本博客的主题默认是没有菜单栏的，介于自己的PHP、CSS相关技能有限，一直没有考虑自己制作一个。得知最近Google全站链接改版，为了让Google生成全站链接可不是什么简单的事，即便网站有了可观的流量，如果没有很直观明了的导航栏(菜单栏)，Google还是很难帮我们生成全站链接的。观察了很多有Google全站链接的博客，无一例外都是有着清晰导航栏(菜单栏)的，而且菜单项的链接地址深度大都只有一层。因为这个缘故，我终于下定决心，为CppLive 编程在线也制作一个导航栏(菜单栏)。

刚开始的时候，真是一窍不通，看着网上的很多教程，就是整不出来，后来发现自己跨不过去的那到砍是CSS，把链接地址列出来容易，因为只要调用Wordpress自带的几个函数就可以了，但是让链接有规则的排列，触发一些鼠标事件还得我们自己通过编写CSS代码实现，本人的CSS水平真是不敢恭维啊，让我照葫芦画瓢可以，要我从头开始写就是犯愁了，折腾了几个小时依旧没有任何进展，没办法了，只好找葫芦。照着别人写好的菜单栏CSS代码有针对性的改，不一会儿就搞定了，不过下拉的效果尚未实现，看哪天有空再弄吧。下面将修改的过程简要记录下，留着以后深入研究。

1、因为我使用的主题没有菜单，故需要向Wordpress注册一个导航菜单，在functions.php中加入如下代码。

/* 注册菜单，命名为Primary Navigation */
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'warrior' ),
) );

/* 下面函数是为了兼容之前的wp_list_pages() */
function warrior_page_menu_args( $args ) {
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'warrior_page_menu_args' );

2、注册好以后，需要在适当的地方调用导航菜单，显然是在header.php中调用，在header.php中加入如下代码。

<div id="nav">
<?php wp_nav_menu(); ?>
</div>

3、光有以上两步，生成的导航菜单是一列单纯的链接，极不美观，所以需要在style.css中编写nav类的实现，加入如下代码。

#nav {
    width: 985px;
    height: 47px;
    position: relative;
    padding-left: 15px!important;
    left: 0px;
}
#nav li {
    line-height: 46px;
    position: relative;
    float: left;
    list-style-type: none;
    padding: 0 15px;
    white-space:nowrap;
}
#nav li.down {
    background: url(images/down.gif) right center no-repeat;
}
#nav li.downover {
    background: url(images/down_over.gif) right center no-repeat;
}
#nav a {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}
#nav li ul {
    position: absolute;
    top: 35px;
    left: 10px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    padding: 0;
    clear: both;
    display: none;
    z-index: 1000;
}
#nav li ul li {
    padding: 0;
    width: 100%;
    line-height: 20px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#nav li ul li a {
    display: block;
    width: 100%;
    padding: 3px 10px;
    text-shadow: 1px 1px 1px transparent;
}
#nav li ul li a:hover {
    color: #fff;
}
#nav ul ul{
    left: 100%;
    top: -1px;  
}
#nav {
    background: url(images/nav_skyblue.png);
}
#nav a {
    text-shadow: 1px 1px 1px #006f8f;
}
#nav a:hover {
    color: #b0ecff;
}
#nav li ul {
    border: 1px solid #007496;
}

除非注明，文章均为CppLive 编程在线原创，转载请注明出处，谢谢。

本文地址：https://www.cpplive.com/html/928.html