Nav component idea

[amity]

Noticed there was no nav formatting. I envisioned a pretty straightforward one, that looks a lot like the current radio button functionality, with the same font and having the arrow selector appear on mouse-over; maybe with a light grey background.

Potentially, we could also make available an option for an "active" formatting, where the arrow would rest on the page the user is currently on. (They would assign the "active" class to the nav link they're currently on in their own code.)

Thoughts?

ーーーー 今、＜nav＞のスタイルがないので、「作ろうか」と思っています。心象は、現在の＜input　”type＝radio”＞に似てる。「:hover」すると、あの矢印が現れます。 もしかして、「選ばれている（”active”）リンクの左にも矢印が現れる」オプションもあればいいと思っていました。 どう思いますか？私、自分でできるんですが、作る前に聞いた方がいいですね。

[amity]

For reference, here's the current radio button. Kinda like this. (The arrow blinks, but it wouldn't necessarily have to.)

[trezy]

I wonder if a vertical navigation component might be more relevant? NES game menus were almost always laid out vertically.

I'd also love to see a horizontal nav in NES.css, but I'd rather see a new paradigm created for it. This, of course, is a personal opinion, so @soph-iest, feel free to go to town on whatever design you prefer. 😉

[amity]

You're totally right about the verticality! Think it should be pretty easy to set it up both ways, but I'll try to prioritize vertical. Gonna be pretty busy the next few days, but I'll try to have something by early next week!

[trezy]

Woot! Thanks so much, @soph-iest, I'm excited to see what you come up with! 🎆

[amity]

Sorry for the delay on this -- been a busy week at work with the holidays and all. Will try to get back on this once I have time. :)

[Grovkillen]

Isn't it simple as this:

.is-start-menu {
  display: block;
  transform: translateX(-25px);
}
.is-left {
  text-align: left;
}

The "is-left" is used if the start menu should be left aligned or center (depending on the overall container settings). ´transform´ is used because the arrows would otherwise be part of the centering... .not good looking.

I use these custom locations and the "is-center-center" makes the start menu locate to screen center:

.is-center-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.is-lower-right {
  position: absolute;
  bottom: calc(2 * var(--padding-of-screen, 10px));
  right: calc(2 * var(--padding-of-screen, 10px));
}
.is-lower-left {
  position: absolute;
  bottom: calc(2 * var(--padding-of-screen, 10px));
  left: calc(2 * var(--padding-of-screen, 10px));
}
.is-lower-center {
  position: absolute;
  bottom: calc(2 * var(--padding-of-screen, 10px));
  left: 50%;
  transform: translateX(-50%);
}
.is-upper-right {
  position: absolute;
  top: calc(2 * var(--padding-of-screen, 10px));
  right: calc(2 * var(--padding-of-screen, 10px));
}
.is-upper-left {
  position: absolute;
  top: calc(2 * var(--padding-of-screen, 10px));
  left: calc(2 * var(--padding-of-screen, 10px));
}
.is-upper-center {
  position: absolute;
  top: calc(2 * var(--padding-of-screen, 10px));
  left: 50%;
  transform: translateX(-50%);
}

As you can see I use CSS variables which will fallback to 10px if not defined. I really would like more frameworks adopted CSS variables.

[Grovkillen]