Hello! This is a quick demo page for alap. Alap enables attaching menus to links. It is traditional to point at links, one at a time. I can say "Here is the Github Repo for Alap, and I wrote an article on dev.to: alap - Menus For Links"

With alap, I can say (click on the next link...) "Here is where to find out more".

We can say "here are some of my favorite YouTube creators"

Alap gives you a flexible, powerful way to attach menus to HTML anchors - and more, as I'll show you.

I like cars, beer, and cities. There is so much to say about any of those topics, but where to put all of the links for them? ...

Imagine I have a chunk of data (a JSON file that gets converted to a JavaScript object) about links. Each bit of it contains:

• a link id (the property name, how we refer to it)
• a label (what you see on the menu item)
• a url (where it should go)
• a list of tags (such as "nyc" or "bridge")

             
vwbug: {
  label: "VW Bug",
  url: "http://en.wikipedia.org/wiki/Volkswagen_Beetle",
  tags: ["vw", "car", "germany"]
},

sierranevada: {
  label: "Sierra Nevada",
  url: "http://www.sierranevada.com/",
  tags: ["beer", "ale"]
}
            
          

another example: here are some things you should check out in San Francisco

We can make menus that are images, as well

So far, so good. We can build up a list of links by using the ids of properties that are available in our JSON configuration object. I use a "data-alap-linkitems" attribute to store the references for what I want from the JSON data:

<a id="cars1" class="alap" data-alap-linkitems="bmwe36, vwbug">cars</a>

To be clear, one can think of the properties in the JSON object as IDs for each possible target.

Tags, and combining them

Referring to items is a good start. If you know about CSS, you are familiar with classes. Same idea here: let's talk about Tags.

Here is a basic tag: "NYC". It simply gathers all of the links that have a tag that matches "nyc". It looks like this:

<a id="nyctag1" class="alap" data-alap-linkitems=".nyc">nyc</a>

Ok, so we can refer to a few of them, and build up quite a list. Let's try Sydney, NYC, and London. (that element is "#nycsydlon")

What we know so far...

• properties in JSON are an id for defining an individual target, such as "acrecoffee"
• in our JSON object, each definition might have some tags, such as "cafe, coffee", in our data attribute, we use the '.' (think of CSS Classes) to refer to a class. If we say ".coffee", we pick up all of the entries that contain a tag of "coffee".
• these can be combined in a data attribute. "acrecoffee, .beer" would be valid. It all goes towards building up a list for a menu.

Expressions with Tags: And, OR, and Without

If we stopped with the combinations of using item ids and tags, that would be a lot of functionality. It gets better though, with simple expressions that let us do AND, OR, and WITHOUT operations.

As you can guess, building up groups of tags can yield some pretty large lists. We really want more control. Let's go for that!

• Here is "nyc"
• Here is "park"
• Here is "brooklyn"
• and ... "bridge"
• ... now it gets fun...
• "nyc AND bridge (+)"
• "nyc WITHOUT bridge (-)"
• "nyc OR bridge (|)"
• "nyc OR bridge, without London (| and -)"

Expression Recap

You can say:

• I want the list of what matches "this" tag AND "that" tag. (".nyc + .bridge")
• I want whatever matches "this" OR "that" (".nyc | .bridge")
• I want the list of "this", and get rid of the items that match "that" (".nyc - .bridge")

Photo Credits

Photo by Andreas Selter on Unsplash
Photo by Hannes Richter on Unsplash
Photo by Joshua Hoehne on Unsplash
Photo by Ross Joyner on Unsplash