0

我正在为我的网站制作一个垂直导航栏......不幸的是没有达到我想要的所以希望我能得到一些解决方案。

垂直菜单有类别列表...后跟每个类别的子类别使用以下jquery附加这里是代码。

<div id="nav_menu">
<div id="menu_box">
<ul id="menu_ul">
<li ><a href="#" id="1" >Category1</a></li>
<li ><a href="#" id="1" >Category1</a></li>
<li ><a href="#" id="1" >Category1</a></li>
etc....
</ul>
</div>

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>

这里每个类别的子菜单如下...

<li id="1" href="#">category1
  <ul>
  <li><a href="#">subcate1</a></li>
  <li><a href="#">subcate2</a></li> 
  <li><a href="#">subcate3</a></li>
   .
   .
   .
  etc    
  </ul>
</li>

jquery 代码是......就像这样 //文档准备好的导航菜单

        $(".category").live('mouseover',function(event){
        $("#menu_slider").show();
        var D=$(this).html();
        var id=$(this).attr('id');

        var V=$("#hide"+id).html();
        $("#submenu_ul").html(V);
        $("#menu_slider h3").html(D);   
});
    //Document Click
    $(document).mouseup(function()
    {
     //$("#menu_slider").hide();

    });

    //Mouse click on sub menu
    $("#menu_slider").mouseup(function()
    {
    return false
    });

    //Mouse click on my account link
    $("#menu_box").mouseup(function()
    {
    return false
    });

它在这里工作正常，当我更改布局时......根据我的布局要求这样

<div class="container nav_menu">
<div class="sidebar menu_box">
<ul class="menu_ul">
</ul>
</div>
</div> 

<div id="menu_slider">
<ul id="submenu_ul">
</div>
</div>

jquery 功能不起作用它没有将 html 内容附加到mennu_slider submenu_ul ...我将它们更改为 jquery 中的类选择器...一个问题

第二个是..我希望菜单是这样的，请查看图片并建议我如何实现这一点。这种菜单在所有购物网站上都可以看到，所以我正在努力让它发挥作用……请找到所附的图片！

请看附件。图 1 在主页上，默认情况下它应该显示所有类别，但在其他页面上应该关闭，并且应该在悬停效果上工作，如图所示。

image2 我到目前为止所取得的成就。

我想要导航菜单

我到现在为止所做的

4

0 回答 0