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 comment

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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment

Create an account or sign in to comment

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

×
×
  • Create New...