isopods | [01] - navigation; clean & simple (Reply)

▶ LT. KIM KITSURAGI

img src: [ ryleisdead ]
CLEAN & SIMPLE

A simple, easily customizable navigation layout.

INSTRUCTIONS:

→ Ideal background size is 500 x 300 px.

→ If your link text does not fit within the bounds of the rectangle, just adjust the width of the div the link is contained within.

→ To add a row of links, first subtract 40px from the margin-top of the first row. Paste the following code after "END OF BOTTOM ROW OF LINKS" in the original code.

<!--NEW ROW--!>
<div id="nav-link-box"
  style="display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 5px;">

<!--START OF LINKS--!>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">LINK</a>
</div>
</div>
<!--END OF ROW OF LINKS--!>

→ To make this layout have only one row of links, find the bottom row of links and delete the code as commented. Change the margin-top of the remaining row to 190px.

→ To delete the title banner, delete from "START OF TITLE" to "END OF TITLE" and add 50 px to the current margin-top.

→ If you have any questions or troubleshooting issues, please feel free to comment.

CODE:

<raw-code>
<center>
<div id="navigation-box"
  style = "width:500px;
  height:300px;
  background-image: url('IMAGE URL');
  background-position: center;
  background-color: white;
  background-size: auto;
  display: block;
  border-radius: 15px;
  border-width: 1px;
  border-color: white;
  border-style: dotted;">

<!--START OF TITLE--!>
<div id="nav-title-bar"
  style="width: 100%;
  height: 30px;
  background-color: rgba(0,0,0,0.5);
  display: inline-block;
  margin-top: 10px;
  padding-top: 10px;">
<span id="nav-title"
  style="font-family: 'MS Gothic';
  color: white;
  font-size: 16px;">
TITLE HERE
</span>
</div>
<!--END OF TITLE--!>

<!--START OF LINK BOXES--!>
<!--TOP ROW--!>
<div id="nav-link-box"
  style="display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 145px;"> <!--ADJUST THIS MARGIN TO REPOSITION THE LINKS VERTICALLY--!>
<!--START OF ROW OF LINKS--!>
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">LINK</div></a>

</div>
<!--END OF TOP ROW OF LINKS--!>

<!--BOTTOM ROW. DELETE FROM HERE TO END OF BOTTOM ROW IF YOU ONLY WANT ONE ROW--!>
<div id="nav-link-box"
  style="display: inline-block;
  width: 100%;
  height: 40px;
  margin-top: 5px;">

<!--START OF A ROW OF LINKS--!>
<a href="LINK HERE" style="font-family: 'MS Gothic'; color: white; font-size: 12px;">
<div id="nav-link"
  style="display: inline-block;
  background-color: rgba(0,0,0,0.5);
  width: 100px;
  height: 30px;
  border-radius: 5px;
  padding-top: 10px;">LINK</div></a>

</div>
<!--END OF BOTTOM ROW OF LINKS--!>
<!--CODE CREDIT, DO NOT DELETE--!>
<div id="credit"
  style="font-size: 10px; width: 475px; text-align: right; padding-right: 10px; padding-bottom: 10px;"><a href="https://isopods.dreamwidth.org/429.html" style="color: white; font-family: MS Gothic;"><i>credit</i></a></div>
</div>
<!--END OF NAV BOX--!>
</center>
</raw-code>

[01] - navigation; clean & simple

Post a comment in response: