Tabbed Menu Doesn't work Properly
I am using a menu called Zozo Tabs.
I am using the same script throughout the website. However, I tried to add
a tab menu to the middle of the page, which we can call main part of the
page.
You can reach to my website from here
The code that I added to the website is
<div id="basic-usage">
<div id="tabbed-nav" class="z-slide normal hover large
z-icons-dark z-shadows z-bordered z-multiline z-tabs
horizontal top top-left white"><ul class="z-tabs-nav
z-tabs-mobile z-state-closed" style="display:
none;"><li><a href="#" class="z-link"
style="text-align: left;"><i
class="z-icon-menu"></i><span
class="z-title">Purchase<span>Get Zozo Tabs
Now!</span></span><span
class="z-arrow"></span></a></li></ul><ul
class="z-tabs-nav z-tabs-desktop z-hide-menu">
<li class="z-tab z-first" data-link="tab1"><a
class="z-link">Overview<span>New Features in
Zozo Tab</span></a></li>
<li class="z-tab" data-link="tab2"><a
class="z-link">Subscribe<span>New Releases and
Updates</span></a></li>
<li class="z-tab" data-link="tab3"><a
class="z-link">Templates<span>More than 12
Templates</span></a></li>
<li class="z-tab" data-link="tab4"><a
class="z-link">Documentation<span>Step-by-step
Guide</span></a></li>
<li class="z-tab z-last z-active"
data-link="tab5"><a
class="z-link">Purchase<span>Get Zozo Tabs
Now!</span></a></li>
</ul>
<div class="z-container" style="">
<div class="z-content" style="display: none;
position: absolute; left: -1224px;"><div
class="z-content-inner">
<h4>Overview</h4>
<p><strong>Slick Design</strong> and
Limitless Customization</p>
</div></div>
<div class="z-content" style="display: none;
position: absolute; left: -1224px;"><div
class="z-content-inner">
<h4>Some of it's key features</h4>
<ul class="icons">
<li>10 unique skins in 6 sizes</li>
<li>10 flexible ways to position</li>
<li>Autoplay support & SEO
friendly </li>
<li>Horizontal & vertical
tabs</li>
<li>Nested tabs</li>
<li>Multiple instances </li>
<li>Free updates & support </li>
</ul>
</div></div>
<div class="z-content" style="display: none;
position: absolute; left: 1224px;"><div
class="z-content-inner">
<h4>10 Preset themes</h4>
<ul class="icons">
<li>White</li>
<li>Crystal</li>
<li>Silver</li>
<li>Gray</li>
<li>Black</li>
<li>Orange</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>DeepBlue</li>
</ul>
</div></div>
<div class="z-content" style="position:
absolute; display: none; left: -1224px;"><div
class="z-content-inner">
<div id="tabbed-nav2" class="z-slide
underlined hover medium z-icons-dark
z-bordered z-tabs horizontal top
top-left red"><ul class="z-tabs-nav
z-tabs-mobile z-state-closed"
style="display: none;"><li><a href="#"
class="z-link" style="text-align:
left;"><i
class="z-icon-menu"></i><span
class="z-title">Methods</span><span
class="z-arrow"></span></a></li></ul><ul
class="z-tabs-nav z-tabs-desktop
z-hide-menu">
<li class="z-tab z-first"
data-link="tab1"><a
class="z-link">Getting
Started</a></li>
<li class="z-tab"
data-link="tab2"><a
class="z-link">Configuration</a></li>
<li class="z-tab"
data-link="tab3"><a
class="z-link">API</a></li>
<li class="z-tab z-active"
data-link="tab4"><a
class="z-link">Methods</a></li>
<li class="z-tab z-last"
data-link="tab5"><a
class="z-link">Events</a></li>
</ul>
<div class="z-container" style="">
<div class="z-content"
style="display: none;"><div
class="z-content-inner">
<h4>Getting Started</h4>
<p>The following
default options are
provided by the
plugin. They can be
overridden and
customized by passing
options object to the
initialization of the
pluqin and by using
HTML5 data attributes
on the container
element.</p>
</div></div>
<div class="z-content"
style="display: none;"><div
class="z-content-inner">
<h4>Configuration</h4>
<p>Zozo Tabs comes
with complete API.
Check it out at
zozoui.com</p>
</div></div>
<div class="z-content"
style="display: none;"><div
class="z-content-inner">
<h4>API</h4>
<p>Zozo Tabs comes
with complete API.
Check it out at
zozoui.com</p>
</div></div>
<div class="z-content
z-active" style="display:
block; position: relative;
left: 0px; top: 0px;"><div
class="z-content-inner">
<h4>Methods</h4>
<p>Zozo Tabs comes
with complete API.
Check it out at
zozoui.com</p>
</div></div>
<div class="z-content"
style="position: absolute;
display: none; left: 0px; top:
336px;"><div
class="z-content-inner">
<h4>Events</h4>
<p>Zozo Tabs comes
with complete API.
Check it out at
zozoui.com</p>
<h4>Some of it's key
features</h4>
<ul class="icons">
<li>10 unique
skins in 6
sizes</li>
<li>10 flexible
ways to
position</li>
<li>Autoplay
support & SEO
friendly </li>
<li>Horizontal
& vertical
tabs</li>
<li>Nested tabs</li>
<li>Multiple
instances </li>
<li>Free updates
& support
</li>
</ul>
</div></div>
</div></div>
</div></div>
<div class="z-content z-active"
style="display: block; position: relative;
left: 0px;"><div class="z-content-inner">
<h4>Purchase</h4>
<p><a
href="http://codecanyon.net/item/zozo-tabs/3327836?ref=ZozoUI">Get
Zozo Tabs from CodeCanyon.net</a></p>
</div></div>
</div></div>
</div>
Now it looks like this. It doesn't slide when I click to an item in the
tab panel.
No comments:
Post a Comment