Support

Account

Home Forums General Issues Dropdown Menu Nav with External Links

Solving

Dropdown Menu Nav with External Links

    • alexi

    • November 27, 2018 at 6:06 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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.