我是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;}
答案 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>