Posicionamento de div flutuante

Rafael Wojcik · Março 19, 2012

Olá Pessoal,

Estou com um menu flutuante que só é posicionável com a position "Absolute", porém preciso que ele seja posicionável com a position "Relative" para que a posição dele se auto ajuste independente da resolução. O problema que ao alterar a posição para relative ele para de flutuar. Alguma sugestão?

Obrigado!

Link para a página onde ele está como absolute: http://www.m-arnaud....literatura1.asp

Código do menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Menu SubNivel</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <style type="text/css">
                /**********************************************************************
                *  A estilização está na mesma página para fins didático
                *  Tem algumas modificações na parte estética no menu
                *  mais o funcionamento não foi modificado
                * *********************************************************************
                */
                
                /**
                 * Zerar o Margin e Padding e todos os elementos na página
                 */
                *{
                   margin:0;
                   padding:0;
                }
                /*remove a marcação da lista*/
                ul{list-style-type:none}
                /*remove o underline no link por padrão*/
                a{text-decoration:none}
                /*ao passar o mouse volta o underline*/
                a:hover{text-decoration:underline}
                
                /**********************************************************************
                *CONFIGURAÇÕES MENU - Estilização
                * *********************************************************************
                * /
                
                /*define uma largura*/          
                #menu{width:150px; border:1px solid #ccc;}
                /*Define um position relative porque iremos utilizar
                 * absolute nas sub-listas
                **/
                #menu li{
                        position:relative;
                        _float:left;/*Hack para o IE6*/
                }
                
                #menu li a{
                   display:block; /*define o elemento em bloco para ocupar 100% de largura do elemento pai*/
                   height:25px; /*Define uma altura*/
                   line-height:25px;/*Cenraliza na vertical */
                   color:#777; /*define a cor da fonte*/
                   border-bottom:1px solid #ccc; /*define uma bordar no bottom*/
                   background:#f5f5f5;/*define a cor do fundo*/
                   
                }
                #menu li a:hover{
                   background:#e5e5e5;/*define a cor do fundo*/
                   color:#333;/*define a cor da fonte*/
                }
                
                /*******************************************************************
                 *VAMOS COMEÇAR A MAGIA - Aqui agrupei alguns item
                *********************************************************************
                */
                
                #menu li ul, #menu li:hover ul ul{
                   display:none;/*define para não aparecer a ul*/
                   position:absolute; /*define uma posição absolute*/
                   width:150px;/*define uma largura*/
                   top:0; /*colocamos top com 0*/
                   left:150px; /*afastamos 150px a esquerda*/
                   border:1px solid #ccc;/*define uma borda*/
                }
                /*É agora que vamos mostrar o menu, declarano*/
                #menu li:hover ul,
                #menu ul li:hover ul{
                   display:block;
                }
                
         </style>
         
        <!-- Inicio CSS Flutuação -->    

