Tuesday, 27 August 2013

Organic tabs plugin open parent page

Organic tabs plugin open parent page

I'm using the organic tabs plugin -
http://css-tricks.com/4530-organic-tabs/ - and need a bit of help.
Is there a way for nav li to open a page on the site rather than a
submenu. For example, if you click on 'Practice' it redirects you to
http://www.claguelondon.co.uk/practice/ and the correct page is
highlighted.
HTML
<div id="example-one">
<ul class="nav">
<li class="nav-one"><a href="#home"
class="current">Home</a></li>
<li class="nav-two"><a href="#projects">Projects</a></li>
<li class="nav-three"><a href="#practice">Practice</a></li>
<li class="nav-four"><a href="#news">News</a></li>
<li class="nav-five last"><a href="#contact">Contact</a></li>
</ul>
<div class="list-wrap">
<ul id="home">
<li></li>
</ul>
<ul id="projects" class="hide">
<li><a href="http://www.claguelondon.co.uk/project-i">Project
I</a></li><br />
<li><a href="http://www.claguelondon.co.uk/project-ii">Project
II</a></li><br />
<li><a
href="http://www.claguelondon.co.uk/project-iii">Project
III</a></li><br />
<li><a href="http://www.claguelondon.co.uk/project-iv">Project
IV</a></li><br />
<li><a href="http://www.claguelondon.co.uk/project-v">Project
V</a></li>
</ul>
<ul id="practice" class="hide">
<li></li>
</ul>
<ul id="news" class="hide">
<li></li>
</ul>
<ul id="contact" class="hide">
<li></li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs (Example One) -->
CSS
/* Nav
------------------------------------------------------------ */
ul.nav {
float: left;
width: 150px;
}
#example-one {
background: #FFFFFF;
}
#example-one .nav {
overflow: hidden;
}
#example-one .nav li {
width: 97px; float: left;
}
#example-one .nav li.last {
margin-right: 0;
}
#example-one .nav li a {
display: block;
color: #999999;
font-size: 10px;
text-align: left;
border: 0;
text-decoration: none;
}
#example-one .nav li a:hover {
background-color: #FFFFFF;
}
#example-one ul {
list-style: none;
}
#example-one ul li a {
display: block;
padding: 0 0 4px 0;
color: #999999;
}
#example-one ul li a:hover, #example-one ul li a:focus {
background: #FFFFFF;
color: #000000;
}
#example-one ul li:last-child a {
border: none;
}
#example-one li.nav-one a.current, ul.featured li a:hover {
background-color: #FFFFFF;
color: #000000;
}
#example-one li.nav-two a.current, ul.core li a:hover {
background-color: #FFFFFF;
color: #000000;
}
#example-one li.nav-three a.current, ul.jquerytuts li a:hover {
background-color: #FFFFFF;
color: #000000;
}
#example-one li.nav-four a.current, ul.classics li a:hover {
background-color: #FFFFFF;
color: #000000;
}
#example-one li.nav-five a.current, ul.classics li a:hover {
background-color: #FFFFFF;
color: #000000;
}
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Sub Nav
------------------------------------------------------------ */
ul#projects.hide {
display: inline-block;
}
ul#projects li {
font-size: 10px;
display: inline-block;
}
ul#projects li a {
text-decoration: none;
padding: 0px;
}
ul#projects li a:hover {
color: #000000;
}

No comments:

Post a Comment