www.wimb.net - Jump Box
Jump box
After I made the navigation, I found something missing. Special for the Delphi and the Motion Control sections I was unable to put the whole name of the page on a menu button and for the Motion Control section it was not possible to place all the links to the pages in the navigation.
After some surfing on the web I saw a jump box on a site, a selectbox with a "Go" button. This was what I'm looking for. Now when you are at the bottom of the page, another page can be selected, without going up to the main menu.
I started to look with Google for something simple, but I could not find one. They were all very complicated and with a lot of Javascript and they were only talking for which browsers it was, but not about validating as XHTML.
On a good day I came on this site. How it looks can been seen at the right.
This one is really simple: no complicated Javascript, only a single "onclick" event is used. The HTML code for it is below.
<form>
<select name="menu">
<option value="value 1 ">link 1 </option>
<option value="value 2 ">link 2 </option>
<option value="value 3 ">link 3 </option>
<option value="value 4 ">link 4 </option>
</select>
<input type="button"
onClick="location=this.form.menu.options
[this.form.menu.selectedIndex].value;" value="GO">
</form>
My Jump box
Then it was adapted for use on this site: XHTML 1.1 valid and my own code was placed inside.
The insertion of the items is done with PHP. The data comes from an .MNU file, which one is used also for the menu on the left. Instead of using the menu text, it uses the description that is also used in the title attribute for the menu.
<form id='quicksel' action="action">
<p><select id='selectpage'>
<!-- dummy link to bottom section -->
<option value="#bodem" selected="selected">- Select another page - </option>
<?php
// ------- the include section for a special bottom item -------
$menutype = 'select'; // set for 'menu' or 'select'
// load automatical good item
if (file_exists('include/menu'.$secstr.'1.mnu'))
{
include('include/menu'.$secstr.'1.mnu');
}
?>
</select>
<input class="gobutton" type="button"
onclick="location=this.form.selectsite.options
[this.form.selectsite.selectedIndex].value;"value="go" />
</p>
</form>
Example of a MNU File
Below you can see the content of an .MNU file. The same links can be found in the menu on the top left of this page and in the jump box at the bottom. This jump box is made with the code above.
<?php
echo (menuitem(7,0,'About this Site' ,'Site Info'));
echo (menuitem(7,1,'Demo menu' ,'CSS Demo menu'));
echo (menuitem(7,2,'Page Layout 1' ,'Page layout 1'));
echo (menuitem(7,3,'Page Layout 2' ,'Page layout 2'));
echo (menuitem(7,4,'Page Layout 3' ,'Page layout 3'));
echo (menuitem(7,5,'Spare (CSS)' ,'to be made...'));
echo (menuitem(7,6,'Jump box' ,'My Jump box'));
?>
Updated 2007 Oct. 09