Field Engine – Tutorial – Basic Vertical Menu with HTML

October 27, 2023 at 7:57 PM PST
This post has no media.
Profile picture
Franklin Powers

At times we need to display a vertical menu for users. This is very easy with Field Engine and can be done with a few simple steps.

We need to include the Field Engine files:

<link href="FieldEngine.css" rel="stylesheet" />
<link href="FieldEngine-Defaults.css" rel="stylesheet" />
<script src="fe-browser.js"></script>

Then we need to specify the CSS for the hex grid, we're going to make our borders black and our hexes white:

.field-hex .field_view_inner {
background-color: black;
}
.field-hex .field_location {
background-color: white;
color: black;
}

Then we specify the scrollable table with a ul tag and the class field-vertical-menu

<ul class="field-vertical-menu">
<li>Menu</li>
<li level="1" onclick="switchToTable">Table</li>
<li level="1" onclick="switchToHex">Hex</li>
</ul>


And we'll have a fully functional vertical menu.

Any thoughts on Franklin's post?

To comment or reply, you need an Ortingo account.

Sign in or sign up

Here's what Ortingoers think of Franklin's post.

There are no comments on this post.