Windows Modern ACC Menu
- Thread starter esfomeado
- Start date
president vankk
Web Developer & AuraOT Owner
- Joined
- Jul 10, 2009
- Messages
- 5,719
- Solutions
- 9
- Reaction score
- 339
OP
OP
esfomeado
N o_0 B
- Joined
- Nov 29, 2010
- Messages
- 277
- Reaction score
- 21
I have this:
How can i make this in a expanding and collapsing menu like the Tibia RL.
Code:
<div class="middle-l">
<div class="middle-l-ie6"></div>
<div class="middle-r-ie6"></div>
<div class="middle-r">
<div class="middle-m">
<div class="background">
<div id="left">
<div id="left_container" class="clearfix">
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">News</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
<li class="level1 item3 first"><a href="{$path}" class="level1 item3 first"><span>Latest news</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/home/archive" class="level1 item3 first"><span>News archive</span></a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>How can i make this in a expanding and collapsing menu like the Tibia RL.
OP
OP
esfomeado
N o_0 B
- Joined
- Nov 29, 2010
- Messages
- 277
- Reaction score
- 21
Bump!
This is mine index.tpl code:
Can someone help me put this with expanding and collapsing like Real Tibia?
This is mine index.tpl code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>{$title}</title>
<link href="<?php echo $layout_name; ?>/imagess/fav.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="{$path}/templates/widnet/imagess/shadowbox.css" type="text/css" />
<link rel="stylesheet" href="{$path}/templates/widnet/imagess/templatep.css" type="text/css" />
<link rel="stylesheet" href="{$path}/templates/widnet/imagess/mod_yoo_slider.css" type="text/css" />
<link rel="stylesheet" href="{$path}/templates/widnet/imagess/mod_yoo_drawer.css" type="text/css" />
<link rel="stylesheet" href="{$path}/templates/widnet/imagess/mod_yoo_search.css" type="text/css" />
<link rel="stylesheet" href="{$path}/templates/widnet/imagess/mod_yoo_carousel.css" type="text/css" />
<script type="text/javascript" src="{$path}/templates/widnet/imagess/jquery.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/mootools.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/caption.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/mod_yoo_slider.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/mod_yoo_drawer.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet>/imagess/mod_yoo_search.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/mod_yoo_carousel.js"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/ajax.js"></script>
<link rel="stylesheet" type="text/css" href="{$path}/templates/widnet/imagess/style.css"/>
<link rel="stylesheet" type="text/css" href="{$path}/templates/widnet/imagess/comment_style.css"/>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/plugins/system/yoo_effects/yoo_effects.js.php@lb=1&re=1&sl=1"></script>
<script type="text/javascript" src="{$path}/templates/widnet/imagess/template.js"></script>
</head>
<body id="page" class="yoopage font-medium width-wide left showright default yootools-black">
<div id="page-body">
<div class="page-body-m">
<div class="page-body-t">
<div class="page-body-b">
<div class="page-body-h">
<div class="wrapper floatholder">
<div id="header">
<div class="header-l">
<div class="header-r">
<div id="toolbar">
<div class="floatbox ie_fix_floats">
<div id="date">
</div>
<div id="topmenu">
<ul class="menu">
<li class="level1 item2 "><a href="{$path}/index.php/account/create">Create Account</a></li>
</ul>
</div>
<div id="styleswitcher">
</div>
</div>
</div>
<div id="menubar">
<div class="menubar-l">
<div class="menubar-r"></div>
</div>
</div>
<div id="menu">
<ul class="menu">
<li class="level1 item1 first active current"><a href="{$path}" class="level1 item1 first active current"><span><span class="title">Home</span><span class="sub">Home Page</span></span></a></li>
<li class="level1 item2 parent"><span class="separator level1 item2 parent"><span><span class="title">Shop</span><span class="sub">SMS Payment</span></span></span>
<ul class="level2">
<li class="level2 item1 first"><a href="http://localhost//index.php/p/v/buypoints" class="level2 item2"><span>Buy Points</span></a></li>
<li class="level2 item2"><a href="http://localhost//index.php/p/v/shop" class="level2 item3 last"><span>Shop Offer</span></a></li>
</ul>
</li>
<li class="level1 item3 parent"><span class="separator level1 item3 parent"><span><span class="title">Forums</span><span class="sub">Our community</span></span></span>
<ul class="level2">
<li class="level2 item1 first last"><a href="{$path}/index.php/forum" class="level2 item1 first last"><span>Community Board</span></a></li>
</ul>
</li>
<li class="level1 item5 last"><a href="{$path}/index.php/account/create" class="level1 item5"><span><span class="title">Register</span>
<span class="sub">Create Account</span></span></a></li>
<li class="level1 item4 parent"><span class="separator level1 item4 parent"><span><span class="title">Others</span><span class="sub">Server Addons</span></span></span>
<ul class="level2">
<li class="level2 item1 first"><a href="{$path}" class="level2 item3"><span>Guild Wars</span></a></li>
<li class="level2 item2 last"><a href="{$path}" class="level2 item3 last"><span>Auctions</span></a></li>
</ul></li>
</ul></li>
</div>
<div id="logo">
<div class="spotlight"></div>
</div>
</div>
</div>
</div>
<!-- header end -->
<div id="top">
<div class="floatbox ie_fix_floats">
<div class="topblock width100 float-left">
<div class="module deepest blank">
<div class="slideshow">
<div id="yoo-carousel-1" class="yoo-carousel" style="width: 960px;height: 200px;">
<div style="overflow: hidden; height: 200px;">
<div class="frame" style="width: 960px;">
<div class="prev">
<a class="button-prev" href="javascript:void(0)" title="Previous slide" style="height: 200px;">
</a>
</div>
<div class="next">
<a class="button-next" href="javascript:void(0)" title="Next slide" style="height: 200px;">
</a>
</div>
</div>
</div>
</div>
</div><script type="text/javascript">
// <!--
window.addEvent('domready', function() { new YOOcarousel('yoo-carousel-1', { transitionEffect: 'crossfade', transitionDuration: 3000, rotateAction: 'mouseover', rotateActionDuration: 1000, rotateActionEffect: 'crossfade', slideInterval: 1000, autoplay: 'off' }); });
// -->
</script>
</div>
</div>
</div>
</div>
<!-- top end -->
<div id="middle">
<div class="middle-container-t">
<div class="middle-tl"></div>
<div class="middle-tr"></div>
<div class="middle-t"></div>
</div>
<div class="middle-l">
<div class="middle-l-ie6"></div>
<div class="middle-r-ie6"></div>
<div class="middle-r">
<div class="middle-m">
<div class="background">
<div id="left">
<div id="left_container" class="clearfix">
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">News</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
<li class="level1 item3 first"><a href="{$path}" class="level1 item3 first"><span>Latest news</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/home/archive" class="level1 item3 first"><span>News archive</span></a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">About Sellen</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/" class="level1 item3 first"><span>What is Sellen?</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/gallery" class="level1 item3 first"><span>Screenshots</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/gamefeatures" class="level1 item3 first"><span>Game Features</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/premiumfeatures" class="level1 item3 first"><span>Premium Features</span></a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">Game Guides</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/" class="level1 item3 first"><span>Quickstart</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/gallery" class="level1 item3 first"><span>Manual</span></a></li>
<li class="level1 item3 first"><a href="{$path}/index.php/p/v/gamefeatures" class="level1 item3 first"><span>Security Hints</span></a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">Library</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
<li class="level1 item7 last"><a href="{$path}/index.php/p/v/spells" class="level1 item7">Creatures</a></li>
<li class="level1 item7 last"><a href="{$path}/index.php/p/v/spells" class="level1 item7">Spells</a></li>
<li class="level1 item7 last"><a href="{$path}/index.php/p/v/rules" class="level1 item7">Experience Table</a></li>
<li class="level1 item7 last"><a href="{$path}/index.php/p/v/premiumfeatures" class="level1 item7">Map</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">Community</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
<li class="level1 item3 first"><a href="{$path}/index.php/character/view" class="level1 item3 first"><span>Characters</span></a></li>
<li class="level1 item7 last"><a href="{$path}/index.php/character/online" class="level1 item7">Who Is Online?</a></li>
<li class="level1 item7"><a href="{$path}/index.php/highscores" class="level1 item7"><span>Highscores</span></a></li>
<li class="level1 item7"><a href="{$path}/index.php/p/v/deaths" class="level1 item7"><span>Kill Statistics</span></a></li>
<li class="level1 item7 last"><a href="{$path}/index.php/houses/main" class="level1 item7">Houses</a></li>
<li class="level1 item7"><a href="{$path}/index.php/guilds" class="level1 item7"><span>Guilds</span></a></li>
<li class="level1 item7 last"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab mod-menu">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">Account</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<ul class="menu">
{if $logged == 1}
<li class="level1 item3 first"{if $controller == "account"} id="current"{/if}><a href="{$path}/index.php/account" class="level1 item7">Account</a></li>
{else}
<li class="level1 item3 first" {if $controller == "account" && $method == "login"} id="current"{/if}><a href="{$path}/index.php/account/login" class="level1 item7">Account Managent</a></li>
<li class="level1 item7 last"{if $controller == "account" && $method == "create"} id="current"{/if}><a href="{$path}/index.php/account/create" class="level1 item7">Create Account</a></li>
{/if}
<li class="level1 item3 first"><a href="{$path}/index.php/character/view" class="level1 item3 first"><span>Download Client</span></a></li>
<li class="level1 item7 last"><a href="{$path}/index.php/character/online" class="level1 item7">Lost Account?</a></li>
<li class="level1 item7 last"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
</div>
</div>
</div>
</div>
</div>
<center>
</center>
</div>
</div>
<!-- left end -->
<div id="main">
<div id="main_container" class="clearfix">
<div id="mainmiddle" class="floatbox">
<div id="right">
<div id="right_container" class="clearfix">
<div class="mod-tab">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">Information</span></h3>
</div>
</div>
<div style="overflow: hidden;">
<font color="white">
{$online}
{foreach from=$worlds key=id item=world}
<b>World:</b> {$world} <br />
<b>Status:</b>
{if $serverOnline[$id]}
<font color='green'>Online</font><br />
<b>Uptime:</b> {$serverUptime[$id]} <br />
<b>Players:</b> {$serverPlayers[$id]}/{$serverMax[$id]}<br /><br />
{else}
<font color='red'>Offline</font><br />
{/if}
{/foreach}
</a></font>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
</div>
</div>
</div>
</div>
</div>
<div class="mod-tab">
<div class="module">
<div class="module-2">
<div class="module-3">
<div class="module-4">
<div class="module-5 deepest">
<div class="header-container-1">
<div class="header-container-2">
<div class="header-l"></div>
<div class="header-r"></div>
<h3 class="module"><span class="color">Top 5</span> Players</h3>
</div>
</div>
<div style="overflow: hidden;">
<div>
{include_php file='templates\widnet\topplayer.php'}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- right end -->
<div id="content">
<div id="content_container" class="clearfix">
<div id="contenttop" class="floatbox">
<div class="contenttopbox left width100 float-left">
<div class="module deepest blank">
<script type="text/javascript">
// <!--
new YOOslider('yoo-slider-1', '#yoo-slider-1 .slide', { layout: 'horizontal', sizeNormal: 175, sizeFull: 310 });
// -->
</script>
</div>
</div>
</div>
<!-- contenttop end -->
<div id="breadcrumb"><span class="breadcrumbs pathway"></span></div>
<!-- main content here-->
<div class="floatbox">
<div class="post">
{$main}
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
<!-- mainmiddle end -->
</div>
</div>
<!-- main end -->
</div>
</div>
</div>
</div>
<div class="middle-container-b">
<div class="middle-bl"></div>
<div class="middle-br"></div>
<div class="middle-b"></div>
</div>
</div>
<!-- middle end -->
<div id="footer">
<center>
Copyright 2010. All rights reserved.
</center>
</div>
<!-- footer end -->
<div id="debug">
</div>
<!-- debug end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- page-body end -->
</body>
</html>Can someone help me put this with expanding and collapsing like Real Tibia?
