Ok.
Não sou "expert" nisso mas vamos tentar primeiro exibir os menus.
Acredito que você já deve ter baixado tanto o menu deslizante horizontal mencionado como também o
Estilo CA Vintage Blue.
O 1º passo é descompactar o arquivo zipado do menu deslizante horizontal, o
css-dock-menu.zip.
Na raiz da pasta descompactada do menu, chamada
css-dock-menu, você encontrará os arquivos
html:
-
css-dock.html
-
css-dock-bottom.html
-
css-dock-top.html
Abrindo estes arquivos pelo seu navegador, como o
Google Chrome,
Firefox ou
IE, no 1º você terá o menu deslizante horizontal superior(header) e o inferior(footer). No 2º somente o inferior(footer) e no 3º somente o superior(header).
Abrindo os arquivos mencionados no
Notepad++ você verá como deve ser feita a inclusão das linhas e dos scripts.
Como você não especifica se quer o menu deslizante tanto superior como inferior, ou só superior ou só inferior, então vou fazer com o da 1ª opção, ou seja, com o arquivo
css-dock.html. Ok ?
1) Abra os seguintes arquivos no
Notepad++:
Do Menu:
- css-dock.html
Do Estilo CA Vintage Blue:
- overall_header.html
- overall_footer.html
2) Repare que no arquivo
css-dock.html entre as tags
<head> </head> você tem as linhas abaixo:
Código: Selecionar todos
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
e
cole-as em uma nova linha
ANTES da tag
</head> do arquivo
overall_header.html.
3) Repare que no arquivo
css-dock.html entre as tags
<body> </body> você tem as respectivas linhas e scripts separados por:
-
<!--top dock -->
-
<!--bottom dock -->
-
<!--dock menu JS options -->
Vamos colocar o
menu horizontal superior acima da barra de navegação. Ok ?
Copie o conteúdo do
<!--top dock --> do arquivo
css-dock.html, ou seja, o que está abaixo...
Código: Selecionar todos
<!--top dock -->
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
<a class="dock-item" href="#"><img src="images/rss2.png" alt="rss" /><span>RSS2</span></a>
</div>
</div>
... e
cole-o em uma nova linha
ANTES da linha
<div id="page-header"> do
overall_header.html, salvando o arquivo.
4) Vamos colocar o
menu horizontal inferior abaixo da barra de navegação. Ok ?
Copie o conteúdo do
<!--bottom dock --> do arquivo
css-dock.html, ou seja, o que está abaixo...
Código: Selecionar todos
<!--bottom dock -->
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a>
<a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a>
</div>
</div>
... e
cole-o em uma nova linha
ANTES de...
Código: Selecionar todos
<div>
<a id="bottom" name="bottom" accesskey="z"></a>
<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
... do
overall_footer.html.
5)
Copie o conteúdo do
<!--dock menu JS options --> do arquivo
css-dock.html, ou seja, o que está abaixo...
Código: Selecionar todos
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
... e
cole-o em uma nova linha
ANTES da tag
</body> do
overall_footer.html, salvando o arquivo.
6) Faça upload dos arquivos abaixo para a pasta
styles/ca_vintage_blue/theme:
-
css-dock-menu\style.css
-
css-dock-menu\js\interface.js
-
css-dock-menu\js\jquery.js
7) Faça upload dos arquivos
.png e
.gif da pasta
css-dock-menu\images para a pasta
styles/ca_vintage_blue/theme/images.
8) Faça upload dos arquivos
overall_header.html e
overall_footer.html editados para a pasta
styles/ca_vintage_blue/template.
9)
Limpe o cache do Fórum, o cache do
navegador, atualize o
Template,
Temas e
Sets de imagem do Estilo
CA Vintage Blue.
Abraço.
