Posicionamento de div flutuante

Rafael Wojcik · March 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 · March 19, 2012

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

Sign In

Posicionamento de div flutuante

Question

Rafael Wojcik

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

matheus.labanca

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity