[06] - navigation; clean & simple 2.0

[loupnoir]

LAYOUT: STACKED

"SUNRISE, PARABELLUM."

APPLICATION

INBOX

PERMISSIONS/INFO

VISUALS

< isopods >

LAYOUT: STACKED + CONDENSED (w/o icon)

NAVIGATION

GENERAL RP

INBOX

IMPRESSIONS

VISUALS

GAME NAME

APPLICATION

INBOX

INFO / INVENTORY

PERMISSIONS

< isopods >

LAYOUT: HORIZONTAL FLEXBOX (w/ inverted button colors)

"SUNRISE, PARABELLUM."

APPLICATION

INBOX

PERMISSIONS/INFO

VISUALS

OTHER LINKS

SOME OTHER LINKS

< isopods >

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:

<!--BEGINNING OF TEMPLATE--> <raw-code> <!--MAIN CONTAINER--> <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'"> <!--OPTIONAL TITLE. DELETE THIS IF YOU DON'T WANT IT--> <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> <!--TITLE END--> <!--THIS OUTER DIV IS TO MAINTAIN SPACE IF THE ICON IS DELETED. IF YOU DON'T WANT TO HAVE THIS SPACE, DELETE IT.--> <div style="min-height: 200px;"> <!--CIRCULAR ICON START. DELETE THIS IF YOU DON'T WANT IT.--> <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;"> <!--CIRCULAR ICON END--> </div> <!--OUTER ICON DIV END--> <!--NAV START--> <center> <div style="margin: auto; padding: 10px;"> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <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);"> LINK TITLE </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <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);"> LINK TITLE </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <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);"> LINK TITLE </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <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);"> LINK TITLE </div> </a> <!--LINK END--> </div> </center> <!--NAV END--> <!--CREDIT, DO NOT DELETE--> <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> <!--CREDIT, DO NOT DELETE--> </div> <!--END OF TEMPLATE--> </raw-code>

STACKED + CONDENSED:

<!--BEGINNING OF TEMPLATE--> <raw-code> <!--MAIN CONTAINER--> <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'"> <!--OPTIONAL TITLE. DELETE THIS IF YOU DON'T WANT IT--> <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> <!--TITLE END--> <!--THIS OUTER DIV IS TO MAINTAIN SPACE IF THE ICON IS DELETED. IF YOU DON'T WANT TO HAVE THIS SPACE, DELETE IT.--> <div style="min-height: 200px;"> <!--CIRCULAR ICON START. DELETE THIS IF YOU DON'T WANT IT.--> <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;"> <!--CIRCULAR ICON END--> </div> <!--OUTER ICON DIV END--> <!--NAV START--> <center> <div style="margin: auto; padding: 10px;"> <!--GAME START--> <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> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> </div> </details> <!--GAME END--> <!--GAME START--> <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> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> </div> </details> <!--GAME END--> </div> </center> <!--NAV END--> <!--CREDIT, DO NOT DELETE--> <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> <!--CREDIT, DO NOT DELETE--> </div> <!--END OF TEMPLATE--> </raw-code>

HORIZONTAL FLEXBOX:

<!--BEGINNING OF TEMPLATE--> <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'"> <!--OPTIONAL TITLE. DELETE THIS IF YOU DON'T WANT IT--> <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> <!--TITLE END--> <!--THIS OUTER DIV IS TO MAINTAIN SPACE IF THE ICON IS DELETED. IF YOU DON'T WANT TO HAVE THIS SPACE, DELETE IT.--> <div style="min-height: 200px;"> <!--CIRCULAR ICON START. DELETE THIS IF YOU DON'T WANT IT.--> <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;"> <!--CIRCULAR ICON END--> </div> <!--OUTER ICON DIV END--> <!--NAV START--> <center> <div style="display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center;"> <!--COLUMN START--> <div style="width: 200px;"> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: white; color: black; font-weight: 700; margin: 10px; box-shadow: 5px 5px rgba(0, 0, 0, 0.5);"> LINK TITLE </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: white; color: black; font-weight: 700; margin: 10px; box-shadow: 5px 5px rgba(0, 0, 0, 0.5);"> LINK TITLE </div> </a> <!--LINK END--> </div> <!--COLUMN END--> <!--COLUMN START--> <div style="width: 200px;"> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: white; color: black; font-weight: 700; margin: 10px; box-shadow: 5px 5px rgba(0, 0, 0, 0.5);"> LINK TITLE </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: white; color: black; font-weight: 700; margin: 10px; box-shadow: 5px 5px rgba(0, 0, 0, 0.5);"> LINK TITLE </div> </a> <!--LINK END--> </div> <!--COLUMN END--> <!--COLUMN START--> <div style="width: 200px;"> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: white; color: black; font-weight: 700; margin: 10px; box-shadow: 5px 5px rgba(0, 0, 0, 0.5);"> LINK TITLE </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: white; color: black; font-weight: 700; margin: 10px; box-shadow: 5px 5px rgba(0, 0, 0, 0.5);"> LINK TITLE </div> </a> <!--LINK END--> </div> <!--COLUMN END--> </div> <!--NAV END--> <!--CREDIT, DO NOT DELETE--> <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> <!--CREDIT, DO NOT DELETE--> </div> </raw-code> <!--END OF TEMPLATE-->

---

DARKER BUTTONS

Stacked:

<!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="width: 75%; padding: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); color: white; font-weight: 700; margin: 10px;"> LINK TITLE </div> </a> <!--LINK END-->

Stacked + Condensed:

<!--GAME START--> <div style="width: 75%; padding: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); color: white; font-weight: 700; margin: 10px;"> <details> <summary> GAME NAME </summary> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> <!--LINK START--> <a href="URL HERE" style="text-decoration: none;"> <div style="width: 100%; background-color: rgba(86, 141, 144, 0.8); padding: 3px 0px; color: white; margin: 2px 0px;"> LINK NAME </div> </a> <!--LINK END--> </div> </details> <!--GAME END-->

Horizontal Flexbox:

<!--LINK START--> <a href="URL GOES HERE" style="text-decoration: none;"> <div style="padding: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); color: white; font-weight: 700; margin: 10px;"> LINK NAME </div> </a> <!--LINK END-->

Comments

[twomillionvolts]

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

[loupnoir]

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!

[twomillionvolts]

Thank you so much, I'll give that a try!