html - jquery ui tabs sub navigation -


i'm still new web design, , have dove jquery ui. i'm attempting use tabs function navigation page i'm designing. have idea how can make sub navigation li's behave tab li's? , when sub nav li clicked, make parent tab li highlighted, content panel display sub menu selection. have clue control displayed in selected tab?

i've attempted use little jquery skills have. wrote click function made tab active tab, displays content tab, when display info sub nav selection. i've attempted add active class menu, , creates hideous output on page.

here 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> 

and 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 here https://jsfiddle.net/leggosteveo/d3byhbd9/2/

any , appreciated.

why reinvent wheel? there tons of jquery menus created should need. here's 1 lets customize need right on website including menu options , looks. displays html , javascript using if nothing else use model.

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

when using existing product you'll save time , of time can trust been more thoroughly tested.


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -