Home › Forums › General Issues › Dropdown Menu Nav with External Links
Does anyone know if ACF can create a dropdown menu nav (a select menu) that once an option is selected, it will redirect to an external link inputted via the custom field?
A jump menu if you will.
Detailed instructions would help! Thanks! 🙂
@alexi I’m not sure if I know exactly what you mean. I’ve personally never seen a select’s option be a link. And I’m talking about <select> form control.
You could create a traditional dropdown, but would require css and js to work. If this is what you are wanting, you would want to create a repeater with a Link field type sub field with an array return type. Then you’re code would look something like the following. I’m using an example of a dropdown from W3Schools https://www.w3schools.com/howto/howto_js_dropdown.asp
PHP/HTML
<?php if( have_rows('repeater_field_name') ) : ?>
<div class="dropdown">
<button class="dropdown-button">Dropdown</button>
<div id="myDropdown" class="dropdown-options">
<?php
while( have_rows('repeater_field_name') ) : the_row();
$link = get_sub_field('option_link');
?>
<a href="<?php echo $link['url']; ?>" target="<?php echo $link['target']; ?>"><?php echo $link['title']; ?></a>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
JS
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropdown-button')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Then here are some styles. Some are necessary, but others can be changed to fit your needs.
CSS
/* The container <div> - needed to position the dropdown options */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-options {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-options a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-options a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-options container when the user clicks on the dropdown button) */
.show {display:block;}
I apologize if I’m not understanding you correctly.
you can do this by creating a navigation Folder and adding Navigation Links to it which send visitors to external sites.
As i see you have a custom code that scrolls to some anchor in the code. So this prevents default onclick events even for external links.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
CPT registration is coming to ACF! We demoed the new feature during the most recent session of ACF Chat Fridays. Check out the summary for the details. https://t.co/k2KQ3WWBAz
— Advanced Custom Fields (@wp_acf) March 7, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.