jquery - 带有 block 嵌套列表的内联列表用于菜单

Question

我正在尝试创建一个如下所示的菜单

我正在使用来自三个数据库表的嵌套列表在此 DEMO 中创建一个列表

当显示嵌套列表时，如何布置子菜单以适应顶部菜单而不移动顶部菜单项。我很高兴使用 css 和 jquery 来完成这项工作，非常感谢任何帮助

这是匹配 fiddle 的代码CSS:

#main-nav{
    background:#83150D;
    width:960px;
    min-height:50px;        
    margin:0 auto;
}
#main-nav ul{
  padding:0px;
  margin:0px;
  list-style-type:none;   
  background-color:#83150D;
}
#main-nav ul li{
    display:inline;
    float:left; 
    min-width:125px;
    width:auto;
    height:50px;
    padding:15px 20px;
}   

.topMenu ul li{
    display:inline;
    float:left;
    font-weight:bold;       
}
.topMenu li{
    color:#E6D3B5;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;

}
#main-nav .menuCategory ul{
    margin-top:20px;
    background-color:#fff;
    min-height:300px;
}
#main-nav .menuCategory ul li{  
    display:block;
    float:none;
    font-weight:normal;
    padding:0 0 20px 15px;
    background-color:#fff;
}
#main-nav .menuCategory li{
    color:#0D2B48;
    font-size:18px;
    background-color:#fff;
    text-transform:capitalize;
    padding:35px 0 0 25px;

}
.menuItem {

    background-color:#fff; 
    background-image:url('../images/topMenuDropdownBorder.png');
    background-position:100% 0;
    background-repeat: no-repeat;
}

.menuItem.first{
    background-image:none;
}
.menuItem li{
    background-image:url('../images/topMenuDropdownArrow.png');
    background-position:0 5px;
    background-repeat: no-repeat;
    min-width:150px;
    margin: 0 20px 0 0px;
    padding:0 0 10px 0;

}
.menuItem li a{
    color:#000;     
    font-size:15px;
    font-weight:normal;

}
.menuCategory{
    display:none;       
}

HTML:

<div id="main-nav">             
    <ul class="topMenu">
        <li>Men
            <ul class="menuCategory">
                <li>Equestrian
                   <ul class="menuItem">
                          <li><a href="men-equestrian-shirt">Shirts</a></li>
                           <li><a href="men-equestrian-jacket">Jackets</a></li>
                           <li><a href="men-equestrian-fleece">Fleeces</a></li>
                           <li><a href="men-equestrian-bodywarmer">Bodywarmers</a></li>
                           <li><a href="men-equestrian-sweater">Sweaters</a></li>
                           <li><a href="men-equestrian-trousers">Trousers</a></li>
                           <li><a href="men-equestrian-gloves">Gloves</a></li>
                   </ul>
                </li>
                <li>Shooting
                    <ul class="menuItem">
                        <li><a href="">Shirts</a></li>
                    </ul>
                </li>
                <li>Walking
                    <ul class="menuItem">
                        <li><a href="">Shirts</a></li>
                    </ul>
                </li>
                <li>Fishing
                    <ul class="menuItem">
                        <li><a href="">Jackets</a></li>
                    </ul>
                </li>
                <li>Lifestyle & Leisure
                    <ul class="menuItem">
                        <li><a href="">Jackets</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="topMenu">
        <li>Women
            <ul class="menuCategory">
                <li>Shooting
                    <ul class="menuItem">
                        <li><a href="">Shirts</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="topMenu">
        <li>Kids
            <ul class="menuCategory">
                <li>Walking
                    <ul class="menuItem">
                        <li><a href="">Gloves</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="topMenu">
        <li>Footwear
            <ul class="menuCategory">
                <li>Walking
                    <ul class="menuItem">
                        <li><a href="">Mens Walking Boots</a></li>
                        <li><a href="">Womens Walking Boots</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="topMenu">
        <li>Sports & Activities
            <ul class="menuCategory">
                <li>Walking
                    <ul class="menuItem">
                        <li><a href="">Gloves</a></li>
                        <li><a href="">Jackets</a></li>
                    </ul>
                </li>
                <li>Equestrain
                    <ul class="menuItem">
                        <li><a href="">Jackets</a></li>
                        <li><a href="">Boots</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>  

JQUERY:

$('#main-nav ul li').click(function(e){ 
    e.preventDefault();
    var label=$(this).html();
    if($('#main-nav ul li').hasClass('menu-open')){
        $('#main-nav ul li').removeClass('menu-open');          
        $('.menuCategory').css('display','none');
    }else{
        $('#main-nav ul li').addClass('menu-open');         
        $('.menuCategory').css('display','block');
    }

});

DEMO

Answer 1

我设法通过遍历数据库并创建一个顶级元素数组，然后为子 mists 创建一个 ul li ul li 然后将它们放入一个 div 来做到这一点

while($row = db_fetch_array($sql)){ 
    $newTopLevel = stripslashes($row['menu_title']);    
    $newCatLevel = stripslashes($row['category_title']);
    $menu_item = stripslashes($row['top_menu_item_title']);
    $menu_link = stripslashes($row['tag_sef_name']);

    //if new top level item
    if($newTopLevel!=$oldTopLevel){
        if($oldTopLevel!='1' && $i>0){//if not first top level item
            $subMenu .= '</ul></li></ul>';
        }
        if($i>0){//if not first sub menu
            $subMenu .='</li></ul>';
        }
        $subMenu .='<ul class="topMenuList"><li><ul class="menuCategory" id="'.substr($newTopLevel,0,3).'">';

        $oldCatLevel='1';   
        $topMenuArray[$j]=$newTopLevel; //add topmenu item to array 
        $j++;           
        $first=0;//set first submenu to zero
    }

    if($newCatLevel!=$oldCatLevel){//if new category
        if($oldCatLevel!='1'){//if not first category
            $subMenu .= '</ul></li>';           
        }
        if($first==0){//if first category in this top menu item
            $subMenu .= '<li class="first"><span class="topMenuCatName">'.$newCatLevel.'</span><ul class="menuItem">';  
        }else{
            $subMenu .= '<li><span class="topMenuCatName">'.$newCatLevel.'</span><ul class="menuItem">';        
        }
        $first++;

    }

    $subMenu .= '<li><a href="'.$menu_link .'">'.$menu_item.'</a></li>';//add item to menu

    $oldCatLevel = $newCatLevel;
    $oldTopLevel = $newTopLevel;
    $i++;
 }

 $output = '<div id="fullTopMenu"><ul>';//build top menu with sub menu
 foreach ($topMenuArray as $topMenuItem){
    $output .= '<li>'.$topMenuItem.'<span class="topMenuIcon"></span></li>';
 }
 $output .= '</ul>'.$subMenu.'</div>';

 return $output;