Fast menu uden rammer

Sat på siden 22-11-2003

Et af argumenterne for at bruge rammer er, at så kan man have en fast menu foroven eller i venstre side, uanset hvor på siden gæsten befinder sig.

Det kan du også med stylesheets. Hermed slipper du for rammer, der både er tunge at arbejde med og irriterende for gæsten.

Se et eksempel her: http://www.tips-og-tricks.com/eksempler/fix.html eller overalt på http://www.tips-og-tricks.com

Først skal vi lave stylesheetet til den faste menu. Det kan fx gøres sådan her:

.menu{
position: fixed;
top: 15px;
}

Position fixed sørger for, at menuen bliver på plads, uanset hvor langt nede på siden, vi er i gang med at læse.
Top fortæller bare, hvor højt oppe menuen skal starte. Prøv dig frem med et passende tal, men husk, at der må ikke være mellemrum mellem tallet og "px".

Selve menupunkterne skal også defineres i stylesheetet, og de kan fx se sådan ud:

a.menupunkt{
display: block;
background-color: Fuchsia;
width: 150px;
color: Black;
text-decoration: none;
text-align: left;
text-indent: 10px;
display: block;
width: 130px;
margin-top: 3px;
}

a'et i starten betyder, at menupunktet skal bruges som et link. Derfor skal der også laves menupunkter i hvert fald til "hover", og evt. også til "visited" og "activ".

Jeg har valgt at lave et menupunkt med en fast længde, som bliver vist som en blok. Text-decoration none betyder, at linket ikke bliver understreget.

For at selve teksten på hjemmesiden ikke skal vises oven i menuen, skal der laves en style til det også. Det kan se således ud:

.main {
position: absolute;
left: 170px;
top: 10px;
margin-left: 10px;
margin-right: 20px;
width: 500px;
text-align: left;
height: 100%;
}

Den starter 20 px efter, at menuen slutter (menu width: 150px - main left: 170 px).

Sæt disse styles samt styles for hover, activ m.m. ind i et stylesheet, som du gemmer fx under navnet fix.css. Du kan se min version af dette på http://www.tips-og-tricks.com/eksempler/fix.css

I html-dokumentet kan vi nu lave menuen:

I <head> skal der linkes til stylesheetet:

Derudover har du det sædvanlige i <head>, og din <body> kan fx starte således:

Vi laver ligesom en ramme omkring de syv menupunkter ved at starte med <div class="menu"> og slutte af med </div>, når menuen er færdig.

Inde i menuen har vi faktisk blot nogle links, hvor der er tilføjet class="menupunkt" inde i hvert link.

Bagefter kommer selve teksten. Den skal vi have lagt ind i området main ved hjælp af en <div>:

<div class="main">
<h1>Overskrift</h1>
<p>Her kommer resten af teksten</p>

Vi slutter hovedområdet af med </div> og de sædvanlige </body></html>

Upload filerne, og check menuen i din yndlingsbrowser. Virker det ikke? Så er det fordi din yndlingsbrowser ikke lever op til standard. Disse stylesheets er godkendte af W3C og burde dermed kunne ses af alle browsere.

Hvis det ikke virkede i din browser, så prøv at se siden med Mozilla, Opera eller Netscape. Også Linux-browserne følger standarden.

Nu vil du måske nok indvende, at det ikke nytter noget, at det er en smart funktion, når den ikke virker i den browser, der bruges af over 90 % af surferne, og det er selvfølgelig rigtigt. Det er ærgerligt, at Microsoft Internet Explorer ikke kan det, den skal, for nu er vi nødt til at arbejde ekstra for at tvinge den til det.

Først skal du - lige før <div class="main"> lave et ekstra <div> kun til MSIE. Kald det fx <div class="mainIE">. Husk, at der så skal sluttes af med endnu et </div> lige inden </body>.

I <head> - fx lige inden </head> skal du indsætte et stylesheet, der kun læses af MSIE. Det kan se således ud:

<!--[if IE]>
<style type="text/css" media="screen">
html
{
overflow: hidden;
}

body
{
height: 100%;
overflow-y: hidden;
margin: 0;
padding: 0;
}

div.mainIE{
overflow: auto;
position: absolute;
left: 0px;
top: 0px;
margin-left: 0px;
margin-right: 20px;
width: 100%;
text-align: left;
height: 100%;

}
div.menu{
position: absolute;
top: 15px;
</style>
<![endif]-->

Du kan se hele den samlede kode ved at vælge Vis -> Kilde i din browser på siden http://www.tips-og-tricks.com/eksempler/fix.html

Tips&Tricks

Site-navigation[Spring over]

Tips & Tricks

Fast menu uden rammer