<style type="text/css">
<!--
#fl_menu{position:absolute; top:27%; left:12%; z-index:9999;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Fim CSS Flutuação --> 
</head>
<body>
<div id="fl_menu">
   <ul id="menu">
         <li><a href="#">Empresa</a> 
      <ul>
        <li><a href="empresa.asp">M. Arnaud</a></li>
        <li><a href="marcas.asp">Nossas marcas</a></li>
      </ul>
    </li>
    <li><a href="#">Produtos</a> 
      <ul>
        <li><a href="#">Mosquet&otilde;es</a> 
          <ul>
            <li><a href="mosquetoes_rosca.asp">Rosca</a></li>
            <li><a href="mosquetoes_automaticos.asp">Autom&aacute;tico</a></li>
            <li><a href="mosquetoes_retos.asp">Reto</a></li>
            <li><a href="mosquetoes_curvos.asp">Curvo</a></li>
            <li><a href="expressas.asp">Costuras expressas</a></li>
            <li><a href="mosquetoes_auxiliares.asp">Auxiliares e mailons</a></li>
          </ul>
        </li>
        <li><a href="#">Roupas</a> 
          <ul>
            <li><a href="underwear.asp">Segunda pele</a></li>
            <li><a href="roupas_aquecimento.asp">Aquecimento</a></li>
            <li><a href="impermeaveis.asp">Imperme&aacute;veis</a></li>
          </ul>
        </li>
        <li><a href="#">Cintos</a> 
          <ul>
            <li><a href="cintos_esportivos.asp">Esportivos</a></li>
            <li><a href="cintos_profissionais.asp">Profissionais</a></li>
          </ul>
        </li>
        <li><a href="#">Cordas</a> 
          <ul>
            <li><a href="dinamicas.asp">Din&acirc;micas</a></li>
            <li><a href="estaticas.asp">Semi-est&aacute;ticas</a></li>
          </ul>
        </li>
        <li><a href="#">Acess&oacute;rios</a> 
          <ul>
            <li><a href="acessorios.asp">T&eacute;cnicos</a></li>
            <li><a href="acessorios_camp_trek.asp">Camping / trekking</a></li>
          </ul>
        </li>
        <li><a href="#">Ancoragens</a> 
          <ul>
            <li><a href="ancoragens.asp">Fixa</a></li>
            <li><a href="moveis.asp">M&oacute;vel</a></li>
          </ul>
        </li>
        <li><a href="ascensores_blocantes.asp">Ascensores & Blocantes</a></li>
        <li><a href="asseguradores_descensores.asp">Asseguradores & descensores</a></li>
        <li><a href="barracas.asp">Barracas</a></li>
        <li><a href="calcados_caminhada.asp">Cal&ccedil;ados</a></li>
        <li><a href="capacetes.asp">Capacetes</a></li>
        <li><a href="cordeletes_fitas.asp">Cordeletes & fitas</a></li>
        <li><a href="literatura.asp">Literatura</a></li>
        <li><a href="mochilas.asp">Mochilas</a></li>
        <li><a href="polias.asp">Polias</a></li>
        <li><a href="sacos_dormir.asp">Saco de dormir</a></li>
        <li><a href="salvamento.asp">Salvamento</a></li>
      </ul>
    </li>
    <li><a href="#">Servi&ccedil;os</a> 
      <ul>
        <li><a href="curso_escalada.asp">Cursos</a></li>
        <li><a href="consultoria.asp">Consultoria</a></li>
      </ul>
    </li>
    <li><a href="contato.asp">Contato</a></li>
  </ul>
  
   <script type="text/javascript">
         $(document).ready(function(){
              $("#menu li").hover(function(){
                                $(this).find('ul:first').css('display', 'block');
                        }, function(){
                                $(this).find('ul:first').css('display', 'none');
                        });
        });
   </script>
   </div>
</body>
<!-- Inicio Script Flutuação --> 
<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;

//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(window).load(function() {
        menuPosition=$('#fl_menu').position().top;
        FloatMenu();
        $fl_menu.hover(
                function(){ //mouse over
                        $fl_menu_label.fadeTo($menu_fade_speed, 1);
                        $fl_menu_menu.fadeIn($menu_fade_speed);
                },
                function(){ //mouse out
                        $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
                        $fl_menu_menu.fadeOut($menu_fade_speed);
                }
        );
});

$(window).scroll(function () { 
        FloatMenu();
});

function FloatMenu(){
        var scrollAmount=$(document).scrollTop();
        var newPosition=menuPosition+scrollAmount;
        if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
                $fl_menu.css("top",menuPosition);
        } else {
                $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
        }
}
</script>
<!-- Fim Script Flutuação --> 
</html>

matheus.labanca · Março 19, 2012

Cara use Jquery, os esquemas de posição dele vão resolver seu problema.

Entrar

Posicionamento de div flutuante

Pergunta

Rafael Wojcik

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

matheus.labanca

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades