Dropdown button WITHIN the body of a page

Hi! I'm looking for a way to add a dropdown menu within my page. My site has many location pages, and I want the home page to allow users to select their location (and be taken to that specific location page) from a dropdown right in the first section of the page. Any ideas how to do this? 

Thanks!

-Steven 

Is this dropdown going to be on the nav bar? You would simply add a folder, and a click will take them there. If you want a fast scroll down the page to a particular section then anchor links is the way to go. 

Folder: 

Anchor links: 

Hi, thanks for your reply, but neither of these are what I'm looking for.

I want a dropdown WITHIN the body of the page (not in the nav bar) that links to other pages. Basically an archive block in the dropdown layout that will link to specific pages and not just blog posts or products/events. 

Add a code block to your page with the following HTML.

<select id="archive-pages" onchange="window.open ( this.value, '_self' );">

  <option value="#">
  
    Choose your page
    
    </option>
    
  <option value="/page1.html">
  
    Page 1
    
    </option>
    
  <option value="/page2.html">
  
    Page 2
    
    </option>
    
  <option value="/page3.html">
  
    Page 3
    
    </option>
    
  </select>

You will of course have to change the page name values and urls.

Let us know how it goes.

This code function works awesome. Is there a way to make it look more like a button or more appealing with color to the box or text??? 

@Kevin415

It is possible but both methods involve a bit of work.

One way is to do something like the following.

Styling a Select Like It’s 2019

Be sure to click on the results button. It just a minor enhancement to the look of the menu. The core of it doesn't change.

The second method is pretty involved.

How TO - Custom Select Box

There may be some libraries that might ease the task of building something like this.

Is there a way to make the page name values/urls a tag instead so that when people select an option, it comes up with all products with that tag?

On 1/21/2023 at 5:35 PM, Natalie192 said:

Is there a way to make the page name values/urls a tag instead so that when people select an option, it comes up with all products with that tag?

Sure. Tagged items have their own page so just use the URL for the tag page. There is nothing magic here folks the code just goes to whatever URL you provide it.

For those who it may help, here's another approach for this. I just finished this for a client who wants customers to select a county in California to see if their service is available in their county. You can copy and paste the below code into a code block and tweak the CSS to fit your style. This was styled based on their colors and to look more like a button.

There are 58 counties represented here, so if you need fewer items, simply delete whatever <a></a> tags you don't need. Also, I put a max-height so it wasn't ridiculously long on the page, but if you only have a few items and would like them displayed all at once, you can change the max-height property value from "200px" to "auto" in the <style> tag.

This is also mostly built to have a popup form appear when clicked (except for two locations), so you'll want to change the value between the quotations in the href attribute to your page URL slug.

I hope this helps!

<div class="dropdown">
  <button class="dropbtn">Sign Up</button>
  <div class="dropdown-content">
  <p>select your county</p>
  <a href="#lightbox_not-available">Alameda</a>
  <a href="#lightbox_not-available">Alpine</a>
  <a href="#lightbox_not-available">Amador</a>
  <a href="#lightbox_not-available">Butte</a>
  <a href="#lightbox_not-available">Calaveras</a>
  <a href="#lightbox_not-available">Colusa</a>
  <a href="#lightbox_not-available">Contra Costa</a>
  <a href="#lightbox_not-available">Del Norte</a>
  <a href="#lightbox_not-available">El Dorado</a>
  <a href="#lightbox_not-available">Fresno</a>
  <a href="#lightbox_not-available">Glenn</a>
  <a href="#lightbox_not-available">Humboldt</a>
  <a href="#lightbox_not-available">Imperial</a>
  <a href="#lightbox_not-available">Inyo</a>
  <a href="#lightbox_not-available">Kern</a>
  <a href="#lightbox_not-available">Kings</a>
  <a href="#lightbox_not-available">Lake</a>
  <a href="#lightbox_not-available">Lassen</a>
  <a href="#lightbox_not-available">Los Angeles</a>
  <a href="#lightbox_not-available">Madera</a>
  <a href="#lightbox_not-available">Marin</a>
  <a href="#lightbox_not-available">Mariposa</a>
  <a href="#lightbox_not-available">Mendocino</a>
  <a href="#lightbox_not-available">Merced</a>
  <a href="#lightbox_not-available">Modoc</a>
  <a href="#lightbox_not-available">Mono</a>
  <a href="#lightbox_not-available">Monterey</a>
  <a href="#lightbox_not-available">Napa</a>
  <a href="#lightbox_not-available">Nevada</a>
  <a href="#lightbox_not-available">Orange</a>
  <a href="#lightbox_not-available">Placer</a>
  <a href="#lightbox_not-available">Plumas</a>
  <a href="#lightbox_not-available">Riverside</a>
  <a href="#lightbox_not-available">Sacramento</a>
  <a href="#lightbox_not-available">San Benito</a>
  <a href="#lightbox_not-available">San Bernardino</a>
  <a href="#lightbox_not-available">San Diego</a>
  <a href="#lightbox_not-available">San Francisco</a>
  <a href="#lightbox_not-available">San Joaquin</a>
  <a href="https://app.gobento.com/forms/cencal-health-patient-enrollment" target="_blank">San Luis Obispo</a>
  <a href="#lightbox_not-available">San Mateo</a>
  <a href="https://app.gobento.com/forms/cencal-health-patient-enrollment" target="_blank">Santa Barbara</a>
  <a href="#lightbox_not-available">Santa Clara</a>
  <a href="#lightbox_not-available">Santa Cruz</a>
  <a href="#lightbox_not-available">Shasta</a>
  <a href="#lightbox_not-available">Sierra</a>
  <a href="#lightbox_not-available">Siskiyou</a>
  <a href="#lightbox_not-available">Solano</a>
  <a href="#lightbox_not-available">Sonoma</a>
  <a href="#lightbox_not-available">Stanislaus</a>
  <a href="#lightbox_not-available">Sutter</a>
  <a href="#lightbox_not-available">Tehama</a>
  <a href="#lightbox_not-available">Trinity</a>
  <a href="#lightbox_not-available">Tulare</a>
  <a href="#lightbox_not-available">Tuolumne</a>
  <a href="#lightbox_not-available">Ventura</a>
  <a href="#lightbox_not-available">Yolo</a>
  <a href="#lightbox_not-available">Yuba</a>
  </div>
</div>

<style>
  :root {
    --white: #ffffff;
    --gray-1: #f9f9f9;
    --gray-2: #f1f1f1;
    --pink: #ff0083;
    --black: #000;
  }

  .dropbtn {
    background-color: var(--pink);
    color: white;
    padding: 25px 40px;
    border: 2px solid var(--pink);
    border-radius: 16px 0;
    cursor: pointer;
    transition: all ease .5s;
    text-transform: uppercase;
    font-weight: 700 !important;
    min-width: 160px;
  }

  .dropdown:hover .dropbtn {
    opacity: .85;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--gray-1);
    min-width: 160px;
    max-height: 200px;
    overflow: scroll;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 0 16px 0 16px;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  } 

  .dropdown-content p {
    opacity: 1 !important;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    padding: 12px 16px;
    background: var(--black);
    color: white !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 700 !important;
  }

  .dropdown-content p,
  .dropdown-content a {
    text-decoration: none;
    display: block;
  }

  .dropdown-content a {
    padding: 12px 16px;
    color: var(--black);
  }

  .dropdown-content a:hover {
    background-color: var(--gray-2);
  }
</style>

Hello I just used this code @AndyB - works so well, thank you! Is there a way to add a down pointing caret (like this ╲╱) to the header, and justify it right? I justified my text left- thank you!!

On 5/3/2024 at 12:59 PM, AndyB said:

For those who it may help, here's another approach for this. I just finished this for a client who wants customers to select a county in California to see if their service is available in their county. You can copy and paste the below code into a code block and tweak the CSS to fit your style. This was styled based on their colors and to look more like a button.

There are 58 counties represented here, so if you need fewer items, simply delete whatever <a></a> tags you don't need. Also, I put a max-height so it wasn't ridiculously long on the page, but if you only have a few items and would like them displayed all at once, you can change the max-height property value from "200px" to "auto" in the <style> tag.

This is also mostly built to have a popup form appear when clicked (except for two locations), so you'll want to change the value between the quotations in the href attribute to your page URL slug.

I hope this helps!

 

<div class="dropdown">
  <button class="dropbtn">Sign Up</button>
  <div class="dropdown-content">
  <p>select your county</p>
  <a href="#lightbox_not-available">Alameda</a>
  <a href="#lightbox_not-available">Alpine</a>
  <a href="#lightbox_not-available">Amador</a>
  <a href="#lightbox_not-available">Butte</a>
  <a href="#lightbox_not-available">Calaveras</a>
  <a href="#lightbox_not-available">Colusa</a>
  <a href="#lightbox_not-available">Contra Costa</a>
  <a href="#lightbox_not-available">Del Norte</a>
  <a href="#lightbox_not-available">El Dorado</a>
  <a href="#lightbox_not-available">Fresno</a>
  <a href="#lightbox_not-available">Glenn</a>
  <a href="#lightbox_not-available">Humboldt</a>
  <a href="#lightbox_not-available">Imperial</a>
  <a href="#lightbox_not-available">Inyo</a>
  <a href="#lightbox_not-available">Kern</a>
  <a href="#lightbox_not-available">Kings</a>
  <a href="#lightbox_not-available">Lake</a>
  <a href="#lightbox_not-available">Lassen</a>
  <a href="#lightbox_not-available">Los Angeles</a>
  <a href="#lightbox_not-available">Madera</a>
  <a href="#lightbox_not-available">Marin</a>
  <a href="#lightbox_not-available">Mariposa</a>
  <a href="#lightbox_not-available">Mendocino</a>
  <a href="#lightbox_not-available">Merced</a>
  <a href="#lightbox_not-available">Modoc</a>
  <a href="#lightbox_not-available">Mono</a>
  <a href="#lightbox_not-available">Monterey</a>
  <a href="#lightbox_not-available">Napa</a>
  <a href="#lightbox_not-available">Nevada</a>
  <a href="#lightbox_not-available">Orange</a>
  <a href="#lightbox_not-available">Placer</a>
  <a href="#lightbox_not-available">Plumas</a>
  <a href="#lightbox_not-available">Riverside</a>
  <a href="#lightbox_not-available">Sacramento</a>
  <a href="#lightbox_not-available">San Benito</a>
  <a href="#lightbox_not-available">San Bernardino</a>
  <a href="#lightbox_not-available">San Diego</a>
  <a href="#lightbox_not-available">San Francisco</a>
  <a href="#lightbox_not-available">San Joaquin</a>
  <a href="https://app.gobento.com/forms/cencal-health-patient-enrollment" target="_blank">San Luis Obispo</a>
  <a href="#lightbox_not-available">San Mateo</a>
  <a href="https://app.gobento.com/forms/cencal-health-patient-enrollment" target="_blank">Santa Barbara</a>
  <a href="#lightbox_not-available">Santa Clara</a>
  <a href="#lightbox_not-available">Santa Cruz</a>
  <a href="#lightbox_not-available">Shasta</a>
  <a href="#lightbox_not-available">Sierra</a>
  <a href="#lightbox_not-available">Siskiyou</a>
  <a href="#lightbox_not-available">Solano</a>
  <a href="#lightbox_not-available">Sonoma</a>
  <a href="#lightbox_not-available">Stanislaus</a>
  <a href="#lightbox_not-available">Sutter</a>
  <a href="#lightbox_not-available">Tehama</a>
  <a href="#lightbox_not-available">Trinity</a>
  <a href="#lightbox_not-available">Tulare</a>
  <a href="#lightbox_not-available">Tuolumne</a>
  <a href="#lightbox_not-available">Ventura</a>
  <a href="#lightbox_not-available">Yolo</a>
  <a href="#lightbox_not-available">Yuba</a>
  </div>
</div>

<style>
  :root {
    --white: #ffffff;
    --gray-1: #f9f9f9;
    --gray-2: #f1f1f1;
    --pink: #ff0083;
    --black: #000;
  }

  .dropbtn {
    background-color: var(--pink);
    color: white;
    padding: 25px 40px;
    border: 2px solid var(--pink);
    border-radius: 16px 0;
    cursor: pointer;
    transition: all ease .5s;
    text-transform: uppercase;
    font-weight: 700 !important;
    min-width: 160px;
  }

  .dropdown:hover .dropbtn {
    opacity: .85;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--gray-1);
    min-width: 160px;
    max-height: 200px;
    overflow: scroll;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 0 16px 0 16px;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  } 

  .dropdown-content p {
    opacity: 1 !important;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    padding: 12px 16px;
    background: var(--black);
    color: white !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 700 !important;
  }

  .dropdown-content p,
  .dropdown-content a {
    text-decoration: none;
    display: block;
  }

  .dropdown-content a {
    padding: 12px 16px;
    color: var(--black);
  }

  .dropdown-content a:hover {
    background-color: var(--gray-2);
  }
</style>

 

@AndyB How do I add links to each item? 

19 hours ago, User1776 said:

@AndyB How do I add links to each item? 

Replace the links inside the <a></a> tag. Between the quotation marks, you can put the link you want.

For example from the code I shared:

<a href="#lightbox_not-available">Alameda</a>

Internal links will be the URL slug for the page you'd like on your site:

<a href="/about-us">Alameda</a>

External links will be the URL for the external page:

<a href="https://www.squarespace.com">Alameda</a>

And, as you probably know, you can change the text between the <a></a> tag (e.g., "Alameda" in this example) to display the text you'd like people to see on the button.

I hope this helps!

On 8/6/2024 at 11:04 AM, emilynola said:

Hello I just used this code @AndyB - works so well, thank you! Is there a way to add a down pointing caret (like this ╲╱) to the header, and justify it right? I justified my text left- thank you!!

Try something like this in the <style></style> tag:

.dropbtn:after {
  display: block;
  font-family: 'squarespace-ui-font' !important;
  content: "\e009" !important;
  -webkit-transform: rotatex(0deg) translatey(-50%) !important;
  transform: rotatex(0deg) translatey(-50%) !important;
  position: absolute;
  top: 50% !important;
  right: 17px;
}

Adjust the "right" position number to move it closer or farther from the edge.

Here's a different approach you could try:

.dropbtn {
  display: flex;
  justify-content: space-between;
}
.dropbtn:after {
  display: inline-block;
  font-family: 'squarespace-ui-font' !important;
  content: "\e009" !important;
  -webkit-transform: rotatex(0deg) !important;
  transform: rotatex(0deg) !important;
}

I hope this helps!