Menus, part 1


Maybe I’m weird, but I don’t like having a lot of bookmarks in my internet browser, and I especially dislike having to click through a bunch of pages to reach websites that I visit all the time (as much as 3-4 times a day). I like having pages grouped logically, and with simple navigation. For me, this means VBScript, batchfiles and (most recently) javascript.

A long time ago, I hand-coded a set of HTML files that I placed on my PC for my most common tasks. For simplicity’s sake I just named them c1.html through c8.html. I made the main menu, c.html, the root screen, and set that as my home page in Firefox. This means, every time I start Firefox in the morning, c.html opens automatically. To keep things readable, I use tables, with each link in one cell. Within the menuing system, the root links open the next file within the same window. The code looks like this:

<html>
<head>
<title>3 Steps Over The Edge –Back Door</title>
<meta content=”text/html; charset=unicode” http-equiv=”Content-Type” />
</head>
<body bgcolor=”#00ffff”>
<div align=”center”>
<center>
<table border=”6″ cellspacing=”3″ cellpadding=”3″ width=”600″>
<tbody>
<tr align=”center”>
<td colspan=”3″><h3>Root Menu</h3>                                     </td>
</tr>
<tr>
<td width=”350″><a href=”c1.html”>Links 1</a>                             </td>
<td colspan=”2″><a href=”c3.html”>Links 2</a>                              </td>
</tr>
<tr>
<td width=”350″><a href=”c4.html”>Links 3</a>                        </td>
<td colspan=”2″><a href=”c8.html”>Links 4</a>                            </td>
</tr>
<tr>
<td colspan=”3″>     </td>
</tr>
<tr>
<td width=”350″ ><a href=”c2.html”>Links 5</a>        </td>
<td width=”150″ ><a href=”http://yahoo.com”>Site 1</a> </td>
<td width=”150″ ><a href=”http://yahoo.com”>Site 2</a> </td>
</tr>
<tr>
<td width=”300″><a href=”http://otonanokagaku.net/”>Otona no Kagaku</a>       </td>
<td colspan=”2″> </td>
</tr>
<tr>
<td colspan=”3″>  </td>
</tr>
</tbody>
</table>
</center>
</div>
<p></p>
<form method=”get” action=”http://search.yahoo.com/bin/search”&gt;
<p>
<input size=”30″ name=”p” /> <input value=”English Yahoo!” type=”submit” /> </p>
</form>
<form method=”get” name=”sf1″ action=”http://search.yahoo.co.jp/search”&gt;
<p>
<input size=”30″ name=”p” /> <input value=”Japanese Yahoo!” type=”submit” /> </p>
</form>
</body>
</html>

I also like having direct search forms for yahoo.com and yahoo.jp. Unfortunately, the yahoo.jp form strips out kanji, so that’s not particularly useful. I’ll probably remove the direct search forms at some point soon.

The menu screens are pretty boring, and I could change them up to use graphics, but for my purposes this has been adequate, and it’s easy for me to maintain. I do recognize that this HTML doesn’t follow all of the more modern syntax rules, such as having the slash after the “br” tag, using “b” instead of “strong”, and not using a .css file, but these pages are for my personal use. I don’t care if the syntax is textbook or not.

At least, the above had been true until a couple weeks ago. I finally decided that I wanted to make the menuing system more visually interesting. The approach I settled on is to change the text links to image-based buttons, for something that’s closer in appearance to Microsoft’s Window’s image icons, combined with sub-folders.

(To be cont.)

Advertisements
Next Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: