StarMedia
Va asteptam in grupul nostru de pe facebook: Click

Distribuiţi
Vezi subiectul anteriorIn josVezi subiectul urmator
avatar
Mr.Bonu$s
V.I.P
V.I.P
Mesaje : 2900
Varsta : 23
Localizare : -=[Italy]=-
Sunt pe forum din : 06/08/2009

[CSS] Tab Select

la data de Sam 07 Ian 2012, 01:55

menu.css
Cod:
.menu { color:#272727; height:25px;width:100%; padding-left:5px; font-size:13px; text-decoration:none;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; }

.menu li a
{float:left; padding:5px 10px; margin:0px 5px 5px 0; text-decoration:none; border-left:1px solid #444;border-right:1px solid #444; font-weight:bold; background:url(sprite.gif) 0 0 repeat-x; font-size:90%;color:#fff}
.menu li a.tabactive
{border-color:#f60915; background-position:0 -96px; color:#fff !important; text-decoration:none;border-left:1px solid #444;border-right:1px solid #444;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4
{border:1px solid #444444; width:99%; text-align:center;padding:6px 0px; font-size:13px; color:#CCCCCc; text-decoration:none; background-color:#000;}

menu_tab.js

Cod:
/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
www.kollermedia.at | www.austria-media.at
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/

//EASY TABS 1.2 - MENU SETTINGS
//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink")
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent")
//Set the number of your tabs
var tabcount = new Array("3")
//Set the Tab wich should load at start (In this Example:Tab 2 visible on load)
var loadtabs = new Array("2") 
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 1;
//the speed in seconds when the tabs should change
var changespeed = 7;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;
//END MENU SETTINGS

/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}

HTML Code
Cod:
<div class="menu">
              <ul>
                <li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1"> Statistics </a></li>
                <li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">Castle Siege </a></li>
                <li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">Gens Status </a></li>
              </ul>
            </div>
            <div id="tabcontent1">1</div>
            <div id="tabcontent2">2</div>
            <div id="tabcontent3">3</div>





Result :

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Credits:
FCV2005

SOurce:
who-design.us



Ultima editare efectuata de catre Mr.Bonu$s in Sam 07 Ian 2012, 17:20, editata de 1 ori
avatar
Sined
Starmedia Legenda
Starmedia Legenda
Mesaje : 671
Varsta : 19
Localizare : Vaslui
Sunt pe forum din : 26/11/2011

Re: [CSS] Tab Select

la data de Sam 07 Ian 2012, 13:25
bravo
mai pune
avatar
ChildOfGod
Junior
Junior
Mesaje : 602
Varsta : 28
Localizare : Techirghiol
Sunt pe forum din : 05/07/2010

Re: [CSS] Tab Select

la data de Dum 13 Ian 2013, 10:53
Frumos pentru incepatori!
Felicitari
Continut sponsorizat

Re: [CSS] Tab Select

Vezi subiectul anteriorSusVezi subiectul urmator
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum