Barnes Bars & Restaurants, London SW13
Explore Barnes, London SW13
Design Notes
The menu structure is composed on two levels, both
of which use a standard Xara NavBar build using a
custom button with a MouseOff and MouseOver
layer. Each submenu (itself a standard NavBar) is
given a class name of CATn where “n” is a numeric
value of choice. In this example, each category menu
is placed on its own layer and given a matching
MouseOver layer.
Each location on the Map is given its own class name
of LOCm where “m” is again a numeric value of
choice. The resulting layer structure looks like this
for two categories and 10 locations, locations 1 to 8
are associated with category 1, and locations 9 and
10 are associated with category 2.
The principle is one of hiding the class when they are
not required and showing them when they are.
javascript code for the various calls can be viewed in
a browser by hovering over a link and noting the
code displayed in the bottom left o the browser
window.
HTMLClass=”places”
HTMLClass=”CAT1”
HTMLClass=”CAT2”
<script>
javascript: $('.places').hide();
</script>
<script>
function hidePins(speed) {
$('[class*="LOC"]').hide(speed);
}
function hideCats(speed) {
$('[class*="CAT"]').hide(speed);
}
function showPin(ref) {
$('.' + ref).toggle('slow');void $('.places').hide();
}
function showCat(n) {
$('.' +n).toggle('slow');
}
hidePins();
hideCats();
</script>
The javascript opposite is placed in the HTML (body) of the page. Anything that is to appear for
each location - that is its PIN on the map and the detail of the venue being described is placed
on the LOCref layer. There are then two functions, one to hide the pin and details, the other to
show it.
The Bulls Head, Barnes
020 8876 5241
The Sun Inn, Barnes
020 8876 5256
Ye White Hart, Barnes
020 8876 5177
The Red Lion, Barnes
0208 748 2984
The Stag’s Head, Barnes
020 8876 9685
The Bridge, Barnes
0208 563 9811
Rick Stein, Barnes
020 8878 9462
Coach & Horses, Barnes
020 8876 2695
Barnes Bridge Station
Barnes Station
