Apropriado para a versão 1.1.x, não testei no 2.0.x
index.template.php
// ]]></script>
</head>
<body>';
Alterar por este codigo
// ]]></script>';
echo'
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/side-bar_c_jq.js.js"></script>';
echo'
</head>
<body>
<div class="sideBar" id="bar1">
<a href="#" class="sideBarTab" rel="210::200"><img src="', $settings['images_url'], '/slide-button2.gif" alt="sideBar" title=""></a>
<div class="sideBarContents">
<div class="sideBarContentsInner">
<h2>side<span>bar 1</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>';
style.css
.sideBarContentsInner h2 {
color: #fff;
font: bold 90% arial, sans-serif;
margin: 10px;
white-space: nowrap;
}
.sideBarContentsInner h2 span {
font-size: 105%;
font-weight: normal;
}
.sideBarContentsInner ul {
margin: 0;
padding: 0;
}
.sideBarContentsInner li {
margin: 0px 10px 3px 10px;
padding: 2px;
list-style-type: none;
display: block;
background-color: #da1074;
width: 177px;
}
.sideBarContentsInner li a:link, .sideBarContentsInner li a:visited {
color: #fff;
font-family: verdana, arial, sans-serif;
font-size: 70%;
text-decoration: none;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
.sideBarContentsInner li a:hover {
color: #fff;
text-decoration: underline;
}
.sideBar {
position: absolute;
width: 28px; /* Set width to width of the sideBarTab image (slide-button.gif) */
height: auto;
top: 100px;
left: 0;
background: url(images/background2.gif) repeat-y top right;
}
.sideBarRight {
left: auto!important;
right: 0;
background: url(images/background.gif) repeat-y top left;
}
.sideBarTab {
float: right;
}
.sideBarRight .sideBarTab {
float: left;
}
.sideBarTab, .sideBarTab img {
height: 137px; /* Set height and width to dimensions of the sideBarTab image (slide-button.gif) */
width: 28px;
display: block;
border: none;
}
.sideBarContents {
position: absolute;
overflow: hidden;
height: 0;
width: 0;
}
.sideBarRight .sideBarContents {
margin-left: 28px; /* Set to width of the sideBarTab image (slide-button.gif) */
}
#bar1 .sideBarContentsInner li {
width: 187px;
}
#bar2 {
top: 250px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.sideBarRight .sideBarContents {
margin-left: 0; /* IE adjustment */
}
Nao esqueca de colocar Menu nome, endereço do link
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
side-bar_c_jq.js.js colocar Themes/default
images.rar descomprimir e colocar na pasta do teu themes imagen
Tópico: Menu lateral - Sliding Side Bar (Lida 7697 vezes)