BootStrap_Problema no Menu

[zumbalele]

Olá pessoal, estou com um grande problema em um site que estou montando. Será que alguém sabe como posso resolver?

 

- Index.html é ONEPAGE - Os menus são no topo e fixos - E descem via Scroll.

 

Problema:

 

Eu preciso que 1 botão do menu, no caso o botão "Loja" quando clicado, ele abra uma nova página "loja.html".

 

Mas quando faço as alterações na TAG <a href> ele fica sem funcionar. Acredito que tenha ficado assim por causa da Classe atribuida na TAG <Header>

Já tentei de tudo e não consigo.

 

 

Será que alguém ai pode me ajudar?

 

Vou copiar o código do menu inteiro aqui embaixo.

<header id="top-header" class="navbar-inverse navbar-fixed-top">            <div class="container">                <div class="navbar-header">                    <!-- responsive nav button -->                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">                        <span class="sr-only">Toggle navigation</span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                    </button>                    <!-- /responsive nav button -->                                        <!-- logo -->                    <div class="navbar-brand">                        <a class="smooth-scroll" data-section="#home" href="#home" >                            <img src="images/logolet.png" alt="">                        </a>                    </div>                    <!-- /logo -->                </div>                <!-- main nav -->                <nav class="collapse navbar-collapse navbar-right" role="navigation">                    <div class="main-menu">                        <ul id="nav" class="nav navbar-nav">                            <li class="scroll"><a href="#home" data-section="#home">Home</a></li>                                                        <li><a href="http://www.uol.com.br">Regular link</a></li> ***(Criei para testar, mas não funcionou assim)***                                                         <li><a target="_new" href="http://www.youtube.com/ortomolecular">comprar</a></li> ***(Criei para testar, mas não funcionou assim)***                                                        <!-- <li class="scroll"><a href="#feature-area" data-section="feature-area">Produto</a></li> -->                            <li class="scroll"><a href="#services" data-section="#antesdepois">Antes e Depois</a></li>                            <li class="scroll"><a href="#portfolio" data-section="#portfolio">Mídias</a></li>                            <li class="scroll"><a href="#contact-area" data-section="#contact-area">Contato</a></li>                           </ul>                    </div>                </nav>                <!-- /main nav -->                            </div>        </header>

Os botões em preto estão funcionando normal, pois eles são apenas Scroll, mas preciso criar um botão no Menu que quando for clicado ele abra uma nova janela com uma nova página.

 

aí galera, quem puder me ajuda!!! Dou LIKE!!!

[DiF]

@zumbalele

 

Recente ajudei outro usuário sobre uso da técnica One page(neste tópico). Ele não usa o bootstrap, mas não faz diferença creio eu.. a não ser o lance do smooth scroll incorporado.. o meu exemplo é mais simples!

Com base nele, eu modifiquei o exemplo e acrescentei um link para o google em outra aba.

 

O comando utilizado foi o atributo target do tipo  _blank no elemento <a>

 

Exemplo online: http://jsfiddle.net/zo3uwdqp/1/

 

Não sei se era isso que tu queria, mas fica esta dica

abraço e boa sorte

[zumbalele]

Olá Dif,

 

Eu vi o seu exemplo, ele utiliza um menu simples. Se eu tentar implementar este menu em meu site, o layout vai ficar todo bugado.

 

Pelo o que eu entendo, preciso criar uma "Sub classe" dentro da classe Scroll para deixar o menu inteiro na classe Scroll e o Botão Comprar na Sub Classe simples, mas mantendo o mesmo layout.

 

Porém não sei fazer isso :/

 

Será que você consegue me ajudar?

[DiF]

@zumbalele

 

Como falei anteriormente, o exemplo era simples, e nunca foi dito para implementar aquele menu no seu site.

O que eu disse era que o princípio é o mesmo independente do menu que você fizer.

 

Não sei resolver teu problema. Até por que nem uso bootstrap mais, por mais que ele seja legal.. eu acho ele muito cheio de coisa.

Eu sugiro que re-faça o seu menu no bootstrap(só o visual dele), implemente a técnica que eu mostrei no exemplo de forma simples sem o smooth scroll,  se funcionar o target _blank  depois você adiciona  uma  rolagem suave...  dá para fazer com jQuery exemplo do que uso atualmente:

 function filterPath(string) {				    return string				      .replace(/^\//,'')				      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')				      .replace(/\/$/,'');				  }				 								  $('a[href*=#]').each(function() {				    if ( filterPath(location.pathname) == filterPath(this.pathname)				    && location.hostname == this.hostname				    && this.hash.replace(/#/,'') ) {				      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');				      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;				       if ($target) {				         var targetOffset = $target.offset().top - 68;				         $(this).click(function() {				           $('html, body').animate({scrollTop: targetOffset}, 300);				           return false;				         });				      }				    }				  });

Se quiser alterar o espaçamento de onde ele para quando clica no link é esta linha: var targetOffset = $target.offset().top - 68;

Onde o 68 é onde estou tirando 68px de distância do topo.

 

Sinceramente acho que é os recursos do bootstrap que podem dar conflito.