Open ULR link in navigation in new window with CSS List Menu

Dcode warner asked on February 19, 2017 22:38

I know you can make a link open in a new window through the CMS DESK > Properties > navigation > and window.open('https://www.google.com');return false;

But isn't there another way to do this. Even through the document type? I'm using a CSS List menu web-part and have Kentico Version 7

Recent Answers


Dawid Jachnik answered on February 20, 2017 09:28

Hi,

As I remember you can't do it for single item in the CSS List menu web part. You can do it for whole web part, it contains something like target frame, there you can specify how to links are processed.

If you don't want to use js, then you should use reapeter instead of css list menu web part and fit to your needs.

0 votesVote for this answer Mark as a Correct answer

Mariia Hrytsai answered on February 20, 2017 09:35

I think this is the only way if you use CSS List menu web part. You can try using some viewer web part like Repeater where you can manage mark up of your menu items using transformations. Then you can add additional field to CMS.MenuItem page type like 'Open in new window' with options 'true' and 'fasle'. And in transformation check this value like <a href="<%#GetDocumentUrl()%>" target='<%# Eval<bool>("OpenInNewWindow") ? "_blank" : "_self"%>'>Link name</a>

0 votesVote for this answer Mark as a Correct answer

Chetan Sharma answered on February 20, 2017 13:02

I usually don't like the CSS List Menu much as it doesn't offer much control on the UI markup.

I would rather use a repeater to access the Page Types(s). I would also set these Page Type(S) with a common property field "OpenInNewWindow" of bool type and then use transformation to create the Markup.

This way you will be able to have control on each and every document. Some could be open in the same window and others could be open in a new window.

<a href="<%#Eval("NodeAliasPath")%>" target='<%# Eval<bool>("OpenInNewWindow") ? "_blank" : "_self"%>'><%#Eval("DocumentName")%></a>

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on February 20, 2017 15:27

I have an article on this here. It is NOT using the CSS List Menu webpart, it is using a Repeater because you don't have access to all the properties needed in the CSS List Menu.

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on February 20, 2017 16:41 (last edited on February 20, 2017 17:49)

Image Text

this.href='#';window.open('https://www.google.com', '_blank');return false; There is no other way with the CMS List Menu. You have to switch to repeater/hierarchical menus to get flexibility. We used to have CMS list Menu in the begining, but switched to hierarchical menu later on. Read Best Practices for Implementing Site Navigation P.S. As far I understand you are trying to show this window.open based document type. You may try to render css classes in the menu based your document and then check it in javascript and do window open.

0 votesVote for this answer Mark as a Correct answer

Peter Mogilnitski answered on February 20, 2017 18:26 (last edited on February 20, 2017 18:37)

On second thought you have a couple things to consider: Image Text

"Apply Menu Design" will tell kentico to use your CSS class that you can set in Properties>Navigation>Menu Item Design. So you can basically do it in javascript, i.e. check if your menu element class is the one - open window etc. Normal macros won't work in "Menu Item Design" text box, but substitution macros will. You need to create a substitution macro call it currentdocumentcssclass (or something else) and put {~currentdocumentcssclass ~}in your Menu Item Design textbox. It will work, but wouldn't it be easier to switch to hierarchical menus? :)

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.