html - ul タグが多すぎます... ul タグを別のものに変換する必要があります

Question

改訂...下部に追加情報...

動的に作成され、ネストされたメニューを 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;
}?>

score 0 · Accepted Answer

強調表示された行を完全に取り除き、作成するルートタグにクラスをbuildMenu追加するように関数を変更する必要があります。sf-menuul

または、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);

          ....
}?>

score 0 · Accepted Answer

あなたはあなたを削除することができます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;
}

html - ul タグが多すぎます... ul タグを別のものに変換する必要があります

2 に答える 2

Related

Reference