Drop-down menu without link

GONZALO_LOPEZ_Q
Tourist
16 0 2

Can i create a drop down menu without a link in the main menu (the one that i want to drop down from)? So the visitor could only click on the drop down items… 

Replies 22 (22)
E_Chaker
Shopify Partner
1 0 0

Thank you soo much

Ninthony
Shopify Partner
2247 339 900

It's a little bit annoying for the link to be necessary. There are some cases where you could still want to pull information from a link list and not have it link to anything. For instance, I'm working on a navigation with a sticky nav. I don't want to have my link list link to "#" because that will take you to the top of the page. So if you're clicking on some of my links and you're at the bottom of the page, you'll be yanked to the top. 

To get around this, my solution right now is to use some jquery on the page load to see if there's any <a> tags that have a hash set for their href, and if they do, change the contents to "javascript:;" which doesn't pull you to the top of the page. This is not desireable, but I don't see what else I can do as some of my items in that link list SHOULD link somewhere, but some should open another menu. 

If anyone know's a different solution, I'd love to hear from you. Here is my code Im running to switch out the hashes at the beginning of my javascript file. 

$('a').each(function(){
var link = $(this)[0].attributes[0].value;
if(link === "#"){
$(this)[0].attributes[0].value = "javascript:;"
}
})

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
christinezed
New Member
1 0 0

Hi @Ninthony, did you manage to find a solution for this? I'm having exactly the same problem.

 

 

Ninthony
Shopify Partner
2247 339 900
My solution was to link it to the hash, but when I'm in the loop for my link list I wrap each side of the anchor tags in an if statement that checks for the hash, so they dont appear if it does, kind of like:

{% if link.url != '#' %}
<a href ="{{ link.url }}">
{% endif %}
{{ link.title }}
{% if link.url != '#' %}
</a>
{% endif %}

This way it still will echo out the link, but will only put an anchor tag if the link.url does not equal a hash.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Kaenja
New Member
1 0 0
Thank You sooo much. Worked for me as well. So happy!!!
DavidB1
Shopify Partner
5 0 1

Thank you ebellest, i was stuck on this.

31-Flavours
New Member
1 0 0

Hi Ninthony, 

 

I'm using the # in the (top level) nav links, but don't want it as a hover/clickable link with mouse on desktop, I just want it as text, so users know it's a heading not a menu item. 

 

Just wondering where you INSERTED your code? To make this work?

 

Big Thanks! 31F!

Allan-EP
Shopify Partner
11 0 17
.selector{
 pointer-events: none;
}

Is also a good option for using # in the link when you don't want the item to respond to clicks/taps. 

cl4udio
New Member
1 0 0

The instructions of @eballeste1 at 03-10-2018 02:15 AM works fine in june 2020!

 

Thanks for this.

Alannah1
New Member
1 0 0

Hi Liam - are there current ways to do this?

 

Just tried # hack on Main Menu and Sub menu and didn't work on either