ul标签太多..需要将ul标签转换为其他内容

修订。。。底部添加了其他信息。。。

我正试图获得一个动态创建的嵌套菜单来处理一些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;
}?>

您需要完全去掉高亮显示的行，并修改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);
          ....
}?>

您可以删除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;
}

相关内容

最新更新

热门标签：