Question

我正在为我的网站制作一个垂直导航栏...遗憾的是没有实现我想要的东西，所以希望我能得到一些解决方案。

垂直菜单包含类别列表...后跟每个类别的子类别使用以下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到目前为止我取得的成就。

How I want the navigation menu

what I made till now

关于jquery垂直导航菜单的建议

0 个答案: