Logo CSS do meu fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Logo CSS do meu fórum

Mensagem por VagnerX em 17/02/12, 09:44 am

Qual é minha questão:
Um amigo meu me passou um codigo CSS que ele usa no logo do site dele... gostaria d saber se á como usar esse codigo deixando ele como logo do meu forum.

Link do logo:http://tympanus.net/Tutorials/CollapsingSiteNavigation/

Codigo HTML:
Spoiler:
<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:5;">
<img src="images/1.jpg" alt="image" />
<span class="cc_title">Collection</span><ul></div>


CODIGO CSS:
Spoiler:

.cc_menu{
width:700px; /*140px * 5*/
height:600px;
position:relative;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#444 url(../images/bg.png) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;
}
span.cc_title{
color:#fff;
font-size:16px;
top:200px;
left:5px;
position:absolute;
padding:3px 0px;
background:#111;
width:130px;
display:block;
z-index:11;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.cc_item img{
position:absolute;
width:140px;
height:600px;
top:-600px;
left:0px;
}
.cc_content{
width:600px;
height:600px;
border-bottom:1px solid #000;
position:absolute;
left:-700px;
background:#444 url(../images/bg.png) repeat top left;
overflow:hidden;
-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;
}

.cc_content p{
background:#000;
padding:20px;
opacity:0.7;
}

span.cc_back{
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
color:#ddd;
}


Java Script
Spoiler:

//all the menu items
var $items = $('#cc_menu .cc_item');
//number of menu items
var cnt_items = $items.length;
//if menu is expanded then folded is true
var folded = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});
function m_enter(){
var $this = $(this);
clearTimeout(menu_time);
menu_time = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
},200);
}
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}
$('#cc_back').bind('click',unfold);
function fold($li_e){
var $item = $li_e.closest('.cc_item');

var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-140px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}

function unfold(){
$('#cc_content').stop().animate({'left':'-700px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);

$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200);

$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);

hideContent();
}
});
});
});
}

function hideContent(){
$('#cc_content').find('div').hide();
}



Medidas que eu tomei para corrigir o problema:
Nenhuma

Links e imagens do meu problema:
Não tenho

Endereço do meu fórum:
http://www.narutobrazil.com

Versão do meu fórum:
PHPBB2
avatar

VagnerX
Nível 6

Masculino
Inscrito dia : 02/11/2008
Mensagens : 65
Pontos Ativos : 109

Ver perfil do usuário

Resolvido Re: Logo CSS do meu fórum

Mensagem por Dury em 18/02/12, 07:35 pm

Boa noite Vagener!

Infelizmente não é possível. O que pode ser possível é aplicação do código CSS para o logo, mas o Javascript não será.

Poderá usar a classe:
header {
Propriedades
}
Leia o conteúdo do tutorial: http://ajuda.forumeiros.com/t16183-

Até mais!
Piscada
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum