Home/ Questions/Q 8304299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T17:48:16+00:00

REVISED…ADDITIONAL INFO ADDED AT BOTTOM… I am trying to get a dynamically created, nested

  • 0

REVISED…ADDITIONAL INFO ADDED AT BOTTOM…

I am trying to get a dynamically created, nested menu to work with some css and the problem I’m have is that I end up with an extra ul tag. So I would like to convert the (ul class=’sf-menu’) tag that has a class associated with it to something that like a div tag that isn’t creating part of the list structure.

This is the result I’m getting

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

here is the existing 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;}

This is the body code:

<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>

ADDITIONAL CODE:

If I am to add the class to the root ul tag of the list how do I separate it from the ul tag that the function wants to generate first?
how do I tell it to add a class only to the first ul tag?

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;
}?>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to get rid of the highlighted line altogether and modify the buildMenu function so that it adds the sf-menu class to the root ul tag that it creates.

    Or add the class dynamically on page load using javascript.

    Update

    You could add an optional arguement to the function to track which menu level you’re in.

    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);

          ....
}?>
    • 0