Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 18

How do you make a dropdown navigation folder clickable?


jasonbarone

Question

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:

alt text

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!

Edited by jasonbarone
reworded question

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • Answers 37
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 t

For anyone on the dev platform , this is what I did on the Five Template. I edited the main.nav block as followes, I can't remember exactly what I changed as I don't have the before and after but I t

Recommended Posts

  • 3

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.

Link to post
  • 3

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

Edited by jpwv
Link to post
  • 2

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.

Developer Evangelist at Squarespace.

Link to post
  • 2

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.

Template Developer at Squarespace, @esquareda on Twitter.

Link to post
  • 2

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.

Edited by dhoulb
Link to post
  • 1

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)

Edited by alanhouser
typoed
Link to post
  • 1

 

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

}

});

});

 

Link to post
  • 1

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.

Edited by cidinsurance
Link to post
  • 1

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.

Link to post
  • 0

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

Link to post
  • 0

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

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

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • 0

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.

Founder at Squarefront, the global community of Squarespace builders. I'm building products and services for the Squarespace platform and documenting everything on YouTube. I've been working with the platform since 2008 and my work with Squarespace led to me being hired by Uber where I spent over 5 years working on the web, design and content platform teams. 

Need help with Squarespace? Send me an email! Otherwise connect with me on TwitterInstagram, or Linkedin.

Link to post
  • 0

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.

Link to post
  • 0

@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)alt text

Link to post
  • 0

For anyone on the dev platform , this is what I did on the Five Template.

I edited the main.nav block as followes, I can't remember exactly what I changed as I don't have the before and after but I think the bold text JSON may have been the only alteration. This will cause the folder link to automatically trigger the folder URL.

<a href="{collection.fullUrl}" {.if folderActive} class="active-folder"{.end}>{collection.navigationTitle}/

Whilst being exactly what we want for those with hover functionality, it's a problem if you're on a touch device . However I don't think Jquery is necessary to fix it - just a simple bit of CSS taking advantage of Squarespace's inbuilt Modernizr capabilities.

.touch #main-navigation ul .folder-collection > a { pointer-events:none}

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...