I know that the spacemenu has been a very usefull Matrix built drop-down menu. However, the menu is far from being compliant with W3C and XHTML standards.
I have spent some time browsing around and found the spacemenu menu as a good base. From there on I have applied simple MySource tags in order for it to work with Matrix properly.
Have a play around with it and please let me know if you have any problems or have any updates to improve the menu.
Code to place in <head>:
#menu ul {width: 30px;}
#menu ul li {float: left; width: 100%;}
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 1.0em;
}
#menu ul {width: 30px;}
#menu ul li a {height: 1%;
position: static;
display:block;
}
#menu a, #menu h2 {
font: 1.0em arial, helvetica, sans-serif;
}
</style>
<![endif]--></pre><br />
The csshover.htc can be downloaded from the spacemenu website by looking at the source code
Code to place in <body>:
Hope this is of use to someone out there that needs an accessible menu system for their website B)
Cheers,
Karl Fredrik Sjursen
Senior systems developer
Intendance Ltd
www.intendance.com
I'm still creating the site on a test environment, so it's not public yet. When it's published I'll post it here for people to take a look. B)
I have made some improvements on the IE fix part of the code. Still working on that, when I'm done I'll post it here.
By the way, I'm still learning about MySource Matrix, so I'd like to know if is there any way to have pages on a site that are now shown on this menu? For example, let's say that I have a "Privacy Statement" page, but I don't want it to appear on the menu (I only want people to access it through links on the text of other pages ). Any idea about how can I do that?
I’m still creating the site on a test environment, so it’s not public yet. When it’s published I’ll post it here for people to take a look. B)
I have made some improvements on the IE fix part of the code. Still working on that, when I’m done I’ll post it here.
By the way, I’m still learning about MySource Matrix, so I’d like to know if is there any way to have pages on a site that are now shown on this menu? For example, let’s say that I have a “Privacy Statement” page, but I don’t want it to appear on the menu (I only want people to access it through links on the text of other pages ). Any idea about how can I do that?
What you can do is just to change the link type to ‘type 2’ linking for the pages you don’w want listed within the menu structure. If you need assistance doing so let me know but should be fairly straight forward.The you can just link it from wherever you’d like using ./?a=
[quote]What you can do is just to change the link type to ‘type 2’ linking for the pages you don’w want listed within the menu structure. If you need assistance doing so let me know but should be fairly straight forward.The you can just link it from wherever you’d like using ./?a=
[right][post=“13025”]<{POST_SNAPBACK}>[/post][/right][/quote]
Correct. Though, you shouldn’t use ./?a= style links in the Design parsefile, as Matrix is not able to convert those to proper URLs at runtime. Rather use a hard-coded url (/privacy) or a constant button design area instead. This way, you can reuse the same privacy and copyright notices across lots of sites, each getting their own design and URL.
I've left the CSS and JS inline so its easy jsut to copy and paste into a new design and apply to a site that has a few top level pages and then upto 4 levels below it.
dropdown menus
body {
font: 78%/1.5 verdana, arial, helvetica, serif;
background: white;
text-align: left;
padding: 0;
margin: 2em;
}
#nav, #nav ul {
float: left;
width: 36em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #eda;
border-width: 1px 0;
margin: 0 0 1em 0;
}
#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(mysource_files/rightarrow2.gif) center right no-repeat;
}
#nav li {
float: left;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul, #nav li ul ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #eda;
}
#content {
clear: left;
}
#content a {
color: #7C6240;
}
#content a:hover {
text-decoration: none;
}
[quote]anyone care to give it a shot on IE7?
[right][post=“14034”]<{POST_SNAPBACK}>[/post][/right][/quote]
Just copied the code over to a new design and added an associated image for the ‘rightarrow.gif’ and the functionality seems to be the same in IE7 as Firefox. Also tested on Opera 9 and everything seems A-OK there as well.
[quote]Just copied the code over to a new design and added an associated image for the ‘rightarrow.gif’ and the functionality seems to be the same in IE7 as Firefox. Also tested on Opera 9 and everything seems A-OK there as well.
[right][post=“14036”]<{POST_SNAPBACK}>[/post][/right][/quote]
but it only goes to two levels eg. 
as its not available outside our firewall
