Jeg er kommet frem til en løsning, som er næsten 100% som jeg gerne vil have den. Der skal lige justeres lidt mere ift. font size og margin/padding, men koden er denne:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/ (...)<html xmlns="
http://www.w3.org/ (...) xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menutest</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
background: #FFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu ul {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 12em;
}
#menu li {
display: block;
font: 100% "Lucida Sans Unicode", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 10px;
padding: 0;
}
#menu ul li ul{
width: 8em;
}
#menu li ul li {
width:8em;
margin: 6px;
padding:0;
}
#menu li a, #menu li ul li a {
background: #333;
border-bottom: 1px solid #393939;
color: #ccc;
margin: 2px;
padding: 8px;
text-decoration: none;
}
#menu li ul li a {
display: inline;
margin: 2px;
padding:2px;
}
#menu a:hover {
background: #2580a2 url(files/hover.gif) left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
</style>
<script type="text/javascript" >
//<![CDATA[
var min=8;
var max=22;
function increaseFontSize() {
for(var i=0; i<arguments.length; i++) {
var p = document.getElementById(arguments[i]);
if(p.style.fontSize) {
var s = parseInt(p.style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p.style.fontSize = s+"px"
}
}
function decreaseFontSize() {
for(var i=0; i<arguments.length; i++) {
var p = document.getElementById(arguments[i]);
if(p.style.fontSize) {
var s = parseInt(p.style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p.style.fontSize = s+"px"
}
}
//]]>
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a> </li>
<li>
<ul><li><a href="java script:increaseFontSize('text');">A<sup>+</sup></a>
<a href="java script:decreaseFontSize('text');">a<sup>-</sup></a>
</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both"></div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vestibulum, urna id laoreet iaculis, quam diam pretium nulla, id porta enim tortor sit amet nisi. Donec ligula erat, dapibus in, luctus quis, pulvinar nec, nunc. Nunc volutpat augue vitae nibh. Morbi scelerisque metus faucibus magna malesuada molestie. Vestibulum porta iaculis ante. Vestibulum sodales varius est. Proin ultrices. Etiam euismod augue eget pede. Vestibulum nunc. Fusce nulla risus, tincidunt quis, dictum at, laoreet et, nibh. Vestibulum hendrerit fringilla felis. Proin ullamcorper nibh vitae ante.</p>
<p>In hac habitasse platea dictumst. Suspendisse nisi mi, dictum sed, cursus ut, faucibus vitae, mauris. Maecenas at est. Sed interdum tincidunt arcu. Curabitur dolor pede, malesuada id, interdum eu, sollicitudin a, odio. Vestibulum id nisi. Maecenas dapibus blandit sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent eu neque. Cras ac sem. Mauris ultrices felis eget nisi. Etiam massa. In vel eros in ligula lacinia consectetuer.</p>
<p>Donec sed risus. Etiam tincidunt dolor vel elit. Nulla feugiat risus. Cras nibh ligula, cursus ornare, rutrum vitae, tincidunt a, nisl. Nulla vitae dolor. Fusce pretium tortor id dui. Duis consectetuer sem at lectus. Integer nibh. Nulla gravida, augue id accumsan bibendum, neque turpis lobortis tortor, ac dictum urna eros id magna. Sed et nisi quis nulla ultrices congue. Sed placerat. Integer gravida pretium massa. Donec consectetuer viverra sapien. Sed lorem felis, blandit ut, eleifend a, blandit in, sapien.</p>
</div>
</body>
</html>
