Autor Tópico: Menu lateral - Sliding Side Bar  (Lida 4388 vezes)

0 Membros e 1 Visitante estão a ver este tópico.

Offline candidosa2

  • Suporte Tecnico
  • Fundador
  • *
  • Mensagens: 5072
  • Rank: 1658
  • Sexo: Masculino
  • Suporte
    • Hosting Moçambique
Menu lateral - Sliding Side Bar
« em: 12 de Dezembro de 2010, 07:38 »
Apropriado para a versão 1.1.x, não testei no 2.0.x

index.template.php

Código: [Seleccione]
// ]]></script>
</head>
<body>';


Alterar por este codigo

Código: [Seleccione]
// ]]></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&nbsp;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

Código: [Seleccione]
.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

Código: [Seleccione]
<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