Menu "Bagunçado"

[uiLhian 1]

Bom o menu aqui testando LOCAL fica normal um ao lado do outro PRINCIPAL | PORTIFOLIO | CONTATO só que quando eu hospedo o site o menu fica bagunçado. o site é esse:

www.construtorawvaraujo.com

 

desde ja muito obrigado!

[Marcos Xavier 189]

Cara este menu, como já disse antes esta uma baderna, especialmente em Contato.

Minha sugestão é:

-deixe o item (contato) da lista como um link, este por sua vez ao ser clicado, apresenta

a div com o formulário de contato.

No outro tópico que você havia criado

, passei um exemplo legal. Dá uma estudada.

[uiLhian 1]

blz.

valeu!

 

vo ve se consigo adapta ao exemplo que vc me passo.

[Marcos Xavier 189]

Beleza. Faz as alterações e se não funfar posta ae que hoje eu to no ar!!

[uiLhian 1]

<ul>
<li><a href="#">principal</a></li>
<li><a href="#">portifólio</a></li>
<li><a class='open' href=''>contato</a></li>
</ul>

<div "CORPO">
<div class='popbox'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<h3>onde estamos</h3>
<div class="contato">
<p>TESTE</p>
<dl>
<dt><img src="1.png" alt="" /></dt>
<dd>TESTE</dd>
</dl>
<dl>
<dt><img src="2.png" alt="" /></dt>
<dd>TESTE</dd>
</dl>
</div>
</div>
</div>
</div>

 

 

.popbox {
  margin: 0px auto;
  position: relative;
}
.box {
display: block;
display: none;
background: #FFF;
border: solid 1px #BBB;
border-radius: 5px;
box-shadow: 0px 0px 15px #999;
padding: 15px;
}
.arrow {
border-bottom: 11px solid #FFF;
left: 1px;
top: -10px;
z-index: 1001;
}
.arrow-border {
border-bottom: 11px solid #BBB;
top: -12px;
z-index: 1000;
}
.arrow, .arrow-border {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.box, .arrow, .arrow-border {
position:absolute;
}

*.js

 

(function( $ ){

  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.open',
      box           : '.box',
 arrow         : '.arrow',
      arrow_border  : '.arrow-border',
      close         : '.close'
    }, options);

    var methods = {
      open: function(event){
        event.preventDefault();

        var pop = $(this);
        var box = $(this).parent().find(settings['box']);

        box.find(settings['arrow']).css({'left': box.width()/2 - 10});
        box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});

        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 35, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },

      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };

    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });

    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });

    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
      $(settings['open'], this).bind('click', methods.open);
      $(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
    });
  }
})(jQuery);

bom tentei assim mas não obtive resultado... ;(

[Marcos Xavier 189]

Só arrumar. Fiz baseado, no post do maujor http://www.maujor.com/blog/2009/04/16/janela-modal-com-jquery/

HTML

 

<ul>
<li><a href="#">principal</a></li>
<li><a href="#">portifólio</a></li>
<li><a class='open' href="#popbox" name="modal">contato</a></li>
</ul>


<div id="boxes">

<div id="popbox" class="window">

    <a href="#" class="close">Fechar [X]</a><br />

    <div class='box'>
    <div class='arrow'></div>
    <div class='arrow-border'></div>
      <h3>onde estamos</h3>
        <div class="contato">
        <p>TESTE</p>
        <dl>
        <dt><img src="1.png" alt="" /></dt>
        <dd>TESTE</dd>
        </dl>
        <dl>
        <dt><img src="2.png" alt="" /></dt>
        <dd>TESTE</dd>
        </dl>
        </div>
    </div>
    
</div>

<div id="mask"></div>
</div>

 

CSS

 

 

#mask {position:absolute;
z-index:9000;  
display:none;
}

#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

#boxes #popbox {
width:375px;
height:203px;
}
/* posiciona o link para fechar a janela */
.close {
display:block;
text-align:right;
}  


.popbox {
  margin: 0px auto;
  position: relative;
  display: none;
}
.box {
display: block;

background: #FFF;
border: solid 1px #BBB;
border-radius: 5px;
box-shadow: 0px 0px 15px #999;
padding: 15px;
}
.arrow {
border-bottom: 11px solid #FFF;
left: 1px;
top: -10px;
z-index: 1001;
}
.arrow-border {
border-bottom: 11px solid #BBB;
top: -12px;
z-index: 1000;
}
.arrow, .arrow-border {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
}
.box, .arrow, .arrow-border {
position:absolute;
}

 

JS

 

$(document).ready(function() {

//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();

//armazena o atributo href do link
var id = $(this).attr('href');

//armazena a largura e a altura da tela
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Define largura e altura do div#mask iguais ás dimensões da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});

//efeito de transição
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);

//armazena a largura e a altura da janela
var winH = $(window).height();
var winW = $(window).width();
//centraliza na tela a janela popup
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//efeito de transição
$(id).fadeIn(2000);
});

//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
$('#mask, .window').hide();
});

//se div#mask for clicado
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});

 

Não esqueça de importar a biblioteca jquery

[uiLhian 1]

blz Marcos...

valeu ae pela força vou adapta-lo aqui.

 

:natalsmile: