How to make Tab View Menu
Menu tab view is very useful to save space in the blog, so in one of three menus we can enter the menu once, Therefore how to make the Menu Tab View
1. Login to your blogger account
<style type="text/css">
div.TabView div.Tabs
{height: 50px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Main Menu Top Width */
text-align:center ; height: 48px; /* Height of main menu above */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Main Menu Top Fonts */
font-weight:bold; color:#000; /* Top Main Menu Font Color */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Main Box border color */ overflow:hidden; background-color:#dfdfe0; /* Main Box background color */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs"> <a>TABVIEW MAIN MENU I</a>
<a>TABVIEW MAIN MENU II</a>
<a>TABVIEW MAIN MENU III</a>
</div>
<div style="width:300px; height:300px; " class="Pages">
<div class="Page">
<div class="Pad">
TABVIEW MENU I
</div>
</div>
<div class="Page">
<div class="Pad">
TAB VIEW MENU II
</div>
</div>
<div class="Page">
<div class="Pad">
TAB VIEW MENU III
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Notice the script that is red, it means that you can change it to suit your needs.
Hopefully useful
Comments
Post a Comment