PDA

View Full Version : mini tabbed menu


darkwave
06-18-2008, 12:54 AM
hello guys :D ,i just installed n exploring with vivvo stuff,its a beautiful script ever..i have a question here is it possible to make this kind of menu like yahoo.com,i want to put it on the right box..

Thanks..

http://photos-486.friendster.com/e1/photos/68/46/2636486/1_811049830l.jpg

Micha
06-18-2008, 09:24 AM
Yes it's possible, with a little bit of CSS, VTE and some Java Script coding.
I have done something very similar to this on my test site.
If I find it, I'll write a "How to", but I can make no promises :)

darkwave
06-18-2008, 05:06 PM
Hi Micha thx for the reply..

ok this is what i do :

I put this in style.css

/*** Tab Menu yahoo ***/

#tabs {width:400px; text-align:center; background: url(../img/icon/top.gif); margin:30px 0 0 175px; position:absolute; left: 600px; z-index:500;}
#tabs ul {padding:0; margin:0; width:400px; list-style:none; position:relative;}
#tabs ul li {float:left; display:inline; width:125px; height:53px; margin:0 4px;}
#tabs ul li a.outer {display:block; width:125px; height:49px; border-bottom:1px solid #9c9c9c; text-align:center; line-height:45px; text-decoration:none; text-indent:50px; color:#464; font-weight:bold; margin-bottom:3px; font-size:11px;}

#tabs ul li a.one {background:#fff url(../img/icon/world.jpg) top left no-repeat;}
#tabs ul li a.two {background:#fff url(../img/icon/key.jpg) top left no-repeat;}
#tabs ul li a.three {background:#fff url(../img/icon/mail.jpg) top left no-repeat;}
#tabs ul li div {display:none;}

#tabs ul li:hover {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;}

#tabs ul li:hover > a.outer {color:#000; background-position:0 -55px; height:55px; cursor:default;}

* html #tabs ul li a.outer:hover {padding-bottom:130px; border-bottom:1px solid #fff; height:55px; color:#000; margin-bottom:0;background-position:0 -55px; height:55px; cursor:default;}

#tabs ul li:hover div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:381px; height:118px; border-bottom:3px solid #fff;}
#tabs ul li a:hover div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:381px; height:118px; border-bottom:3px solid #fff;}

#tabs ul li a:hover div.tab_left,
#tabs ul li:hover div.tab_left
{background:#fff url(../img/icon/tab_left.gif);}

#tabs ul li a:hover div.tab_center,
#tabs ul li:hover div.tab_center
{background:#fff url(../img/icon/tab_center.gif);}

#tabs ul li a:hover div.tab_right,
#tabs ul li:hover div.tab_right
{background:#fff url(../img/icon/tab_right.gif);}

#tabs_posisi {position:absolute; top:-5px; left:180px; overflow:hidden;}
.clear {clear:both; height:0; line-height:0; overflow:hidden;}
#tabs span.base {display:block; height:20px;font-size:10px; color:#bc8f8f; background:url(../img/icon/bottom.gif) bottom;}
#tabs div h5 {font-size:11px; margin-bottom:10px;}
#tabs div p {font-weight:normal; text-align:left; color:#000; margin-top:3px;}
#tabs div a img {border:0;}
#tabs div img.image {float:left; border:0; margin-top:-35px; margin-right:5px;}
#tabs div a.unlock {background:url(../img/icon/unlock.gif); display:block; width:30px; height:30px; margin:0 auto;}
#tabs div a:hover.unlock img {visibility:hidden;}
#tabs p.bold {color:#069; padding-top:5px;}
* html #tabs p.fire {margin-top:-15px;}
* html #tabs form {margin-top:-20px;}
#tabs p.buttons {text-align:center;}

and .tpl

<vte:template>
<div class="box">
<div class="box_title_holder"><div class="box_title">Test : Support!</div></div>
<div class="box_body">
<div class="box_content">
><div id="tabs" style="position: absolute; margin-left: -8px; margin-top: -20px">
<p class="bold">Live Support!</p>
<ul>
<li><a href="#nogo" class="one outer">Live Help<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_left">
<h5>Test : Online Live Chat!</h5>
<script language="JavaScript" src="http://www.malscene.net/chat/js/status_image.php?base_url=http://www.malscene.net/chat&l=admin&x=1&deptid=0&"><a href="http://www.livesupport.com"></a></script>

</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="two outer">UNLOCK<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_center">
<h5>Unlock the Secrets</h5>
<a href="http://www.w3.org/Style/CSS/" class="unlock" title="Unlock the secrets of CSS at w3.org"><img src="icon/lock.gif" alt="Locked" title="Locked" /></a>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="three outer">MAIL<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="tab_right">
<h5>Email</h5>
<p>Maybe a link to your emails or a form asking to login to retrieve your
emails, or even a link to a <a href="http://www.malscene.net/contact.html">
Contact Page</a>.</p>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
<span class="base">Malscene.net</span>
</div>
</div>
</div>
</div>
</vte:template>

But the prob is why when i called the .tpl in right div box,the tabbed dont get right,it not appear like what i want,i mean in the right box..

maybe you can give me some advise on how/what to do with the code..

regards,
DW

Micha
06-18-2008, 05:56 PM
Well, first of all this is completely wrong approach for this.

You should try to make this box using Vivvo's JS and CSS, not Yahoo's (not that their code is bad or anything).

Here's the basic structure on how you can make similar box using Vivvo JS (CSS is a little poor here and it's used only to format tabs):

<vte:template>
<ul id="tabs_utility_1" class="tabs">
<li><a href="#box_1"><span>Box 1</span></a></li>
<li><a href="#box_2"><span>Box 2</span></a></li>
<li style="display:none;"><a href="#box_3"><span>Box 3</span></a></li>
<li style="display:none;"><a href="#box_4"><span>Box 4</span></a></li>
</ul>
<div id="box_1" style="background:red; color:#FFFFFF; padding: 6px;">Content box 1</div>
<div id="box_2" style="background:green; color:#FFFFFF; padding: 6px;">Content box 2</div>

<ul id="tabs_utility_2" class="tabs">
<li style="display:none;"><a href="#box_1"><span>Box 1</span></a></li>
<li style="display:none;"><a href="#box_2"><span>Box 2</span></a></li>
<li><a href="#box_3"><span>Box 3</span></a></li>
<li><a href="#box_4"><span>Box 4</span></a></li>
</ul>
<div id="box_3" style="background:blue; color:#FFFFFF; padding: 6px;">Content box 3</div>
<div id="box_4" style="background:yellow; color:#000000; padding: 6px;">Content box 4</div>
<script type="text/javascript">
var tabs_utility_1 = new Control.Tabs('tabs_utility_1');
var tabs_utility_2 = new Control.Tabs('tabs_utility_2');
</script>
</vte:template>


Hope this helps a little.

darkwave
06-18-2008, 07:02 PM
ouh i see..thks micha..

Micha,let say,if i still want to use the current code that i put here,is there anyway to do it..?

or maybe i can use the code that u gave,with a little modification,put some tab/menu icon i still can get like what i want..but how to make it funtion ie. onmouseover/out,dropdown content..

once again,i thank u again..

darkwave
06-19-2008, 02:40 AM
hi micha,

i think i just fixed it..so now the problem solved..

thanks for your time buddy..

-DW-

kreativostudio
06-19-2008, 06:43 PM
Can you share the code? I am interested in this feature too, I will appreciate it to much, thanks

darkwave
06-21-2008, 06:09 PM
sure i will,but now it still mess up..
actually we just testing what we can do before we buy this script..
i will upload the fixed one as soon as posible..

Thanks,
DW