Question

I am using a very cool jquery drop down menu by Zach at One Mighty Roar. I cannot get this to link to let’s say, a Facebook page in a new window. The js file is below:

$(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'})
});

});

The html is below:

<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>

The 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; }

I have tried adding my http:// up in the tabNav AND/OR the tabContainer sections and I cannot link out. Frustrating.

Answer 1

Have you tried:

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

You can also set other attributes. Check out the documentation and examples here: http://www.w3schools.com/jsref/met_win_open.asp