Jump to content

Dropdown button WITHIN the body of a page

Recommended Posts

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 

Link to comment

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. 

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...
  • 9 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...

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>

 

Looking for help with a project?
💻 www.connectionmadedesign.com
 for hire on Upwork (Top Rated Plus)

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.