当我导航到子菜单项时,如何让wp_nav_menu保持扩展?

时间:2013-09-04 06:00:02

标签: php html css wordpress navbar

我是Wordpress社区的新成员,目前我正致力于将静态HTML网站转换为WP平台。我的主题中几乎所有内容都有一个例外:导航菜单。

我正在尝试使用内置的导航功能,我很确定我已经在其他WP网站上看到了这一点,但我很难找到帮助来指导我完成这个领域(我为此道歉)已经在stackoverflow上询问了这个场景,我现在已经搜索了几天,也许我只是使用了错误的术语?)。

这是我的测试基地:http://ahathaway.n120.fiercethought.net/consumer-support/

该链接将带您进入网站上唯一一个应该有“子菜单”的部分,而我想要完成的是当用户导航到任何子网时子菜单保持扩展状态-menu项目(即如果您点击“会员表格”,子菜单不应该像当前那样消失。)

我不确定我到底缺少什么,而且我迫切需要在正确的方向上轻推,所以任何帮助都会非常感激!谢谢!

这是我的相关代码(如果您需要/想要查看其他任何内容,请告诉我,我试着保持这篇文章的简洁,至少在最初时):

来自header.php:

 <!-- Begin navigation menu -->
      <?php
                                // Top navigation menu
                                wp_nav_menu( array(
                                    'theme_location' => 'top-navigation',                                       
                                    'menu_id' => 'nav',
                                    'menu_class' => 'left',
                            'depth' => 2,
                'walker' => new Walker_Nav_Menu));
  ?>
    <!-- End navigation menu -->

