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

How do you make a dropdown navigation folder clickable?

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.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


Link to post

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.

Share this post


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

Share this post


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.

Share this post


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.

Share this post


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

Share this post


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

Share this post


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

}

});

});

 

Share this post


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

Share this post


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.

Share this post


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

Share this post


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.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


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.
  • 🎥Documenting the process of building Squarefront on YouTube.
  • 🚗Senior Design Engineer, Design Platform at Uber.
  • 🍕Connect with me on Instagram, Twitter and Linkedin.
  • Need help with Squarespace? I've used the platform for well over 10 years and have helped thousands of businesses, both small and large. Send me an email!

Share this post


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.

Share this post


Link to post
  • 0

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)

Share this post


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

Share this post


Link to post
  • 0

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

Share this post


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}

Share this post


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