How do you make a dropdown navigation folder clickable?

I'd like to place a few Categories into a folder, and have the Main Link (the Folder itself) actually link to a Category too.

How is that possible?

Example:

I need the Folder Link (Decorate) to actually take people to the Category for Decorate so I don't have to list it inside of the Folder.

So basically my question is how do I turn the Folder Link into an actual link? I saw your other thread about this but it doesn't work if the links are External Links, which these are...

Thanks!

You can just add external links inside a folder that link to the categories.

Or were you wanting something more automated for a certain collection (where the list of categories stays in sync with the list of available categories in the collection)?

You could use JQuery or YUI3.

Example:

Y.one('.folder').on('click', function () {
   window.location.href='http://www.google.com';
});?

I know you were probably searching for a solution supported by Squarespace 6 - this is not that answer, but it will help you if you really need to get this done.

I just posted about something like this - the only automated way to do it is to actually include the page rather than the link. The folder automatically clicks to the first normal page (NOT BLOG) it finds in the folder. I just posted saying there should be an open that says the click opens to a predefined link. The problem with putting the page in there is that it makes two links to the same page - the actually Main Nav Link and the page in the drop down. Kinda redundant.

Hi, could you post the site so I can take a look at what you've done? Thanks

Site isn't live yet. I basically added something like this to my navigation.block

(a href="/?category={collection.title|url-encode}">{collection.navigationTitle}

Ack HTML block. Basically I used the JSON tags to make my Folder Name link to a page that has the same URL slug.

In my scenario above, I'm doing it for Categories and not Pages.

In your navigation markup, use {collection.fullUrl} for the link of the folder itself and it will automatically link to the first page within the folder. You can also add a folder.list file to your template and design a landing page built from folder page information.

It seems the simplest solution to this would be for them to add a click through like has been done on other items.

I went looking for this earlier, and put it through usability testing on mobile. It's problematic on touch devices (iPad/tablets), simply because you can't get the folder open on mouse-over. The way to get the folder open on touch is to CLICK it, and if there's a link on the folder, you'll get scooted-away to the landing page before you can select a subpage. —or disable that click on touch devices. m-kay.

What I found, I posted here. (and posted the script too)

Where do I place this code? on the settings pop up, special characters are auto deleted from the URL bar

@foleyatwork Where do you put that code? I can't figure it out.ThanksIain

Add this html to the Header code injection.
Settings / Advanced / Code Injection / Header ...

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Add more sections for more folder (Folder 3....)

$(function() {

$('.main-nav li a').each(function () {

if ($(this).text() == 'Folder 1') {

$(this).attr('href','http://www.page1');

$(this).attr('onclick','true');

}

if ($(this).text() == 'Folder 2') {

$(this).attr('href','http://www.page2');

$(this).attr('onclick','true');

}

});

});

All four lines is the code you need to inject.

I took the approach of adding an 'overview' page as the first item in the folder.

Then I added the following code into the Code Injection section of the advanced settings, to make clicks on that folder go to its first subpage instead.

<script>
var folders = document.querySelectorAll('.folder-collection > a'),
   folder_click = function () {
       var a = this.parentNode.querySelector('.subnav a');
       window.location = a.href;
   };
Array.prototype.forEach.call(folders, function (folder) {
   folder.addEventListener('click', folder_click);
});
</script>

Also: the following snippet of CSS (pasted in the Custom CSS editor) will hide the first item in the folder, creating the impression that the folder itself is a page.

.folder-collection .subnav ul > li:first-child { display: none !important; }

This entire thing is a horrible workaround, but it works.

Great! Thanks!!!!

Hey I have the same exact problem that you do. I added an overview page as the first page in the folder, but I do not want the overview page to show up in the dropdown.

I tried adding this code but it didn't change anything:

.folder-collection .subnav ul > li:first-child { display: none !important; }

Any help would be greatly appreciated, thanks.

Move your overview page to the NOT LINKED section of your PAGES list.
The problem you are having is because your overview page is in the navigation folder. Everything in that folder will show. This is how I got it to work for me. I don't you will need the added code you quoted above.

But then how do I get it to go to the overview page when you click on the folder?

the code posted by jpwv(see above) worked great without adding a overview page. You just have to write the name of your Folder and paste the links you want to open (the first sub-page)

I have a similar issues. I have a folder called Destinations. I have 3 pages under Destinations. I have a page called destinations under not linked section and it contains information about the sub pages and some more information.

When I click on the Destinations folder I want it to navigate to Destinations page. So I injected the code in the header

I am not sure what the problem is. It doesn't go to destinations page instead it opens a page for the first sub menu item.

This is the code i am using.

@uma looks like you're adding an unnecessary link in your script. Also it will be much easier to test if you use relative (instead of absolute) links to pages. Instead of linking to "http://www.evoqueventures.com/destinations" ... just link to "/destinations".

Try this:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> $(function() { $('.main-nav li a').each(function() { if ($(this).text() == 'Destinations') { $(this).attr('href','/destinations'); $(this).attr('onclick','true'); }}); }); </script>

(if it was mangled, here's an image)

I changed the href as you suggested, But no luck. Didn't work. I am using Bedford template on Google Chrome Browser.