Webtips - Meny

Det automatiserade sättet

Detta sättet är lättast att använda om sidorna är skrivna med templates, eftersom man inte behöver göra någon anpassning på varje sida. Man fixar allt i templaten och ett par gemensamma filer.

menutest.css

/*
**  Simple styles
*/
h1 {  font-family: Verdana, Arial, Helvetica, sans-serif}
body {  font-family: Verdana, Arial, Helvetica, sans-serif}
a {  text-decoration: none; color: #224466; font-weight: bold}

/*
** Style for the current item in the menu
*/
body.index a#menuitem1,
body.page1 a#menuitem2,
body.page2 a#menuitem3,
body.page3 a#menuitem4,
.header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

/*
** Style for the not selected items in the menu
*/
a.header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #CCCCCC;
}

/*
** Style for highlighting an item in the menu, when the cursor
** is located over the item
*/
a.header:hover {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

Här används i stort sett samma style sheet som i förra exemplet. Det är de rödmarkerade raderna som skiljer sig. Dessa rader tillsammans med websidan, namnet på websidan och en javascript-fil, ser till att den nuvarande sidan blir markerad i menyn.

body.index tillsammans med a#menuitem1 används av menyn, på websidorna, för att tala om att på sidan som heter index.html ska id=menuitem1 vara markerat. body.page1 tillsammans med a#menuitem2 anger att på sidan page1.html ska id=menuitem2 vara markerat osv. Här nedan kan man se hur det hela används på en websida.

index.html

<html>
<head>
  <title>Menutest</title>
  <link rel="stylesheet" href="menutest.css" type="text/css">
  <script src="menutest.script" type="text/javascript"></script>
</head>

<body onload="document.body.className = pagename()"
      bgcolor="#FFFFFF" text="#004466">
  <table width="95%" border="0" cellspacing="0"
         cellpadding="0" bgcolor="#006699">
    <tr bgcolor="#666666">
      <td><img src="space.gif" width="1" height="15"></td>
      <td colspan="6" valign="middle">
        <div class="header">
            <a id="menuitem1" class="header" href="index.html">Hem</a>
          | <a id="menuitem2" class="header" href="page1.html">Sida 1</a>
          | <a id="menuitem3" class="header" href="page2.html">Sida 2</a>
          | <a id="menuitem4" class="header" href="page3.html">Sida 3</a>
        </div>
      </td>
    </tr>
  </table>

  <h1>Exempel på meny</h1>
  <h2>Hemsidan</h2>
</body>
</html>

Lägg märke till att sidnamnet hämtas med hjälp av javascriptet pagename(), som finns i filen menutest.script. Scriptet returnerar namnet på nuvarande websida, med extension (t.ex. .html) och sökvägen borttagen. Scriptet ser ut enligt följande:

menutest.script

/*
** This functions retrieves the file name of the supplied path,
** excluding the extension. Both / (slash) and \ (backslash) are
** handled as directory separators. If no file name is included
** in the path, the file name "index" will be returned.
**
** Example:
** ========
** path = "/C:\Hemsida\TPP-linktest\links.html" or
** path = /links.html
**
** ==> "links"
*/

function get_pagename(path)
{
  last_slash = path.lastIndexOf("/")
  last_backslash = path.lastIndexOf("\\")

  if ( last_slash > last_backslash )
    index = last_slash + 1;
  else
    index = last_backslash + 1;

  if ( index < path.length )
    filename = path.substring(index, path.length);
  else
    filename = "index.html";

  splitted_name = filename.split(".");
  name = splitted_name[0];

  return name;
}

/*
** This functions retrieves the file name of the current page,
** excluding the extension. See get_pagename() for details.
*/

function pagename()
{
  return get_pagename(location.pathname);
}

Klicka här för att testa denna typ av meny.