CSS-koden til menuen

Som altid, når vi diskuterer CSS-formaterede menuer, er det i stylesheet'et, tricksene gemmer sig.

Html-delen er forholdvis uinteressant, en uordnet liste med nogle indlejrede uordnede lister. Jeg viste html-koden på websiden om dette, HTML-koden til menuen

Ved hjælp af vort stylesehet skal vi nu løse flere opgaver. Jeg er godt klar over, at det ser lidt uoverkommeligt ud, men faktisk er det ret simpelt, især hvis vi tager de vigtigste ting først og trin for trin:

  1. Først og fremmest skal vi, for at få styr på menuen, konvertere listen til en vandret menu uden listepunkter. Der sker i formdeklarationen mrk. 3 på samme måde, som jeg forklarede i forbindelse med præsentationen af mit eksempel 10
  2. Dernæst skal vi sørge for at skjule alle undermenuerne – det er de indlejrede lister. Det sker i formdeklaration nr. 8, hvor display-egenskaben none påtrykkes alle de de elementer, der har en id="subnav[nr]".
  3. Så skal vi finde på en mekanisme, der sikrer at en :hover-tilstand på et hovedmenupunkt udløser visning af den tilhørende undermenu.
    Den er lidt tricky, så koncentrer dig nu: Vi giver alle websiderne et class name, der svarer til den sektion ud af de 6 mulige, websiden tilhører, f.eks.
    <body class="sektion2">
    for alle sider, der hører hjemme i sektion for de indre planeter.
  4. Nu kan vi selektere et vilkårligt element på netop en sådan webside ved hjælp af en kontekstuel selektor, som f.eks.
    ...
    body.sektion2 #menu li#nav2 a 
    ... {
    
      background : #fff;
      border-bottom : 1px solid #fff;
      color : #000; }
    
    Denne formdeklaration (plus de øvrige, der her er anført med prikker) sørger for, at et link i en li med en id nav2 får de egenskaber, der er skrevet ind i formregelblokken, men kun hvis den dette link findes på en webside, der har et klassenavnet sektion2. Pkt. 6 i listen herunder.
  5. Ovenstående skaber signaleffekten på hovedmenuens links – at fanebladet i sektion får en hvid baggrundsfarve. Men vi skal lave noget ganske tilsvarende, der ændrer display-egenskaben for den indlejrede liste på netop disse sider:
    ...
    body.sektion2 #menu ul#subnav2
    ... {
      display : inline;
      left : 20px;
      position : absolute;
      top : 40px; }
    
    Du kan sikkert se, at denne (disse) formdeklaration(er) er lavet over samme læst. Det er pkt 9 i CSS-kildekoden herunder.
  6. Pkt. 9 handler om :hover-tilstanden, hvor jeg ønsker et farveskift både på topmenuens punkter og på undermenuernes punkter. Det opnås ved hjælp af pkt 9. Bemærk den høje specficitet, der gør det nødvendigt at lave formdeklarationer meget specifikke også for a-markørerne i de indlejrede lister.
1.  #page {
      padding:60px 1em 1em 1em;  
      border:1px solid #257; 
      margin-top:35px; _margin-top:36px; 
      /*Forskellig margin til IE og de andre*/
      background-color:#fff;}
2.  #menukasse {
      position:absolute; left:1em; top:110px; 
      z-index:2;margin:0 250px 1em 0;}
3.  #menu { 
      border-bottom : none; margin : 0; 
      padding-bottom : 19px; padding-left : 10px;}
4.  #menu ul, #menu li	{ 
      font-family:arial,sans-serif; 
      display : inline; list-style-type : none; 
      margin : 0; padding : 0;}
5.  #menu a	{
      background : #efefff; border : 1px solid #257; 
      color : #000; float : left; font-size : 14px; 
      line-height : 100%; margin-right : 8px; 
      padding : 2px 10px 2px 10px; 
      text-decoration : none; }

6.  body.sektion1 #menu li#nav1 a, 
    body.sektion2 #menu li#nav2 a,
    body.sektion3 #menu li#nav3 a,
    body.sektion4 #menu li#nav4 a,
    body.sektion5 #menu li#nav5 a,
    body.sektion6 #menu li#nav6 a {
      background : #fff; 
      border-bottom : 1px solid #fff;
      color : #000; }
7.  #menu li#nav1 a:hover, #menu li#nav1 ul li a:hover,
    #menu li#nav2 a:hover, #menu li#nav2 ul li a:hover,
    #menu li#nav3 a:hover,
    #menu li#nav4 a:hover, #menu li#nav4 ul li a:hover,
    #menu li#nav5 a:hover,
    #menu li#nav6 a:hover {
      color:white;
      background:#257; } 
8.  #menu #subnav1,
    #menu #subnav2,
    #menu #subnav3,
    #menu #subnav4,
    #menu #subnav5,
    #menu #subnav6 {
      display : none;
      width: 90%;}
9.  body.sektion1 #menu ul#subnav1, 
    body.sektion2 #menu ul#subnav2,
    body.sektion3 #menu ul#subnav3,
    body.sektion4 #menu ul#subnav4,
    body.sektion5 #menu ul#subnav5,
    body.sektion6 #menu ul#subnav5 {
      display : inline;
      left : 20px;
      position : absolute;
      top : 40px;  /* her sættes afstanden 
      fra toppen af browservinduet til 
      overkanten af undermenuen */  }
10. body.sektion1 #menu ul#subnav1 a, 
    body.sektion2 #menu ul#subnav2 a,
    body.sektion3 #menu ul#subnav3 a,
    body.sektion4 #menu ul#subnav4 a,
    body.sektion5 #menu ul#subnav5 a,
    body.sektion6 #menu ul#subnav6 a {
      background : #fff;
      border : 1px solid #369;
      color : #000;
      font-size : smaller;
      line-height : 10px;
      margin-right : 4px;
      padding : 2px 10px 2px 10px;
      text-decoration : none; }

Den sidste større opgave er at sikre, at topmenuens underkant falder nøjagtigt sammen med overkanten af #page-elementet, der indeholder artikelstoffet.

Jeg gennemgår hovedpunkterne omkring dette i mit eksempel på en fanebladsmenu. Da jeg her bruger float-egenskaben på a-markøren er det her vigtigt at betænke, at det også er a-markøren der skal dimensioneres, og ikke ul- eller li-markøren.

Webdesign - illustreret håndbog
Webdesign med XHTML

– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S