LinkList Stack

Create a row of numbered buttons, each a link to a numbered page such as index.php?page=1,2,3,… or index1.html, index2.html, etc.
Overview
Cat Stack icon
Create a clean dynamic row of styled buttons, automatically linking to a numbered set of pages you have created. Or you may link to a single php page that accepts a parameter in the URL such as page.php?number=1,2,3. Use this to access photo or product pages, etc. Lots of options for arranging the buttons, styling them, etc. Use the PostSwitch Stack to control displayed content!

How does it work?
Buttons and links are generated with PHP code and one is selected based on the current page parameter or url.
  • Cat Stack screen shot
  • Cat Stack screen shot
Customize
Cat Stack parameters
The LinkList Stack has loads of options for arranging and sizing buttons and selecting colors, etc: buttons can be arranged horizontally or vertically; justified to the left or right or centered; sized and spaced at will. An entire section is devoted to how buttons are numbered (or lettered!) and how link URLs are generated for each button.

Parameters

 
Button countThe number of buttons (and links) that will be generated.
NumberingChoose the sequence of numbering for the buttons. When using lettering, please use 26 or fewer buttons.
Link URL styleChoose the style of link url to generate for each button. Each link can reference a different page numbered from 1..N, or a common page that is passed an index argument in the url such as page=1..N (GET).
Base link URLThis is the URL of the base link from which all button links are created. Depending on the link style selected above, the resulting button links will be this link with a page variable appended, or the page number inserted into the link just before the extension. Other variables may be appended as a suffix using the option below.
Page variableThis is the name of the page variable used as a GET argument in the URL. You could use the PostSwitch stack in your page to select what to display for each page index value passed.
Other variablesThis suffix will be added to the end of each link, by following the page variable with ampersand.
Anchor nameEnter a unique name for an anchor to create inside this Stack and to jump to using #anchor at the end of each button URL. This is useful for ensuring this Stack scrolls into view when the page is loaded from a button click. This is optional and may be left blank if anchors are not needed.
Default to first pageCheck this to indicate that the base page does not need to be named index1 or be passed page=1 etc. to be selected by default. So when all else fails the first button will be highlighted/selected. Otherwise when this is not checked, the default behaviour is that the first button is only shown in the selected state when the url or page index matches, so the Stack will usually start out with nothing selected, all buttons in the same unselected state.
Hide button textCheck this to hide the text on each button. This may be useful when button images are used or when you simply do not want the text visible.
SpacingSpacing between link boxes in px.
Padding t/bInternal padding from link numbers to surrounding border on the top/bottom.
Fixed width, not paddingCheck this to set the link button width in px instead of variable based on content.
Padding l/rInternal padding from link numbers to surrounding border on the left/right.
Fixed widthFixed width in px of link buttons instead of using text with padding, resulting in buttons whose width changes with the font, the number of digits etc.
Vertical, not horizontalCheck this to create a vertical column of buttons instead of the default horizontal row.
AlignmentAlign buttons within their overall div.
Wrap buttonsIf buttons fill more than the available width, choose how to display them: wrap buttons onto new rows, or scroll horizontally all buttons in single row.
Row spacingExtra spacing between rows of buttons when Wrap buttons is set to Wrap, and also bottom margin to leave space for the scroll bar when Wrap buttons is set to Scroll. When direction is vertical this is additional spacing added vertically between buttons.
BackgroundBackground color of all links.
BG selectedBackground color of selected/current link.
BG hoverBackground color when hovering over link.
Enable gradientsCheck this to enable gradients on button faces. Buttons are flat when this is not checked. Note that background images disable gradients, so you may only use one or the other, not both.
Gradient styleChoose a button gradient style: this is a gradient style, white/black color, and intensity or opacity. Experiment with this and your Link Background colors to get the right effect. When button images are enabled this option has no effect.
Hover fadeChoose a hover effect: fade the button to the hover colors, or instantly change.
Hover glowWhen hovering over each button, surround with an outer blur effect using the shadow color. Drop shadow disables momentarily while hovering.
Image typeChoose a background image style or none for simple colored buttons. Image = drop in a custom image here and it will be applied as the background for all buttons; Bevel = select a transparent bevel to overlay on buttons, giving them a 3D appearance.
Background imageDrop an image (png works best) here and it will be applied as the background to all buttons.
Bevel shapeChoose the shape of the bevel overlay that best matches your button shape, taking border rounding into account. Choose the Rectangular shape for most buttons with little or no border rounding; choose the Rounded shape when your border rounding is significant; choose the Circular shape when your button is perfectly circular (rounding is half of width and height).
Bevel edgesChoose the edge bevel effect. Soft is a rounded bevel while sharp is a linear flat bevel.
Bevel sizeChoose the depth of the bevel. Smaller numbers are less visible while larger numbers give a deeper 3D feel.
Bevel angleChoose the angle from where the lighting originates, casting a shadow on the opposite side. Angles are measured in degrees counter-clockwise (0 is on the right), so 45 is upper right, 135 is upper left, and so on.
BordersCheck this to enable borders on links. Borders are always present even when this is disabled, in order to allow for the zero padding case, and selection and hover effects, but the border color is set to match the background color. To completely remove borders set the Border width option below to zero as well.
Borders selectedCheck this to enable borders on the selected/current link.
Borders hoverCheck this to enable borders when hovering over links.
Border widthBorder width added around all links, even when borders are disabled.
Border roundingBorder radius in pixels.
Border colorBorder color of all links.
Border selectedBorder color of selected/current link.
Border hoverBorder color when hovering over link.
Font sizeSet the font size of the link text in pixels.
FontChoose a font for the link button text, or choose Other and specify your own font below.
Other fontSelect another font to use for the body text.
BoldCheck this to select a bold font.
ItalicCheck this to select an italic font.
ColorText color.
Color selectedText color for selected/current link.
Color hoverText color when hovering on link.
Enable shadowsCheck this to enable shadow controls. Note that table padding is increased automatically so that shadows are not clipped.
Shadow colorColor of drop shadow and hover glow if enabled. Fade this color to dim the shadow instead of using blur below.
Shadow sizeSize of shadow in pixels beyond the default cell size. 0 is default size, resulting in shadows the same size as the table or cell.
Shadow blurSize of shadow blur in pixels. 0 is sharp and not blurred.
Shadow l/r offsetShadow horizontal offset in pixels.
Shadow t/b offsetShadow vertical offset in pixels.
Examples
Check out examples of LinkList
Example 1: a basic list of buttons linking back to this very page with page=1,2,3,… parameters in the URL. Useful for maintaining one page with selectable content on it. The PostSwitch Stack can help with that!
Example 2: a list of buttons that scroll horizontally (but you can also set this to responsively wrap, creating a nice grid effect!) Note that the first two examples use different parameters in the URL, and they can be configured to “know” about each other: try selecting different numbers for this example and the one above …
Example 3: a list of buttons linking to other pages such as indexA.html, indexB.html, indexC.html. You can specify these as a complete URL or a relative path - either will work …
Example 4: buttons can have a custom background image, or choose from a variety of bevels …
How To
To setup LinkList on a single page to control content - Click to view more …
The best way to use LinkList is on a single page that accepts parameters in the URL like this: .../index.php?photo=2 or index.php?page=1 etc. This section will describe how to do that step by step …

