Menu Example - Shopping at the edge

SlidingMenu example : Shopping at the edge

Menu Examples home

Freeware

Professional

Targeting private but professional persons or small companies, the cost is very low only $29. Buy Online

This license allow deployment on ONE website (like here on www.menulab.com).

Server

Distributable

100

150

200

250

300

350

400

450

500

550

600

650

700

750

800

850

900

950

1000

If you have been around this website you have probably noticed an EdgeMenu sliding along the left edge of most of the pages. Containing a SlidingMenu I think the EdgeMenu is an interesting construct, therefore I made this example so that you can copy the code and make it yourself.

Tip:
1) Click on the Purchase image to slide the EdgeMenu in and out from the Edge and 2) also slide the Scrollbar of this result area and see how the EdgeMenu is scrolling down the result area to maintain a constant position relatively to the top of the result area thereby trying always to be visible.

Here the SlidingMenu is contained within a table which again is contained within a div with the Id=wm_5_EM_0 (see line 0). It is this div that is moving in and out from the edge of the result area as well as up and down the result area trying to maintain constant visibility. The SlidingMenu within this div container is just following along.

The containing table (starting at line 1) has one row and two cells, the first cell holding the SlidingMenu and the second cell holding the blue purchase-handle image, I just use the table to layout these 2 parts.

As usual the SlidingMenu XML markup is very simple, here there is 4 Groups (the Freeware, Professional, Server and Distributable) each Group containing a some HTML markup to provide the content.

If you click on the Clipboard image, all the XML/HTML markup (including the containg div) will be copied to your clipboard, just paste it anywhere between the <FORM></FORM> tags in your .aspx-file.

SlidingMenu markup is blue, Comments are green.

0.	<DIV id=wm_5_ES_0 style="OVERFLOW-Y: hidden; OVERFLOW-X: hidden; WIDTH: 128px; POSITION: absolute; TOP: 180px; HEIGHT: 255px">
1.		<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
2.			<TR>
3.				<TD>
4.					<wm:SlidingMenu id=smPurchase runat="server">
5.						<SlidingMenuStyle Height="252" Width="114" BorderWidth="2" BorderColor="#5E7BB8" />
6.						<GroupHeaderStyle BackgroundColor="white" BorderColor="#5E7BB8" />
7.						<GroupCanvasStyle BackgroundColor="white" />
8.							<AddManualGroup>
9.								<GroupHeader>
10.									<span class="gc_purchase_header">Freeware</span></GroupHeader>
11.								<GroupCanvas>
12.									<table border="0" cellpadding="0" cellspacing="0" style="padding:2">
13.										<tr>
14.											<td>
15.												<span class="gc_purchase_canvas">Displaying a discreet reference to Menulab<!--
16.
17.												Discreetly advertising for menulab-->, the
18.													SlidingMenu exist as freeware, just <a href="/index.aspx?product=slidingmenu&topic=download">
19.														download</a> and play.
20.													<br>
21.													<br>
22.													(SlidingMenu execute the first month without displaying the Menulab reference). </span>
23.											</td>
24.										</tr>
25.									</table>
26.								</GroupCanvas>
27.							</AddManualGroup>
28.							<AddManualGroup>
29.								<GroupHeaderStyle OpenThisGroupAtStartup="true" />
30.								<GroupHeader>
31.									<span class="gc_purchase_header">Professional</span></GroupHeader>
32.								<GroupCanvas>
33.									<table border="0" cellpadding="0" cellspacing="0" style="padding:2">
34.										<tr>
35.											<td>
36.												<span class="gc_purchase_canvas">Targeting private but professional persons or
37.													small companies, the cost is very low only $29. <a href="http://www.regsoft.net/purchase.php3?productid=61195" target="_blank">
38.														Buy Online</a>
39.													<br>
40.													<br>
41.													This license allow deployment on ONE website (like here on www.menulab.com). </span>
42.											</td>
43.										</tr>
44.									</table>
45.								</GroupCanvas>
46.							</AddManualGroup>
47.							<AddManualGroup>
48.								<GroupHeader>
49.									<span class="gc_purchase_header">Server</span></GroupHeader>
50.								<GroupCanvas>
51.									<table width="100%" class="gc_purchase_canvas" border="0" cellpadding="0" cellspacing="0" style="padding:2">
52.										<tr>
53.											<td>Targeting companies with many websites.</td>
54.										</tr>
55.										<tr>
56.											<td><img src="/images/pixel_transparent.gif" width="1" height="3"></td>
57.										</tr>
58.										<tr class="gc_purchase_row_default">
59.											<td>5   websites</td>
60.										</tr>
61.										<tr class="gc_purchase_row_default">
62.											<td>$99   <a href="http://www.regsoft.net/purchase.php3?productid=61195&pc=72gV4" target="_blank">Buy Online</a></td>
63.										</tr>
64.										<tr class="gc_purchase_row_alternate">
65.											<td>10 websites</td>
66.										</tr>
67.										<tr class="gc_purchase_row_alternate">
68.											<td>$150 <a href="http://www.regsoft.net/purchase.php3?productid=61195&pc=7FG64" target="_blank">Buy Online</a></td>
69.										</tr>
70.										<tr class="gc_purchase_row_default">
71.											<td>20 websites</td>
72.										</tr>
73.										<tr class="gc_purchase_row_default">
74.											<td>$220 <a href="http://www.regsoft.net/purchase.php3?productid=61195&pc=553TN" target="_blank">Buy Online</a></td>
75.										</tr>
76.									</table>
77.								</GroupCanvas>
78.							</AddManualGroup>
79.							<AddManualGroup>
80.								<GroupHeader>
81.									<span class="gc_purchase_header">Distributable</span></GroupHeader>
82.								<GroupCanvas>
83.									<table border="0" cellpadding="0" cellspacing="0" style="padding:2">
84.										<tr>
85.											<td>
86.												<span class="gc_purchase_canvas">One license pr. software title as a desktop
87.													application. Must be bought separate from other licenses.
88.													<br>
89.													$199 <a href="http://www.regsoft.net/purchase.php3?productid=61195&pc=H3l24" target="_blank">
90.														Buy Online</a></span>
91.											</td>
92.										</tr>
93.									</table>
94.								</GroupCanvas>
95.							</AddManualGroup>
96.					</wm:SlidingMenu>
97.				</TD>
98.				<TD vAlign=top><IMG style="CURSOR: hand" onclick=wm_5_StartSlide(0) src="/images/EdgeMenu/handle_side2.jpg"></TD>
99.			</TR>
100.		</TABLE>
101.	</DIV>

