jquery ui tabs sub navigation

Question

Я до сих пор новичок в веб-дизайне, и у меня есть dew в jquery ui. Я пытаюсь использовать функцию tabs в качестве навигации для страницы, которую я разрабатываю. Кто-нибудь имеет представление о том, как я могу заставить подчиненную навигацию вести себя как вкладка li? А также, когда щелкает суб-навигатор, чтобы выделить родительскую вкладку li, но панель содержимого отображает выбор подменю. Кто-нибудь знает, где я контролирую, что отображается на выбранной вкладке?

Я попытался использовать навыки jquery, которые у меня есть. Я написал функцию щелчка, которая сделала вкладку about активной вкладкой, но отображает содержимое на вкладке about, когда я хотел бы, чтобы он отображал информацию из выбора sub nav. Я также попытался просто добавить активный класс в меню about, и он создает отвратительный вывод на странице.

Вот мой 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); 

Fiddle здесь 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;