Menus Com Abas Dinâmicas: 3 Modelos

3 Exemplos.

1º Passo: Copie e cole esse código abaixo depois da tag <HEAD> de sua página (Template). <link rel="stylesheet" type="text/css" href="http://rosduz.googlepages.com/tabcontent.css" /><br /><br /><script type="text/javascript" src="http://rosduz.googlepages.com/tabcontent.js"><br /><br /></script>

2º Passo: Copie e cole um desses códigos abaixo onde você deseja que o menu de abas apareça na sua página. Salve. Veja que são 3 exemplos. Escolha aquele que achar melhor.

<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3><br /><div id="pettabs" class="indentmenu"><br /><ul><br /><li><a href="#" rel="dog1" class="selected">Tab 1</a></li><br /><li><a href="#" rel="dog2">Tab 2</a></li><br /><li><a href="#" rel="dog3">Tab 3</a></li><br /><li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li><br /><li><a href="http://www.google.com">Google</a></li><br /></ul><br /><br style="clear: left" /><br /></div><br /><div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em"><br /><div id="dog1" class="tabcontent"><br />Tab content 1 here<br />Tab content 1 here<br /><br /><p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p><br /></div><br /><div id="dog2" class="tabcontent"><br />Tab content 2 here<br />Tab content 2 here<br /><br /></div><br /><div id="dog3" class="tabcontent"><br />Tab content 3 here<br />Tab content 3 here<br /><br /></div><br /><div id="dog4" class="tabcontent"><br />Tab content 4 here<br />Tab content 4 here<br /><br /></div><br /></div><br /><script type="text/javascript"><br /><br />var mypets=new ddtabcontent("pettabs")<br />mypets.setpersist(true)<br />mypets.setselectedClassTarget("link")<br />mypets.init(2000)<br /><br /></script>

<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3><br /><div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white"><br />Arbitrary DIV 1<br /></div><br /><div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white"><br />Arbitrary DIV 2<br /></div><br /><div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white"><br />Arbitrary DIV 3<br /></div><br /><div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px"><br /><div id="tcontent1" class="tabcontent"><br />Tab content 1 here<br />Tab content 1 here<br /><br /></div><br /><div id="tcontent2" class="tabcontent"><br />Tab content 2 here<br />Tab content 2 here<br /><br /></div><br /><div id="tcontent3" class="tabcontent"><br />Tab content 3 here<br />Tab content 3 here<br /><br /></div><br /><div id="tcontent4" class="tabcontent"><br />Tab content 4 here<br />Tab content 4 here<br /><br /></div><br /></div><br /><div id="flowertabs" class="modernbricksmenu2"><br /><ul><br /><li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li><br /><li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li><br /><li><a href="#" rel="tcontent3">Tab 3</a></li><br /><li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li><br /><li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li><br /></ul><br /></div><br /><br style="clear: left" /><br /><br /><script type="text/javascript"><br /><br />var myflowers=new ddtabcontent("flowertabs")<br />myflowers.setpersist(true)<br />myflowers.setselectedClassTarget("link") //"link" or "linkparent"<br />myflowers.init()<br /><br /></script><br /><p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p><br /><p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a>

<h3>Demo #1- Basic implementation</h3><br /><ul id="countrytabs" class="shadetabs"><br /><li><a href="#" rel="country1" class="selected">Tab 1</a></li><br /><li><a href="#" rel="country2">Tab 2</a></li><br /><li><a href="#" rel="country3">Tab 3</a></li><br /><li><a href="#" rel="country4">Tab 4</a></li><br /><li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li><br /></ul><br /><div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"><br /><div id="country1" class="tabcontent"><br />Tab content 1 here<br />Tab content 1 here<br /><br /></div><br /><div id="country2" class="tabcontent"><br />Tab content 2 here<br />Tab content 2 here<br /><br /></div><br /><div id="country3" class="tabcontent"><br />Tab content 3 here<br />Tab content 3 here<br /><br /></div><br /><div id="country4" class="tabcontent"><br />Tab content 4 here<br />Tab content 4 here<br /><br /></div><br /></div><br /><script type="text/javascript"><br /><br />var countries=new ddtabcontent("countrytabs")<br />countries.setpersist(true)<br />countries.setselectedClassTarget("link") //"link" or "linkparent"<br />countries.init()<br /><br /></script><br /><p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p><br />

--------------------------------------------------------------------------------------------------------------------

Qualquer dúvida, entre em contato, deixe um comentário.

Bookmark este post: