Text Block Menu

Look Demo

A great alternative to the Squarespace menu block. This plugin uses css editor and works with all template families.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

/* = = TEXT BLOCK MENU = = */

// — — VARIABLES — — //
@currencyBefore: '$';
@currencyAfter: '';
@alternate-background_color: #999;
@alternate-background_opacity: 15;

// — — CODE — — //
.sqs-layout {

  // Menu Styles //
  &:not(.sqs-editing) {
    .html-block.sqs-block {
      .sqs-block-content,
      .sqs-html-content {

        // Reset List Styles //
        ol {
          padding: 0;
          margin: 0;
          list-style: none;
        }

        // Ordered List Container  //
        > ol {
          @media only screen and (max-width: 640px) {
            margin: 0 -20px;
          }

          // Menu Item //
          > li {
            font-weight: bold;
            text-transform: uppercase;
            padding: 17px 4em 17px 17px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;

            @media only screen and (max-width: 640px) {
              padding-left: 20px;
            }

            // Alternate Background //
            &:nth-child(even) {
              background: fade(@alternate-background_color, @alternate-background_opacity);
            }

            // Paragraph items are now contained within list items //
            p {
              margin: 0;

              &:before {
                display: none;
              }
            }

            // Details Container //
            > ol {
              font-weight: normal;
              text-transform: none;

              > li {

                // Price //
                &:nth-child(1) {
                  position: absolute;
                  top: 17px;
                  right: 17px;
                  white-space: nowrap;

                  p:before {
                    content: @currencyBefore;
                    display: inline;
                  }

                  p:after {
                    content: @currencyAfter;
                    display: inline;
                  }
                }

                // Description //
                &:nth-child(2) {}

                // Options //
                &:nth-child(n + 3) {
                  font-style: italic;
                  font-size: .8em;
                  line-height: 1.5;
                }
              }
            }
          }
        }
      }
    }
  }

  // Editor Styles //
  &.sqs-editing {
    .sqs-block-content,
    .sqs-html-content {
      > ol {
        -webkit-padding-start: 0;
        padding-inline-start: 0;

        > li {
          &:not(:last-child) {
            margin-bottom: 34px;
          }

          p {
            font-weight: bold;

            &:before {
              display: none;
              margin: 0;
            }
          }

          > ol {
            list-style: none;
            padding: 0;
            margin: 0;

            > li {
              margin-bottom: 0;

              p {
                font-weight: normal;

                &:before {
                  display: inline;
                  font-size: 12px;
                  font-weight: bold;
                  letter-spacing: .1em;
                  line-height: 1;
                  opacity: .6;
                }
              }

              &:nth-child(1) {
                p:before {
                  content: 'PRICE: ';
                }
              }

              &:nth-child(2) {
                p:before {
                  content: 'DESCRIPTION: ';
                }
              }

              &:nth-child(n + 3) {
                p:before {
                  content: 'OPTION: ';
                }
              }
            }
          }
        }
      }
    }
  }
}

/*
  Developed by ANIagency LLC
  Free for personal and commercial projects, but can’t be sold.
  v1.03
*/

/* = = TEXT BLOCK MENU END = = */

Next, edit the page you’d like to add the menu to and insert a Text Block.

Inside the text block, create a Menu Item (e.g. Large Veggie Pizza), then click the numbered list icon to create a menu.

Press the return key followed by the tab key to start adding details (Price, Description, Options).

Enter the information, then press the return key again to reveal the next detail. Repeat this step for each detail.

Please note that each detail must contain at least one character in order for the next one to appear, otherwise a new Menu Item will be created. You may add an unlimited number of Menu Item options.

Finally, add a new Menu Item by pressing return x2, then repeat steps above.

When finished, hit save and refresh the page.

Customize

Currency Localization

Towards the top of the CSS, there are two variables titled @currencyBefore and @currencyAfter. Use these to change the currency symbol and position. Make sure to type your symbol between the quotation “ “marks. This only affects the Menu Item price field.

Alternate Menu Item Background

Towards the top of the CSS, use the @alternate-background_color and @alternate-background_opacity variables to adjust the alternate background.

Multi-line Descriptions

Press shift + return to create a line break within the description detail.

License

This plugin comes with an Unlimited Use License. View License Terms