isopods | [06] - navigation; clean & simple 2.0

A simple navigation layout that is modular and easy to customize. An attempt to improve upon my first HTML template from two years ago, back when I didn't understand padding and margins.

INSTRUCTIONS:

→ These three layouts are intended to be easily modifiable. The first layout demonstrates a simple vertical stack of links. The second layout has two "main" buttons that, when clicked, reveal more links--useful for multiple games. The third layout is a horizontal layout that uses flexbox, which makes it mobile-responsive.

→ All the elements can be rearranged, deleted, and modified as you see fit while still maintaining a sleek-looking layout. Examples can be found at the end of this post.

→ A long, vertical image works best for the stacked + condensed template, due to the way the element extends when the menus are opened.

→ The icon must be square and at least 200 x 200px.

→ Code to replace the standard buttons with dark, semi-transparent buttons has been provided in addition to the templates.

→ As usual, if you have any questions or troubleshooting issues, or if you just want to show off what you made, comment below!

Layout Examples (GIF)

STACKED:

<raw-code>

<div id="clean-and-simple-stacked"
style="background-image: url('BACKGROUND URL HERE');
background-size: cover;
background-position: center center;
background-color: black;
width: 350px;
padding: 15px;
margin: auto;
border-radius: 15px;
text-align: center;
font-family: 'MS Gothic'">

<div id="clean-and-simple-title"
style="font-size: 1.5em;
color: white;
text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
margin: 5px;
padding: 5px;">

NAVIGATION

</div>

<div style="min-height: 200px;">

<img src="IMAGE URL HERE"
style="width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 5px 5px rgba(0, 0, 0, 0.5);
margin: auto;">

</div>

<center>
<div style="margin: auto; padding: 10px;">

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

</div>
</center>

<div style="text-align: center; width: 100%; font-size: 9px; color: white;">
<a href="https://isopods.dreamwidth.org/4371.html" style="color: white; text-decoration: none; margin: 0px; padding: 0px;">< isopods ></a>
</div>

</div>

</raw-code>

STACKED + CONDENSED:

<raw-code>

<div id="clean-and-simple-stacked-condensed"
style="background-image: url('BACKGROUND URL HERE');
background-size: cover;
background-position: center center;
background-color: black;
width: 350px;
padding: 15px;
margin: auto;
border-radius: 15px;
text-align: center;
font-family: 'MS Gothic'">

<div id="clean-and-simple-title"
style="font-size: 1.5em;
color: white;
text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
margin: 5px;
padding: 5px;">

NAVIGATION

</div>

<div style="min-height: 200px;">

</div>

<center>
<div style="margin: auto; padding: 10px;">

<div style="width: 75%;
padding: 10px;
border-radius: 5px;
background: white;
color: black;
font-weight: 700;
margin: 10px;
box-shadow: 5px 5px rgba(0, 0, 0, 0.5);">
<details>
<summary>

GAME NAME

</summary>

<a href="URL HERE" style="text-decoration: none;">

LINK NAME

</div>
</a>

<a href="URL HERE" style="text-decoration: none;">

LINK NAME

</div>
</a>

<a href="URL HERE" style="text-decoration: none;">

LINK NAME

</div>
</a>

</div>
</details>

GAME NAME

</summary>

<a href="URL HERE" style="text-decoration: none;">

LINK NAME

</div>
</a>

<a href="URL HERE" style="text-decoration: none;">

LINK NAME

</div>
</a>

<a href="URL HERE" style="text-decoration: none;">

LINK NAME

</div>
</a>

</div>
</details>

</div>
</center>

</div>

</raw-code>

HORIZONTAL FLEXBOX:

<raw-code>
<div style="background-image: url('IMAGE URL HERE');
background-size: cover;
background-position: center center;
background-color: black;
width: 75%;
padding: 15px;
margin: auto;
border-radius: 15px;
text-align: center;
font-family: 'MS Gothic'">

<div id="clean-and-simple-title"
style="font-size: 1.5em;
color: white;
text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
margin: 5px;
padding: 5px;">

NAVIGATION

</div>

<div style="min-height: 200px;">

</div>

<center>
<div style="display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center;">

<div style="width: 200px;">

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

</div>

<div style="width: 200px;">

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

</div>

<div style="width: 200px;">

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

<a href="URL GOES HERE" style="text-decoration: none;">

LINK TITLE

</div>
</a>

</div>

</div>

</div>
</raw-code>

DARKER BUTTONS

Stacked:

Stacked + Condensed:

Horizontal Flexbox:

Flat | Top-Level Comments Only

Using stacked and condensed here! Beautiful code! :>

Awesome!!! Thank you so much for sharing!

omg i love this! using it here and will probably use it on a few of my other journals!

omg how cute!!! thanks for sharing, i love the gif for the icon!

oooh I love this a ton 👀 might redo one of my character journals to use that horizontal one

noice!! if you do so, lmk! i love seein' what people use my code for

Stacked & Condensed has been used with lots of love here! Thanks for another awesome code!

WOW that's awesome!! thank you so much for showing <3

I used Horizontal Flexbox for my boye here! Thank you for the code!

oh, awesome!!! thank you for sharing it looks slick

I've used horizontal flexbox here! Thank you so much for your work.

thanks for showing!!

I'm adoring this one but my image keeps getting bigger when I open the stacks. Did I mess something up?

That's a known bug/issue that I've been tryin' to squash since I made it. Oops! This happens because, as the box extends vertically, the image resizes to the new dimensions of the container it's in.

If you'd like to do a quick fix, you can make the entire container have a set height (like, height: 500px or something). Alternatively, you could play around with "background-size" and "background-position" to try and make it less funky. Hope it helps!