1) You will have a single page that contains everything:
a LinkList Stack of buttons
some way of decoding the parameter that is used in the URL (more to come on that below)
all the content you want to show for each button

2) Create this page and go to the Page Inspector (i)
make sure the file name ends with ".php"
let's refer to this page from now on as index.php, although you can name it anything

3) On this page add the LinkList Stack and look at the options for it ...
choose the Button count (the different content you want to show for each button)
set Link URL style to index.php?page=1 (this means this page is re-used when you click each button - no additional pages needed)
the Base link URL is just the address of this page, you can use index.php (but you could also say http://www.something.com/abc/index.php)
choose a Page variable - let's use "product" here, so the buttons will call this page with index.php?product=1 or 2, etc.
other options are for styling and you can experiment with those

4) Now that we have buttons, we want to handle the button clicks that call this same page

Two ways:
a) The hard way: write your own PHP code surrounding some Stacks ...

First add an HTML Stack and enter the PHP code below (note the "1" is the value)
<?php
$var = $_GET['product'];
if ($var == "1") {
?>

Then, add your Stacks next below this HTML Stack, such as a picture and some text.

Finally, below those add another HTML Stack and close the PHP conditional above:
<?php
}
?>

b) The easy way: use my PostSwitch Stack (a separate purchase)
Just add the PostSwitch Stack,
Enable GET (to look for a parameter in the URL)
Set the Argument name to match the one from LinkList, “product” in this example
Choose a value of product to look for, starting with 1 (your first product and first LinkList number)
Then drop in the Stacks you want to show, like images or text.

5) Repeat step 4 by adding code or PostSwitch Stacks to handle each value of the page variable “product” 1, 2, 3, ...

I don't want to require any hidden purchases, so option 4a should work. Also, the LinkList Stack can be used in a second way: you can have separate pages like index1.html, index2.html, index3.html where each of these has your product information photo and text, and no PHP is required. You can really choose any of these methods, but I prefer using the PostSwitch Stack myself - much nicer looking and easier to maintain.

LinkList Features

  • Responsive
  • PHP required
  • Sparkle updates

Purchase LinkList

  • $5 USD via PayPal
  • Immediate download *