CODEWITHSUNDEEP
javascriptcsstargetyui-pure-css
Hornbuckle
Hornbuckle

Reputation: 1

Pure-CSS / YUI - horizontal menu, target = _blank doesn't open new window or tab

Using YUI and Pure-CSS, I've created a horizontal nav menu. One link ("Messenger") has to open a new window or tab (target = "_blank") but the Javascript is ignoring that and opening the link in the current window.

The HTML/CSS is:

<div id="demo-horizontal-menu">
<ul id="std-menu-items">
    <li class="pure-menu-selected"><a href="#">Flickr</a></li>
    <li><a href="http://cnn.com" target="_blank">Messenger</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Finance</a></li>
    <li>
        <a href="#">Other</a>
        <ul>
            <li class="pure-menu-heading">More from Yahoo!</li>
            <li class="pure-menu-separator"></li>
            <li><a href="#">Autos</a></li>
            <li><a href="#">Flickr</a></li>
            <li><a href="#">Answers</a></li>
            <li>
                <a href="#">Even More</a>
                <ul>
                    <li><a href="#">Horoscopes</a></li>
                    <li><a href="#">Games</a></li>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">OMG</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

The Javascript is:

YUI({
classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

var horizontalMenu = new Y.Menu({
    container         : '#demo-horizontal-menu',
    sourceNode        : '#std-menu-items',
    orientation       : 'horizontal',
    hideOnOutsideClick: false,
    hideOnClick       : false
});

horizontalMenu.render();
horizontalMenu.show();

});

Here's the fiddle:

http://jsfiddle.net/k8qMY/607/

There seem to be several similar issues with these libraries, but most deal with using onClick to track the new window or forcing a new window as opposed to a new tab.

Upvotes: 0

Views: 797

Answers (2)

Roberto Linares
Roberto Linares

Reputation: 2225

If you see the source code of the sm-menu YUI plugin that you are using, you will notice at line 196 where they reconstruct the <a> element taking only the href attribute, leaving away your target. That is the reason why the "Messenger" menu option doesn't open on a new browser window/tab.

Maybe you could select the menu item and manually add the target attribute after it is rendered.

Upvotes: 1

user2620028
user2620028

Reputation:

Your fiddle (http://jsfiddle.net/p3A9P/) is opening up the messenger link in a new tab for me.

target="_blank" //Appears to be working properly for me.

Possibly it is an environmental issue and not your code? What browser are you using? Is it up to date?

I am using Google Chrome Version 29.0.1547.66 m

Upvotes: 1

Related Questions