本

来想直接写在JVfantasy制作那篇东西上，后来发现细节太多了，还是分段记录比较系统。
以下纯粹是我个人的理解，不知道是否涉及一些专业名词，总之是按自己看得懂的方式记录的。

下面是针对几个盒子进行的记录

导航菜单

首先要在主函数模板functions.php注册导航菜单：

  1. // 注册导航菜单
  2. register_nav_menus ( array (
  3.     'header-menu' => __ ( '顶部导航菜单' ) 
  4. ) );

注册好之后会在后台-菜单 下面出现复选框，这相当于一个钩子，这样就可以选择自定义的菜单作为导航了。
然后就是在header.php或者其他模板调用wp的导航菜单函数：

  1. <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container'=> false ,'menu_class' => 'nav-menu'));?>

参照wordpress官方文档针对 wp_nav_menu()函数的说明。

子菜单的显示

子菜单（二级菜单）采用下拉式显示，那么首先得让子菜单隐藏，然后悬停主菜单列表时使子菜单块状化，此时就会显示出来，其次就是调整子菜单显示时的位置。

  1. #left .nav-menu .sub-menu{
  2. display:none;
  3. }
  4. #left .nav-menu li:hover > .sub-menu{
  5. display:block;
  6. position:absolute;
  7. width:200px;
  8. padding:0;
  9. margin:0;
  10. font-size:16px;
  11. color:#7B7B7B;
  12. left:200px;
  13. background:#f6f6f6;
  14. margin-top:-50px;
  15. }

其中的 display:none、display:block、position:absolute 是必不可少的。
上面是侧栏纵向导航菜单的样式，横向导航也有，只不过换一下位置而已。本站也有示例，参考下面：
http://www.inlojv.com/pure-css-drop-down-menu-navigation.html
2014-08-03_wptheme

TAGS:  

本站文章除注明转载/出处外，均为本站原创或翻译。若要转载但请务必注明出处，尊重他人劳动成果。

转载请注明出处链接 : https://www.inlojv.com/3878.html