这是style.css(因为这是一个转换,需要看起来尽可能接近相同,所以很多CSS保持不变:

    /* The following is from the reset.css originally housed */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

/* The following CSS came from screen.css from the original website  */


body {background: #3279b3; color: #333; font: 13px/17px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
strong {font-weight: bold;}
p {margin: 10px 0;}
p.small {font-size: 11px; line-height: 14px; color: #666;}
label {font-weight: bold;}
input, textarea {margin: 5px 0 10px 0; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
textarea {width: 500px; height: 100px; font-size: 11px; padding: 5px;}
a {color: #738403; font-weight: bold;}
hr {margin: 20px 5px; border: none; border-bottom: 1px solid #bed6e9; clear: left;}
* + html hr{margin: 10px 5px 0 5px; padding: 0; border: none !important; line-height: 1px; color: #bed6e9;}

#wrapper {width: 100%; margin: 0 auto; background: url(/_assets/bg_body.png) top center repeat-y;}

#cols {width: 930px; margin: 0 auto; background: url(/_assets/bg_cols.png) 0 0 no-repeat; position: relative; overflow: auto; padding: 0 15px 10px 15px;}

#cols img.bnr {float: left; margin-bottom: 18px}

#topbar {height: 50px; width: 708px; position: absolute; top: 0; right: 14px;}
#topbar form {float: right; margin-top: 11px; background: url(/_assets/bg_search.png) 0 0 no-repeat; width: 175px; height: 28px;}
#topbar input {background: none; border: none; margin: 0;}
#topbar input.box {width: 130px; color: #c8e6ff; padding: 6px 0 6px 8px; font: 11px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; height: auto; line-height: 11px;  vertical-align: top;}
#topbar input.button {
    width: 34px;
    height: 26px;
    font-size: 1px;
    text-indent: -999em;
    cursor: pointer;
}

#weather {float: left; margin-top: 4px; font-size: 12px;}
#weather ul, #weather li {display: inline; line-height: 40px; color: #fff;}
#weather img {float: left; margin-right: 3px;}

#col_lft {width: 215px; float: left; background: url(/_assets/bg_nav.png) bottom center no-repeat;}

#nav {width: 215px;}
#nav li a, menu-item {color: #fff; font-size: 13px; text-decoration: none; height: 35px; line-height: 37px; width: 185px; padding: 0 15px; display: block; border-top: 1px solid #416788; border-bottom: 1px solid #17354e; font-weight: normal;}
#nav li a:hover, #nav li.current_page_item a, #nav li.parent-here a {color: #76d3ff; background: url(/_assets/bg_nav_hover.png) top center no-repeat; border-top: 1px solid #17354e;}
#nav li ul {display: none; margin: 0; padding: 0;}
#nav li ul li a {border: 0 !important;}
#nav li.current_page_item ul, #nav li.parent-here ul {display: inline !important;}
#nav li.current_page_item ul li a, #nav li.parent-here ul li a { color: #fff; font-size: 13px; font-weight: normal; text-transform: none; text-decoration: none; height: auto; line-height: 16px; width: 175px; display: block; padding: 10px 20px 0 20px; background-image: none !important; background-color: #082640 !important;}
#nav li ul li a:hover, #nav li ul li a:active, #nav li.parent-here ul li.current_page_item a { background-image: none !important; color: #259fd2; }
#nav li.last a, #nav li ul li.last a, #nav li ul li.herelast a {padding-bottom: 3px; border-bottom: none !important;}
#nav li ul li.last a {padding-bottom: 12px;}
#nav li.herelast a {background: url(/_assets/bg_nav_hover_bot.png) bottom center no-repeat; border: none !important; padding-top: 1px; padding-bottom: 3px;}
#nav li.last a:hover {background: url(/_assets/bg_nav_hover_bot.png) bottom center no-repeat;}
#nav li.herelast, #nav li.herelast a {color: #259fd2 !important;}
* + html #nav li ul {float: left; margin-left: -16px;}

#col_rht {width: 700px; float: right; margin-top: 65px;}
#col_rht h1 {font-size: 24px; font-weight: bold; color: #d87500; margin: 6px 5px 15px 5px; padding-bottom: 22px; line-height: 24px; border-bottom: 1px solid #88abc7;}
#col_rht h2 {font-size: 15px; line-height: 18px; font-weight: bold; margin: 20px 5px 10px 5px;}
#col_rht h3 {font-weight: bold; margin-top: 20px;}
#col_rht h3, #col_rht p, #col_rht ul, #col_rht ol, #col_rht table, #col_rht blockquote {margin: 10px 5px;}
#col_rht table {width: 690px;}
#col_rht table, td {border: 1px solid #b9d7ef; border-collapse: collapse;}
#col_rht td {padding: 6px 8px; line-height: 15px;}
#col_rht tr.odd {background: #dff1ff}
#col_rht ol li {
    list-style: decimal;
    margin-left: 20px;
    margin-bottom: 5px;
}
#col_rht ul li {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 5px;
}
#col_rht a {
    color: #008ec9;
    font-weight: bold;
}
#col_rht img.flt_lft {float: left; margin: 0px 15px 15px 5px;}
#col_rht img.flt_rht {float: right; margin: 5px 5px 15px 15px;}
#col_rht blockquote {background: #dff1ff; padding: 1px; border-left: 5px solid #82b0d4;}
#col_rht blockquote p {margin: 10px; padding: 0;}

#buckets {width: 700px; overflow: auto; background: url(/_assets/bg_buckets.png) 0 0 repeat-y; font-size: 12px;}
#buckets div.bucket {width: 202px; margin-right: 30px; float: left; padding: 0 5px; overflow:visible}
#buckets div.bucket.last {margin-right: 0; position:inherit}
#buckets h2 {font-size: 18px; font-weight: bold; color: #e07c06; margin: 0 0 12px 0; padding-bottom: 15px; line-height: 20px; border-bottom: 1px solid #bed6e9; line-height: 16px;}
#buckets h3 {font-weight: bold; margin: 10px 0;}
#buckets p {margin: 10px 0 0 0;}
#buckets label {margin-left: 10px;}
#buckets input {width: 195px;}
#buckets input.submit {margin-bottom: 0; width: 60px;}

#footer {width: 100%; height: 50px; margin: 0 auto; background: url(/_assets/bg_footer.png) bottom center no-repeat; padding-bottom: 40px;}
#footer p {margin: 0; padding: 15px 0 0 0; font-size: 11px; color: #666; line-height: 15px; text-align: center;}

2 个答案:

答案 0 :(得分:2)

有一个名为current_page_item的类负责菜单扩展。该类出现在li#menu-item-30的链接中。但是,current_page_item不存在,并由current_page_parent替换为子页面。这就是它没有显示的原因。

因此,我建议您在样式表中复制使用current_page_item的每个DOM标识符,并将current_page_parent放在其位置。这就是我的意思:

<强>之前:

#nav li.current_page_item ul li a, #nav li.parent-here ul li a { color: #fff; font-size: 13px; font-weight: normal; text-transform: none; text-decoration: none; height: auto; line-height: 16px; width: 175px; display: block; padding: 10px 20px 0 20px; background-image: none !important; background-color: #082640 !important;}

<强>后:

#nav li.current_page_parent ul li a, #nav li.current_page_item ul li a, #nav li.parent-here ul li a { color: #fff; font-size: 13px; font-weight: normal; text-transform: none; text-decoration: none; height: auto; line-height: 16px; width: 175px; display: block; padding: 10px 20px 0 20px; background-image: none !important; background-color: #082640 !important;}

为您找到的current_page_item的每个实例执行此操作,您应该很高兴。

顺便问一下,您使用的是Firebug还是Chrome / Safari开发人员工具?它们对调试这些类型的问题非常有用。这基本上就是我所做的一切。 :)

答案 1 :(得分:0)

我认为你还没有提到当前班级的任何造型

current_page_item这是保持菜单打开的类

在Css中您可以实现此样式:

#access {display: block; margin: 0 auto; width: 990px; z-index:999;}
#access .menu-header, div.menu {font-size: 13px; width:100%; float:left; height:42px; margin-top:10px; background:#F7F7F7;border:1px solid #e3e3e3; border-bottom:3px solid #e3e3e3;}
#access .menu-header ul,  div.menu ul {list-style: none; margin: 0;}
#access .menu-header li,  div.menu li {float: left; position: relative;padding-right:0px; z-index:9999;}
#access a {color: #fff; display: block; line-height: 35px; padding: 0 25px; text-decoration: none; font-size:14px;}
#access ul ul {display: none; position: absolute; top:42px; left:0px; float: left; width:170px; z-index: 999999999; background:#E3E3E3; padding:10px 6px 7px 10px;}
#access ul ul li {min-width:165px;}
#access ul ul ul {left: 100%; top: 0;}
#access ul ul a {line-height: 1em; padding:5px 10px; width:146px; height: auto; font-size:14px; text-transform:capitalize; margin-bottom:3px; background-color:#F7F7F7;}
.sub-menu li {background:none!important;}
/*.current_page_item > a{background-color:#BE100F; height:35px;}*/
.menu .sub-menu .current_page_item > a{background:none;}
.menu .current_page_item > a{background-color: #e3e3e3!important;    color: #333 !important;}
.menu .current-menu-parent > a{background-color: #e3e3e3!important;  color: #333 !important;}


#access ul ul :hover > a {background-color:#336699; color:#FFFFFF;}
#access ul li:hover > ul {display: block;}

在PHP中:

<div id="access">
      <?php
            $args = array(
            'theme_location' => 'header_menu',
            'menu' => 'Main Menu',
             'sort_column' => 'menu_order',
             'container_class' => 'menu-header'

        );
        wp_nav_menu($args);
            ?>
    </div>