erikTsomik
asked on
jquery tabs css
I am trying to create a nice css for the nested tabs , but do not know where to begin.
here is my html
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
</ul>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="ui-tabs-vertical_3" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-vertical ui-helper-clearfix">
<ul class="myMenu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>
</div>
</div>
<style>
.ui-tabs.ui-tabs-vertical {
padding: 0;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
float: left;
/*
width: 10em;
*/
background: #CCC;
border-radius: 4px 0 0 4px;
border-right: 1px solid gray;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
margin: 0.2em 0;
border: 1px solid gray;
border-width: 1px 0 1px 1px;
border-radius: 4px 0 0 4px;
overflow: hidden;
position: relative;
right: -2px;
z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
width: 100%;
padding: 3px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
padding-bottom: 0;
border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
float: left;
/*
width: 28em;
*/
border-left: 1px solid gray;
border-radius: 0;
/*
position: relative;
left: -1px;
*/
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-image: none;
background-color:green;
}
</style>
here is my html
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
</ul>
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<div id="ui-tabs-vertical_3" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-vertical ui-helper-clearfix">
<ul class="myMenu ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>
</div>
</div>
<style>
.ui-tabs.ui-tabs-vertical {
padding: 0;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
float: left;
/*
width: 10em;
*/
background: #CCC;
border-radius: 4px 0 0 4px;
border-right: 1px solid gray;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
margin: 0.2em 0;
border: 1px solid gray;
border-width: 1px 0 1px 1px;
border-radius: 4px 0 0 4px;
overflow: hidden;
position: relative;
right: -2px;
z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
width: 100%;
padding: 3px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
padding-bottom: 0;
border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
float: left;
/*
width: 28em;
*/
border-left: 1px solid gray;
border-radius: 0;
/*
position: relative;
left: -1px;
*/
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-image: none;
background-color:green;
}
</style>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Something like this for the horizontal tabs
http://www.jqueryrain.com/?Vd69wMvK
and the following link for the vertical
http://www.jqueryrain.com/?EoxzWsPG
http://www.jqueryrain.com/?Vd69wMvK
and the following link for the vertical
http://www.jqueryrain.com/?EoxzWsPG
ASKER
Here is the mock-up screen of what I am trying to a ccomplish
Presentation1.pptx
Presentation1.pptx
ASKER
and I want something like this
http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml
http://dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml
ASKER
Is that possible to shift inner tab somewhat outside so it looks like there are tabs horizontally and vertically sticking out from 1 box