jquery ui标签子导航

Question

我还是新来的网页设计，并有进入jquery ui。我试图使用标签功能作为我正在设计的页面的导航。任何人有任何想法，我怎样才能使子导航李的行为像标签李的？另外，当点击子导航列表时，要使父标签突出显示，但内容面板显示子菜单选项。任何人都有线索控制选定选项卡中显示的内容？

我试图使用我有的小jQuery技能。我编写了一个点击函数，使关于选项卡成为活动选项卡，但它显示关于选项卡中的内容，当我希望它显示子导航选择中的信息时。我也试图将活动类添加到关于菜单，并在页面上创建一个可怕的输出。

这里是我的html

<div id="tabs" style="width: 1000px; margin: 4px auto; padding: 0px;"> 
     <ul id="menu"> 
      <li><a href="#home">Home</a></li> 
      <li id="aboutLink"><a href="#about">About</a> 
       <ul id="subNav" style="color: #220c00;"> 
        <li><a href="#about">About Iota</a></li> 
        <li><a href="#chapterHistory">Chapter History</a></li> 
        <li><a href="#chapterOfficers">Chapter Officers</a></li> 
        <li><a href="#communityPartners">Community Partners</a></li> 
        <li><a href="#chapterEvents">Chapter Events</a></li> 
        <li><a href="#interestedInIota">Interested in Iota</a></li> 
       </ul> 
      </li> 
      <li><a href="#photos">Photos</a></li> 
      <li><a href="#contactUs">Contact Us</a></li> 
      <li><a href="www.iotaphitheta.org">National Site</a></li> 
      <li><a href="#">Brothers Only</a></li> 
     </ul> 

，这是我的jQuery

main = function() { 
$('#subNav').addClass('subNav'); 
$('#aboutLink').hover(function() { 
    $('#subNav').removeClass('subNav');}, 
    function() { $('#subNav').addClass('subNav'); 
    }); 
$('#subNav').children().click(function() { 
    $('#tabs').tabs({active: 1}); 
    $('#subNav').removeClass('subNav'); 
    }); 
    }; 
$(document).ready(main); 

小提琴是这里https://jsfiddle.net/leggosteveo/d3byhbd9/2/

任何及所有的帮助深表感谢。

Answer 1

为什么要重新发明轮子？有很多已经创建的jQuery菜单应该可以满足你的需求。这里有一个让你可以在网站上自定义你需要的东西，包括菜单选项和外观。它还显示HTML和JavaScript的使用，所以如果没有别的，你可以用它作为模型。

http://cssmenumaker.com/menu/responsive-jay-dropdown-menu#

当使用现有的产品，你会节省时间，大部分的时间，你可以信任其被更彻底的测试。

Answer 2

所以，我看了你的评论，你真的想了解javascript，就是使用CSS3和HTML5简单的菜单变得很受欢迎，因为你不需要JQuery或JavaScript添加动画

只是改变了风格因为我没有使用jQuery UI的

入住这fiddle

<nav id="menu"> 
    <ul class="parent-menu"> 
     <li><a href="#">Home</a> 
     </li> 
     <li><a href="#">About Us</a> 
      <ul> 
       <li><a href="#">About Iota</a> 
       </li> 
       <li><a href="#">Chapter History</a> 
       </li> 
       <li><a href="#">Chapter Officers</a> 
       </li> 
       <li><a href="#">item</a> 
       </li> 
       <li><a href="#">item</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Photos</a> 
     </li> 
     <li><a href="#">Contact Us</a> 
     </li> 
     <li><a href="#">National Site</a> 
     </li> 
     <li><a href="#">Brothers Only</a> 
     </li> 
    </ul> 
</nav> 

CSS

p, ul, li, div, nav { 
    padding:0; 
    margin:0; 
} 
body { 
    font-family:Calibri; 
} 
#menu { 
    overflow: auto; 
    position:relative; 
    z-index:2; 
} 
.parent-menu { 
    background-color: #0c8fff; 
    min-width:200px; 
    float:left; 
} 
#menu ul { 
    list-style-type:none; 
} 
#menu ul li a { 
    padding:10px 15px; 
    display:block; 
    color:#fff; 
    text-decoration:none; 
} 
#menu ul li a:hover { 
    background-color:#007ee9; 
} 
#menu ul li:hover > ul { 
    left: 200px; 
    -webkit-transition: left 200ms ease-in; 
    -moz-transition: left 200ms ease-in; 
    -ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
} 
#menu ul li > ul { 
    position: absolute; 
    background-color: #333; 
    top: 0; 
    left: -200px; 
    min-width: 200px; 
    z-index: -1; 
    height: 100%; 
    -webkit-transition: left 200ms ease-in; 
    -moz-transition: left 200ms ease-in; 
    -ms-transition: left 200ms ease-in; 
    transition: left 200ms ease-in; 
} 
#menu ul li > ul li a:hover { 
    background-color:#2e2e2e; 
} 

要更改为你喜欢

-webkit-transition: left 200ms ease-in; 
-moz-transition: left 200ms ease-in; 
-ms-transition: left 200ms ease-in; 
transition: left 200ms ease-in;