0

已修订...底部添加了其他信息...

我正在尝试获得一个动态创建的嵌套菜单来处理一些 css，而我遇到的问题是我最终得到了一个额外的 ul 标签。因此，我想将具有与其关联的类的 (ul class='sf-menu') 标记转换为类似于 div 标记的东西，它不会创建列表结构的一部分。

这是我得到的结果

<nav class="main-menu">
<ul class='sf-menu'>
<ul>
  <li> <a href='index.php'>HOME</a> </li>
</ul>
</nav>

这是现有的CSS：

    nav.main-menu{ width:950px; margin:0 auto; background:url(../images/bg-nav.png) 0 0 repeat; padding-bottom:6px;}

    /* menu */
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu li {float:left; position:relative; background:url(../images/menu-line.jpg) 0 0 no-repeat; padding-left:1px; text-transform:uppercase; font:11px/15px Arial, Helvetica, sans-serif;}
.sf-menu li:first-child{ background:none; padding-left:0;}
.sf-menu li a {display:block;background:#1f2025; width:135px; padding:19px 0 18px; text-align:center; color:#eaeaea; position:relative; overflow:hidden;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.sf-menu li.last a{ width:134px;}
.sf-menu li a em{ font-style:normal;color:#eaeaea;}
.sf-menu li.sfHover a,.sf-menu li.current a,.sf-menu li a:hover{text-decoration:none; background:#e5e4e2;}
.sf-menu li.sfHover a em,.sf-menu li.current a em,.sf-menu li a:hover em{color:#1f2025;}
.sf-menu ul {position:absolute;top:-999em;z-index:99;width:172px;display:none;background:none; background:#1f2025; padding:3px;}
.sf-menu li li{padding:0; width:100%; font:10px/13px Arial, Helvetica, sans-serif;}
.sf-menu li li a,.sf-menu li.sfHover li a,.sf-menu li.current li a{color:#fff; background:#1f2025; width:auto; padding:10px;
        -webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
.sf-menu li li a:hover,.sf-menu li li.sfHover a,.sf-menu li li.current a{ background:#efeeee; color:#000;}
.sf-menu ul ul {position:absolute;top:-999em;z-index:99;width:172px;display:none;background:none; background:#1f2025; padding:3px;}
.sf-menu li li li{padding:0; width:100%;}
.sf-menu li li li a,.sf-menu li li.sfHover li a,.sf-menu li li.current li a{color:#fff; background:#1f2025; width:auto; padding:10px;}
.sf-menu li li li a:hover,.sf-menu li li li.current a{background:#efeeee; color:#000;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0px;top:53px; /* match top ul list item height */}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:179px; /* match ul width */top:0px;}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */    top:00px;}

这是正文代码：

<body>
<nav class="main-menu">
    <ul class='sf-menu'>  /*this is the line that needs fixing*/
        <?php echo buildMenu(0, $menu); ?>
    <div class="clear"></div>
</nav>

</body>

附加代码：

如果我要将类添加到列表的根 ul 标记中，如何将它与函数要首先生成的 ul 标记分开？我如何告诉它只向第一个 ul 标签添加一个类？

function buildMenu($parent, $menu)
{
   $menulist = "";
   if (isset($menu['parents'][$parent]))
   {
      $menulist .= "<ul>\n";
       foreach ($menu['parents'][$parent] as $itemId)
       {
          if(!isset($menu['parents'][$itemId]))
          {
             $menulist .= "   <li><a href='".$menu['items'][$itemId]['menuURL']."'>".$menu['items'][$itemId]['menuName']."</a></li> \n";
          }
          if(isset($menu['parents'][$itemId]))
          {
             $menulist .= "   <li><a href='".$menu['items'][$itemId]['menuURL']."'>".$menu['items'][$itemId]['menuName']."</a>";
             $menulist .= buildMenu($itemId, $menu);
             $menulist .= "</li> \n";
         }
         }
         $menulist .= "</ul> \n";
   }
   return $menulist;
}?>
4

2 回答 2

0

您需要完全摆脱突出显示的行并修改buildMenu函数，以便将sf-menu类添加到它创建的根ul标记中。

或者使用 javascript 在页面加载时动态添加类。

更新

您可以向函数添加可选参数以跟踪您所在的菜单级别。

function buildMenu($parent, $menu, $level = 1)
{
   $menulist = "";
   if (isset($menu['parents'][$parent]))
   {   
       $menulist .= "<ul";
       if ($level == 1)
       {
           $menulist .= " class='sf-menu'";
       }
       $menulist .= ">\n";
       foreach ($menu['parents'][$parent] as $itemId)
       {
          ....

             $menulist .= buildMenu($itemId, $menu, $level+1);

          ....
}?>
于 2012-07-30T01:08:51.677 回答
0

你可以删除你的ul

<nav class="main-menu">
    <ul>
        <li> <a href='index.php'>HOME</a> </li>
    </ul>
</nav>

并修改您的 CSS，例如：

nav.main-menu {
    width: 950px;
    margin: 0 auto;
    background: url(../images/bg-nav.png) 0 0 repeat;
    padding-bottom: 6px;
}

/* menu */
.main-menu,.main-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu li {
    float: left;
    position: relative;
    background: url(../images/menu-line.jpg) 0 0 no-repeat;
    padding-left: 1px;
    text-transform: uppercase;
    font: 11px/15px Arial, Helvetica, sans-serif;
}

.main-menu li:first-child {
    background: none;
    padding-left: 0;
}

.main-menu li a {
    display: block;
    background: #1f2025;
    width: 135px;
    padding: 19px 0 18px;
    text-align: center;
    color: #eaeaea;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.main-menu li.last a {
    width: 134px;
}

.main-menu li a em {
    font-style: normal;
    color: #eaeaea;
}

.main-menu li.sfHover a,.main-menu li.current a,.main-menu li a:hover {
    text-decoration: none;
    background: #e5e4e2;
}

.main-menu li.sfHover a em,.main-menu li.current a em,.main-menu li a:hover em {
    color: #1f2025;
}

.main-menu ul {
    position: absolute;
    top: -999em;
    z-index: 99;
    width: 172px;
    display: none;
    background: none;
    background: #1f2025;
    padding: 3px;
}

.main-menu li li {
    padding: 0;
    width: 100%;
    font: 10px/13px Arial, Helvetica, sans-serif;
}

.main-menu li li a,.main-menu li.sfHover li a,.main-menu li.current li a {
    color: #fff;
    background: #1f2025;
    width: auto;
    padding: 10px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.main-menu li li a:hover,.main-menu li li.sfHover a,.main-menu li li.current a {
    background: #efeeee;
    color: #000;
}

.main-menu ul ul {
    position: absolute;
    top: -999em;
    z-index: 99;
    width: 172px;
    display: none;
    background: none;
    background: #1f2025;
    padding: 3px;
}

.main-menu li li li {
    padding: 0;
    width: 100%;
}

.main-menu li li li a,.main-menu li li.sfHover li a,.main-menu li li.current li a {
    color: #fff;
    background: #1f2025;
    width: auto;
    padding: 10px;
}

.main-menu li li li a:hover,.main-menu li li li.current a {
    background: #efeeee;
    color: #000;
}

.main-menu li:hover ul,.main-menu li.sfHover ul {
    left: 0;
    top: 53px;
/* match top ul list item height */
}

ul.main-menu li:hover li ul,.main-menu li.sfHover li ul {
    top: -999em;
}

ul.main-menu li li:hover ul,.main-menu li li.sfHover ul {
    left: 179px;
/* match ul width */
    top: 0;
}

ul.main-menu li li:hover li ul,.main-menu li li.sfHover li ul {
    top: -999em;
}

ul.main-menu li li li:hover ul,.main-menu li li li.sfHover ul {
    left: 10em;
/* match ul width */
    top: 0;
}
于 2012-07-30T01:12:30.070 回答