[Resolvido] Escondendo barra do menu

[manoaj 12]

Boa tarde pessoal,eu to com um problema aqui bem acho que é mais uma duvida do que problema e não sei bem se esta é a area correta do forum, eu tenho um menu com position fixed que segue o scroll bar ou seja ela fica seguindo o usuario , e o que eu quero faser com ele é o seguinte eu to querendo colocar um link nele, um botão pra quando o usuario clicar no botão o background do menu sumir ou ficar transparente e ficar so os botões do menu e quando o usuario quiser ver a barra do menu denovo o background ele clica no botão novamente e ele volta , o que eu devo faser galera .

 

html do menu

<div id="tudo">
<div id="barra">
 <ul id="navigation">
           <li class="home"><a href="index.php"><span></span></a></li>
           <li class="about"><a href="quemsomos.php"><span>Quem somos</span></a></li>
           <li class="search"><a href="busca.php"><span>Search</span></a></li>
           <li class="photos"><a href="portfolio.php"><span>Portfólio</span></a></li>
           <li class="rssfeed"><a href=""><span>Fórum</span></a></li>
       </ul>
</div><!--fim barra-->
</div><!--div tudo-->

 

css do menu

@charset "utf-8";
/* gafree*/

#barra { 
   position:fixed;
   bottom:0;
   left:0;
   z-index:1000000;
   width:100%;
height:45px;
   background: url(images/barra.png) repeat-x; 
}


/**********************************************************/
/************************** Barra menu *******************/
/**********************************************************/

ul#navigation {
   margin: 0px;
   padding: 0px;
margin-left:50px;
   list-style: none;
   z-index:999999;
   width:auto;
}
ul#navigation li {
   width:60px;
   display:inline;
   float:left;    
}
ul#navigation li a {
   display: block;
   float:left;
   width: 50px;
   height: 25px;	
   background-repeat:no-repeat;
   background-position:50% 5px;
   text-decoration:none;
   padding-top:80px;
}
/*************************icones do menu**********************/

ul#navigation .home a{
   background-image: url(images/icones/home1.png);
}
ul#navigation .about a      {
   background-image:  url(images/icones/perfil1.png);
}
ul#navigation .search a      {
   background-image:   url(images/icones/msg1.png);
}
ul#navigation .rssfeed a   {
   background-image:url(images/icones/sethings1.png);
}
ul#navigation .photos a     {
   background-image: url(images/icones/fotos1.png);
}

/**************efeito holl over******************/
ul#navigation .home a:hover{
   background-image: url(images/icones/home.png);
}
ul#navigation .about a:hover{
   background-image:  url(images/icones/perfil.png);
}
ul#navigation .search a:hover{
   background-image:   url(images/icones/msg.png);
}
ul#navigation .rssfeed a:hover{
   background-image:url(images/icones/sethings.png);
}
ul#navigation .photos a:hover{
   background-image: url(images/icones/fotos.png);
}

[Dian Carlos 29]

chame o jquery na sua página e tente isso:

$(document).ready(function(){
$('.ocultarfundo').live('click', function(){
	$('.barra').toggleClass("barraoculta"); //classe onde a barra fica transparente, ou de outra forma.
});
});

 

mude de id para classe a 'barra' e adicione no css uma classe chamada 'barraoculta' onde a barra vai fica do jeito que você quer. adicione um botão para ocultar a barra, cada vez que esse botão for clicado a barra vai ficar oculta e visivel.. ^^ boa sorte..

[manoaj 12]

chame o jquery na sua página e tente isso:

$(document).ready(function(){
$('.ocultarfundo').live('click', function(){
	$('.barra').toggleClass("barraoculta"); //classe onde a barra fica transparente, ou de outra forma.
});
});

 

mude de id para classe a 'barra' e adicione no css uma classe chamada 'barraoculta' onde a barra vai fica do jeito que você quer. adicione um botão para ocultar a barra, cada vez que esse botão for clicado a barra vai ficar oculta e visivel.. ^^ boa sorte..

vlw deu certinho !