There is no JavaScript necessary for the SlidingMenu contained within the EdgeMenu, but the EdgeMenu itself requires some JavaScript to work. Be aware that the EdgeMenu does not really have anything to do with the SlidingMenu and that you can find better code for the EdgeMenu functionality around the JavaScript download sites than mine code, however I am showing you my code here anyway.

This JavaScript can be put anywhere in your .aspx-file (remember to contain the JavaScript in script tags: <script type="text/javascript">here<script>). Use the Clipboard button to copy the JavaScript to your clipboard and paste it to your .aspx-file.

Comments are green.

0.	var wm_5_EMObject; //the EdgeMenu (which is a div object)
1.	var wm_5_direction = "out";
2.	var wm_5_lastScrollTop = 0; //will be set again at initializing
3.	var wm_5_leftBase; //= handleWidth - wm_5_EMObject.width (only the handle will show)
4.	var wm_5_leftMargin = 10; //space between container edge and wm_5_EMObject then wm_5_EMObject is out
5.	var wm_5_handleWidth = 14; //space for handle, but can show more of wm_5_EMObject than the handle, therefore the name may instead be someting like ShowWidthThenClosed
6.	var wm_5_topMargin = 50; //margin to the container top edge is hold constant whatever changes in document.body.scrollTop
7.	var wm_5_container; //the object the EdgeMenu scroll relatively to (typically the body, however in this example the Example Result area instead).
8.
9.	function wm_5_HeartBeat(){
10.		var diffY = wm_5_container.scrollTop - wm_5_lastScrollTop;
11.		if (diffY != 0){
12.			wm_5_EMObject.style.top = wm_5_EMObject.style.posTop + diffY;
13.			wm_5_lastScrollTop = wm_5_container.scrollTop;
14.		}
15.	}
16.
17.	function wm_5_Slide(){
18.		if (wm_5_direction == "out"){
19.			wm_5_EMObject.style.left = wm_5_EMObject.style.posLeft + 10;
20.			if (wm_5_EMObject.style.posLeft < wm_5_leftMargin){
21.				setTimeout("wm_5_Slide()", 5);
22.			}
23.			else{
24.				wm_5_EMObject.style.left = wm_5_leftMargin;
25.				wm_5_direction = "in";
26.			}
27.		}
28.		else{ //direction == in
29.			wm_5_EMObject.style.left = wm_5_EMObject.style.posLeft - 10;
30.			if (wm_5_EMObject.style.posLeft > wm_5_leftBase){
31.				setTimeout("wm_5_Slide()", 5);
32.			}
33.			else{
34.				wm_5_EMObject.style.left = wm_5_leftBase;
35.				wm_5_direction = "out";
36.			}
37.		}
38.	}
39.
40.	function wm_5_StartSlide(){
41.		wm_5_Slide();
42.	}
43.
44.	//the wm_initializeEdgeMenu function must be invoked somewhere (my website framework invoke the function automatically if the function exists, however you can invoke the function in your BODY onload event like: <BODY onload="wm_initializeEdgeMenu()" ... >)
45.	function wm_initializeEdgeMenu(){
46.		wm_5_container = document.getElementById("wm_tab_canvas_result");
47.		//wm_5_container = document.body; //normally you would probably like to slide on the edge of the body
48.
49.		wm_5_lastScrollTop = wm_5_container.scrollTop;
50.
51.		wm_5_EMObject = document.getElementById("wm_5_EM_0");
52.
53.		wm_5_leftBase = wm_5_handleWidth - wm_5_EMObject.offsetWidth;
54.		wm_5_EMObject.style.left = wm_5_leftBase;
55.		wm_5_EMObject.style.top = wm_5_lastScrollTop + wm_5_topMargin;
56.
57.		//If you want the EdgeMenu to initially slide in, then don't call wm_5_Slide() here
58.		wm_5_Slide(); //In this example I want the EdgeMenu to initially slide out
59.		window.setInterval("wm_5_HeartBeat()", 50);
60.	}