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://
アップセクションと私はリンクすることはできません。挫折。
ありがとうございますkeybored、簡単な答えのようですが、この特定のナビゲーション設定ではこれを行うことができません。クリックするとリンクがすべて非表示のdivになります。上記のようにしてdivをコメントアウトしようとすると、navbar全体が動かなくなります。私の唯一の答えは、自分のdivでアウトバウンドをハイパーリンクし、他のものの右側に浮かせたい、2つのリンクを作成することだと思われます。したがって、他のスタイルや操作をバイパスしています。 –
facebook.comにあなたのタブを入力させようとしているのか、またはfacebook.comを新しいページとしてページを完全に開くことができるようにしようとしていますか? – keybored
私はftpとFacebookの両方のリンクを新しいウィンドウで開く必要があります:) –