2011-01-13 15 views
0

私はZachの非常にクールなjqueryドロップダウンメニューをOne Mighty Roarで使用しています。 Facebookページを新しいウィンドウに表示させるために、これをリンクすることはできません。 JSファイルは以下の通りです:jQueryを使用してSmooth Animated Menuでアウトワードリンクを作成するにはどうすればよいですか?

$(document).ready(function(){ 

//Remove outline from links 
$("a").click(function(){ 
$(this).blur(); 
}); 

//When mouse rolls over 
$("li").mouseover(function(){ 
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 

//When mouse is removed 
$("li").mouseout(function(){ 
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 

}); 

HTMLは以下の通りです:

<div id="nav"> 
<ul class="tabNav"> 
<li><a href="#tab=5"><img src="../images/facebook.png" alt="Check out our Facebook page!" width="36" height="36" border="0" /></a></li> 
<li><a href="#tab=4">FTP Site</a></li> 
<li><a href="#tab=3">Contact</a></li> 
<li><a href="#tab=2">Services</a></li> 
<li class="current"><a href="#tab=1">Projects</a></li> 
</ul> 

<div class="tabContainer"> 
<div class="tab"><p><a href="http://www.facebook.com" target="_blank">Click here to be taken to our Facebook page.</a></p></div> 
<div class="tab"><p>Click here to be taken to our ftp site to download your documents.</p></div> 
<div class="tab">Contact Info</div> 
<div class="tab">Services Info</div> 
<div class="tab current">Projects Info</div> 
</div> 

CSS:私が追加しようとしている

/* MENU */ 

ul.tabNav { 
    list-style: none; 
    width: 100%; 
    float: left; 
} 
ul.tabNav li { 
    float: right; 
    margin: 0; 
} 
.tab.current ul li { 
    list-style-type: none; 
    margin-left: 15px; 
    line-height: 1.5em; 
} 
.tabNav li a img { 
    margin-top: 15px; 
} 
ul.tabNav li.current { 

} 
ul.tabNav a { 
    color: #FFF; 
    display: block; 
    height: 66px; 
    padding: 10px; 
    text-decoration: none; 
    width: 66px; 
    margin-left: 4px; 
    font-size: 16px; 
    border: 1px solid #FF9933; 
    text-align: center; 
    font-weight: normal; 
    text-transform: lowercase; 
    font-family: "Century Gothic"; 
    letter-spacing: 1px; 
    line-height: 60px; 
} 
ul.tabNav li.current a { 
    padding: 10px; 
} 
div.tabContainer { 
    clear: both; 
    float: right; 
    width: 500px; 
    z-index: 9999; 
} 
div.tabContainer div.tab { 
    border: 1px solid #FF9933; 
    color: #FFF; 
    display: none; 
    padding: 10px; 
    background-image: url(images/slideshow_bg.png); 
    background-repeat: repeat; 
    margin-top: 14px; 
    height: 500px; 
} 
div.tab p:last-child { margin-bottom: 0; } 
.tabContainer .tab { display: none; } 

tabNav AND/OR tabContainerでの私のhttp://アップセクションと私はリンクすることはできません。挫折。

答えて

1

あなたが試してみました:

<a href="#" onclick="window.open('http://www.facebook.com')">Click here to be taken to our Facebook page.</a> 

をあなたが他の属性をも設定することができます。ここでドキュメントと例を確認してください:http://www.w3schools.com/jsref/met_win_open.asp

+0

ありがとうございますkeybored、簡単な答えのようですが、この特定のナビゲーション設定ではこれを行うことができません。クリックするとリンクがすべて非表示のdivになります。上記のようにしてdivをコメントアウトしようとすると、navbar全体が動かなくなります。私の唯一の答えは、自分のdivでアウトバウンドをハイパーリンクし、他のものの右側に浮かせたい、2つのリンクを作成することだと思われます。したがって、他のスタイルや操作をバイパスしています。 –

+0

facebook.comにあなたのタブを入力させようとしているのか、またはfacebook.comを新しいページとしてページを完全に開くことができるようにしようとしていますか? – keybored

+0

私はftpとFacebookの両方のリンクを新しいウィンドウで開く必要があります:) –

関連する問題