Botão que insere Menu

George Gomes · Julho 28, 2009

Pessoal preciso de uma ajudinha!!!

Tenho um menu flutuante q esta funcionando blezinha,

Só q eu preciso do seguinte.

Esse menu não pode aparecer de inicio na página para ele aparecer eu tenho q apertar em um botão !!

Ex:

Agora o menu assim q abre a página ele aparece,

mas eu preciso colocar ele em algum botão, tipo para quando eu apertar no botão ele aparecer.

minha idéia é colocar em uma função e no botão chamar essa função só q eu não manjo se puderem me ajudem !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 

xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 

content="text/html; charset=UTF-8" />
<title>Menu Flutuante</title>


&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>



&lt;script language="javascript">

$(document).ready(function(){
    
var y_fixo = $("#menu").offset().top;
    
    $(window).scroll(function () {
        
        $("#menu").animate({
top: y_fixo+$(document).scrollTop()+"px"
},

{duration:500,queue:false}
);
    
    });

});


</script>


<style type="text/css">


body {
    
    background-color:#FFF;
    
    color:#444;
    
    font:12px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
    
    line-height: 15px;

}

#menu {
    
    left:0px;
    
    margin:0;
    
    padding:0;
        position:absolute;
    
    top:100px;
    
    width:150px;

}

#menu ul {
    
    list-style:none;
    
    margin:0;
    
    padding:0;

}

#menu ul li {
        margin-bottom:2px;

}

#menu ul li a {
    
    background-color:#333;
    
    border:1px solid #999;
    
    color:#FFF;
    
    display:block;
        padding:5px 5px 5px 15px;
    
    text-decoration:none;

}

#menu ul li a:hover {
    
    background-color:#ccc;
    
    color:#333;

}

</style>

</head>

<body>



</p>


<div id="menu">
  
<ul class="menu">
    
<li><a href="#" onclick="return false;"> Menu item 1 </a></li>
    
<li><a href="#" onclick="return false;"> Item de menu 2 </a></li>
    
<li><a href="#" onclick="return false;"> Item 3 do menu </a></li>
    <li><a href="#" 

onclick="return false;"> Item de menu 4 </a></li>
    
<li><a href="#" onclick="return false;"> Menu item 5 </a></li>
  
</ul>

</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>

</html>

Entrar

Botão que insere Menu

Pergunta

George Gomes

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades