Ho adeguato questo simpatico menu scorrevole scritto in javascript richiamando funzioni della libreria jQuery a phpBB e PortalXL creando questa modifica.

Nome Mod: Lavalamp Menu 0.1
Licenza: GPL v3.0
Autore: Agron92
Requisiti: phpBB 3.0.10 | PortalXl 5.0 Premod
Note: Funziona solo con jQuery versione 1.1 (inclusa nell’upload) nel caso in cui fosse installata una versione diversa di jQuery non è garantito il funzionamento.
Stile supportato: Prosilver o Subsilver2
Demo Board: PortalXlMod
Anteprima:

 

 

 

 

 

 

Upload files:

Javascript
Immagini (Prosilver, Subsilver)

Modifiche phpBB stile Prosilver

Upload file: styles/prosilver/template/jquery.easing.min.js
Upload file: styles/prosilver/template/jquery.lavalamp.js
Upload file: styles/prosilver/template/images/lava.png

Modifiche file: styles/prosilver/template/overall_header.html

Cerca:

</head>

Aggiungi prima:

    <script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.easing.min.js"></script>
    <script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.lavalamp.js"></script> 

    <script type="text/javascript">
       $(function() {
          $("#nav").lavaLamp({
             fx: "backout",
             speed: 700,
             click: function(event, menuItem) {
                return true;
             }
          });
       });
    </script> 

Cerca:

<div class="navbar">

Aggiungi prima:

      <!--[if IE]>
      <style type="text/css">
      #nav li.back {
      margin-left: 5px !important;
      }
      </style>
      <![endif]-->
      
        <div class="lavaLamp">
      <span class="corners-top"><span></span></span>
           <ul id="nav">
                <li<!-- IF SCRIPT_NAME eq 'index_forum' or SCRIPT_NAME eq 'viewforum' or SCRIPT_NAME eq 'viewtopic' or SCRIPT_NAME eq 'viewonline' or SCRIPT_NAME eq 'ucp' or SCRIPT_NAME eq 'mcp' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
                <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME eq 'search' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_SEARCH}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
                <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME eq 'memberlist' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_MEMBERLIST}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
           </ul>
      <span class="corners-bottom"><span></span></span>
        </div>

Modifiche file: styles/prosilver/theme/common.css

Aggiungi infine:

/* --- Lavalamp Menu 0.1 by Agron92 --- */

.lavaLamp {
   height: 30px;
   overflow: hidden;
   padding: 0 5px;
   position: relative;
   background-color: #CADCEB;
   margin: 0 0 4px;
   z-index: 0;
}

.lavaLamp ul {
   height: 20px;
   list-style: none outside none;
   z-index: 1;
}

.lavaLamp li:first-child {
   margin-left: 10px;
}

.lavaLamp li {
   float: left;
   list-style: none outside none;
   margin: 4px 0 0 0;
   z-index: -3;
}

#nav li.back {
   background: url("{T_TEMPLATE_PATH}/images/lava.png") no-repeat scroll right -24px transparent;
   height: 24px;
   bottom: 3px;
   position: absolute;
   z-index: -4;
}

#nav li.back .left {
   background: url("{T_TEMPLATE_PATH}/images/lava.png") no-repeat scroll left top transparent;
   height: 24px;
   margin-right: 5px;
}

.lavaLamp li a {
   font-weight: bold;
   padding: 5px 13px;
   margin: 0;
}

.lavaLamp li a:hover {
   color: #FFFFFF;
}

.lavaLampCurrent a span {
   color: #FFFFFF;
   text-decoration: underline;
}

Svuota da ACP la cache: Stile/Prosilver/Template
Svuota da ACP la cache: Stile/Prosilver/Tema

Modifiche phpBB stile Subsilver2

Upload file: styles/subsilver2/template/jquery.lavalamp.js
Upload file: styles/subsilver2/template/jquery.easing.min.js
Upload file: styles/subsilver2/theme/images/lava.png

Modifiche file: styles/subsilver2/template/overall_header.html

Cerca:

</head>

Aggiungi prima:

    <script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.easing.min.js"></script>
    <script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.lavalamp.js"></script>

    <script type="text/javascript">
       $(function() {
         $("#nav").lavaLamp({
           fx: "backout",
           speed: 700,
           click: function(event, menuItem) {
             return true;
           }
         });
       });
    </script>

Cerca:

<div id="menubar">

Aggiungi dopo:

          <table class="tableLavaLamp" cellspacing="0" cellpadding="0" width="100%" align="center">
          <tr>
          <td class="row1" width="20%" align="left"></td>
          <td class="row1" width="60%" align="center">
              <!--[if IE]>
              <style type="text/css">
              #nav li.back {
              margin-left: 5px !important;
              }
              </style>
              <![endif]-->
             
              <div class="lavaLamp">
                   <ul id="nav">
                        <li<!-- IF SCRIPT_NAME eq 'index_forum' or SCRIPT_NAME eq 'viewforum' or SCRIPT_NAME eq 'viewtopic' or SCRIPT_NAME eq 'viewonline' or SCRIPT_NAME eq 'ucp' or SCRIPT_NAME eq 'mcp' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
                        <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME eq 'search' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_SEARCH}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
                        <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME eq 'memberlist' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_MEMBERLIST}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
                   </ul>
                </div>
          </td>
          <td class="row1" width="20%" align="right"></td>
          </tr>
          </table>

Modifiche file: styles/subsilver2/theme/stylesheet.css

Aggiungi infine:

    /* --- Lavalamp Menu 0.1 by Agron92 --- */

    .tableLavaLamp {
       margin-bottom: 0px;
       margin-top: 3px;
       border: 1px solid #a9b8c2;
       background-color: #ececec;
    }

    .lavaLamp {
       height: 30px;
       overflow: hidden;
       position: relative;
       z-index: 0;
       width: 820px;
    }

    .lavaLamp ul {
       height: 20px;
       list-style: none outside none;
       z-index: 1;
    }

    .lavaLamp li:first-child {
       margin-left: 10px;
    }

    .lavaLamp li {
       float: left;
       list-style: none outside none;
       margin: 8px 0 0 0;
       z-index: -3;
    }

    #nav li.back {
       background: url("./images/lava.png") no-repeat scroll right -24px transparent;
       height: 24px;
       bottom: 3px;
       position: absolute;
       z-index: -4;
    }

    #nav li.back .left {
       background: url("./images/lava.png") no-repeat scroll left top transparent;
       height: 24px;
       margin-right: 5px;
    }

    .lavaLamp li a {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 11px;
       font-weight: bold;
       padding: 5px 10px;
       margin: 0;
    }

    .lavaLamp li a:hover {
       text-decoration: none;
    }

    .lavaLampCurrent a span {
       text-decoration: underline;
    }
Modifiche PortalXl 5.0 Premod (phpBB 3.0.10) stile Prosilver

Upload file: styles/prosilver/template/portal/src/jquery.easing.min.js
Upload file: styles/prosilver/template/portal/src/jquery.lavalamp.js
Upload file: styles/prosilver/template/portal/src/images/lava.png

Modifiche file: styles/prosilver/template/overall_header.html

Cerca:

</head>

Aggiungi Prima:

    <script type="text/javascript" src="{T_TEMPLATE_PATH}/portal/src/jquery.easing.min.js"></script>
    <script type="text/javascript" src="{T_TEMPLATE_PATH}/portal/src/jquery.lavalamp.js"></script> 

    <script type="text/javascript">
       $(function() {
          $("#nav").lavaLamp({
             fx: "backout",
             speed: 700,
             click: function(event, menuItem) {
                return true;
             }
          });
       });
    </script> 

Cerca:

        <div id="tabs" style="margin-top: 0px;">
           <ul>
                <!-- IF PORTAL --><li<!-- IF $PORTALXL == 'portal' or $PORTALXL == 'portal_pages' --> class="activetab"<!-- ENDIF -->><a href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a></li><!-- ENDIF -->
                <li<!-- IF $PORTALXL == 'index_forum' or SCRIPT_NAME eq 'viewforum' or SCRIPT_NAME eq 'viewtopic' or SCRIPT_NAME eq 'viewonline' or SCRIPT_NAME eq 'ucp' or SCRIPT_NAME eq 'mcp' --> class="activetab"<!-- ENDIF -->><a href="{U_INDEX}" title="{L_INDEX}"><span>{L_FORUM}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'portal_recent_topics' --> class="activetab"<!-- ENDIF -->><a href="{U_PORTAL_RECENT_TOPICS}" title="{L_RECENT_TOPICS}"><span>{L_RECENT_TOPICS}</span></a></li>
                <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME eq 'search' --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
                <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME eq 'memberlist' --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
                <!-- IF S_SHOW_DL_LINK --><li<!-- IF SCRIPT_NAME eq 'downloads' --> class="activetab"<!-- ENDIF -->><a href="{U_DOWNLOADS}" title="{L_DOWNLOADS}"><span>{L_DOWNLOADS}</span></a></li><!-- ENDIF -->
                <li<!-- IF $PORTALXL == 'knowledgebase' --> class="activetab"<!-- ENDIF -->><a href="{U_KB}" title="{L_KB_EXPLAIN}"><span>{L_KB}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'calendar' or SCRIPT_NAME eq 'calendarpost' --> class="activetab"<!-- ENDIF -->><a href="{U_CALENDAR}" title="{L_CALENDAR}"><span>{L_CALENDAR}</span></a></li>
                <li<!-- IF $PORTALXL == 'index_gallery' --> class="activetab"<!-- ENDIF -->><a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}"><span>{L_GALLERY}</span></a></li>
                <li<!-- IF $PORTALXL == 'arcade' --> class="activetab"<!-- ENDIF -->><a href="{U_ARCADE}" title="{L_ARCADE_EXPLAIN}"><span>{L_ARCADE}</span></a></li>
                <!-- IF S_SHOW_VIDEO --><li<!-- IF $PORTALXL == 'dm_video' --> class="activetab"<!-- ENDIF -->><a href="{U_DMV_VIDEO}" title="{L_DMV_VIDEO}"><span>{L_DMV_VIDEO}</span></a></li><!-- ENDIF -->
                <!-- IF S_SHOW_MUSIC_CHARTS --><li<!-- IF $PORTALXL == 'dm_music_charts' --> class="activetab"<!-- ENDIF -->><a href="{U_DM_MUSIC_CHARTS}" title="{L_DM_MUSIC_CHARTS}"><span>{L_DM_MUSIC_CHARTS}</span></a></li><!-- ENDIF -->
           </ul>
        </div>

Sostituisci con:

<!--[if IE]>
<style type="text/css">
#nav li.back {
margin-left: 5px !important;
}
</style>
<![endif]-->
      
    <div class="lavaLamp">
        <span class="corners-top"><span></span></span>
            <ul id="nav">
                <!-- IF PORTAL --><li<!-- IF $PORTALXL == 'portal' or $PORTALXL == 'portal_pages' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a></li><!-- ENDIF -->
                <li<!-- IF $PORTALXL == 'index_forum' or SCRIPT_NAME eq 'viewforum' or SCRIPT_NAME eq 'viewtopic' or SCRIPT_NAME eq 'viewonline' or SCRIPT_NAME eq 'ucp' or SCRIPT_NAME eq 'mcp' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_INDEX}" title="{L_INDEX}"><span>{L_FORUM}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'portal_recent_topics' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_PORTAL_RECENT_TOPICS}" title="{L_RECENT_TOPICS}"><span>{L_RECENT_TOPICS}</span></a></li>
                <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME eq 'search' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
                <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME eq 'memberlist' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
                <!-- IF S_SHOW_DL_LINK --><li<!-- IF SCRIPT_NAME eq 'downloads' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_DOWNLOADS}" title="{L_DOWNLOADS}"><span>{L_DOWNLOADS}</span></a></li><!-- ENDIF -->
                <li<!-- IF $PORTALXL == 'knowledgebase' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_KB}" title="{L_KB_EXPLAIN}"><span>{L_KB}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'calendar' or SCRIPT_NAME eq 'calendarpost' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_CALENDAR}" title="{L_CALENDAR}"><span>{L_CALENDAR}</span></a></li>
                <li<!-- IF $PORTALXL == 'index_gallery' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}"><span>{L_GALLERY}</span></a></li>
                <li<!-- IF $PORTALXL == 'arcade' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_ARCADE}" title="{L_ARCADE_EXPLAIN}"><span>{L_ARCADE}</span></a></li>
                <!-- IF S_SHOW_VIDEO --><li<!-- IF $PORTALXL == 'dm_video' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_DMV_VIDEO}" title="{L_DMV_VIDEO}"><span>{L_DMV_VIDEO}</span></a></li><!-- ENDIF -->
                <!-- IF S_SHOW_MUSIC_CHARTS --><li<!-- IF $PORTALXL == 'dm_music_charts' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_DM_MUSIC_CHARTS}" title="{L_DM_MUSIC_CHARTS}"><span>{L_DM_MUSIC_CHARTS}</span></a></li><!-- ENDIF -->
           </ul>
        <span class="corners-bottom"><span></span></span>
    </div>

Modifiche file: styles/prosilver/theme/common.css

Aggiungi infine:

    /* --- Lavalamp Menu 0.1 by Agron92 --- */

    .lavaLamp {
       height: 30px;
       overflow: hidden;
       padding: 0 5px;
       position: relative;
       background-color: #CADCEB;
       margin: 0 0 4px;
       z-index: 0;
    }

    .lavaLamp ul {
       height: 20px;
       list-style: none outside none;
       z-index: 1;
    }

    .lavaLamp li:first-child {
       margin-left: 10px;
    }

    .lavaLamp li {
       float: left;
       list-style: none outside none;
       margin: 4px 0 0 0;
       z-index: -3;
    }

    #nav li.back {
       background: url("{T_TEMPLATE_PATH}/portal/src/images/lava.png") no-repeat scroll right -24px transparent;
       height: 24px;
       bottom: 3px;
       position: absolute;
       z-index: -4;
    }

    #nav li.back .left {
       background: url("{T_TEMPLATE_PATH}/portal/src/images/lava.png") no-repeat scroll left top transparent;
       height: 24px;
       margin-right: 5px;
    }

    .lavaLamp li a {
       font-weight: bold;
       padding: 5px 13px;
       margin: 0;
    }

    .lavaLamp li a:hover {
       color: #FFFFFF;
    }

    .lavaLampCurrent a span {
       color: #FFFFFF;
       text-decoration: underline;
    }

Svuota da ACP la cache: Stile/Prosilver/Template
Svuota da ACP la cache: Stile/Prosilver/Tema

Modifiche PortalXl 5.0 Premod (phpBB 3.0.10) stile Subsilver2

Upload file: styles/subsilver2/template/portal/src/jquery.lavalamp.js
Upload file: styles/subsilver2/template/portal/src/jquery.easing.min.js
Upload file: styles/subsilver2/theme/images/lava.png

Modifiche file: styles/prosilver/template/overall_header.html

Cerca:

</head>

Aggiungi prima:

    <script type="text/javascript" src="{T_TEMPLATE_PATH}/portal/src/jquery.easing.min.js"></script>
    <script type="text/javascript" src="{T_TEMPLATE_PATH}/portal/src/jquery.lavalamp.js"></script>

    <script type="text/javascript">
       $(function() {
         $("#nav").lavaLamp({
           fx: "backout",
           speed: 700,
           click: function(event, menuItem) {
             return true;
           }
         });
       });
    </script>

Cerca:

       <div id="menubar">
          <table width="100%" cellspacing="0">
          <tr>
             <td class="genmed"><!-- INCLUDE navigation_menu.html --></td>
          </tr>
          </table>

Aggiungi dopo:

	      <table class="tableLavaLamp" cellspacing="0" cellpadding="0" width="100%" align="center">
          <tr>
          <td class="row1" width="20%" align="left"></td>
          <td class="row1" width="60%" align="center">
              <!--[if IE]>
              <style type="text/css">
              #nav li.back {
              margin-left: 5px !important;
              }
              </style>
              <![endif]-->
             
              <div class="lavaLamp">
              <ul id="nav">
                <!-- IF PORTAL --><li<!-- IF $PORTALXL == 'portal' or $PORTALXL == 'portal_pages' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a></li><!-- ENDIF -->
                <li<!-- IF $PORTALXL == 'index_forum' or SCRIPT_NAME eq 'viewforum' or SCRIPT_NAME eq 'viewtopic' or SCRIPT_NAME eq 'viewonline' or SCRIPT_NAME eq 'ucp' or SCRIPT_NAME eq 'mcp' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_INDEX}" title="{L_INDEX}"><span>{L_FORUM}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'portal_recent_topics' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_PORTAL_RECENT_TOPICS}" title="{L_RECENT_TOPICS}"><span>{L_RECENT_TOPICS}</span></a></li>
                <!-- IF S_DISPLAY_SEARCH --><li<!-- IF SCRIPT_NAME eq 'search' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
                <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF SCRIPT_NAME eq 'memberlist' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
                <!-- IF S_SHOW_DL_LINK --><li<!-- IF SCRIPT_NAME eq 'downloads' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_DOWNLOADS}" title="{L_DOWNLOADS}"><span>{L_DOWNLOADS}</span></a></li><!-- ENDIF -->
                <li<!-- IF $PORTALXL == 'knowledgebase' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_KB}" title="{L_KB_EXPLAIN}"><span>{L_KB}</span></a></li>
                <li<!-- IF SCRIPT_NAME eq 'calendar' or SCRIPT_NAME eq 'calendarpost' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_CALENDAR}" title="{L_CALENDAR}"><span>{L_CALENDAR}</span></a></li>
                <li<!-- IF $PORTALXL == 'index_gallery' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}"><span>{L_GALLERY}</span></a></li>
                <li<!-- IF $PORTALXL == 'arcade' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_ARCADE}" title="{L_ARCADE_EXPLAIN}"><span>{L_ARCADE}</span></a></li>
                <!-- IF S_SHOW_VIDEO --><li<!-- IF $PORTALXL == 'dm_video' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_DMV_VIDEO}" title="{L_DMV_VIDEO}"><span>{L_DMV_VIDEO}</span></a></li><!-- ENDIF -->
                <!-- IF S_SHOW_MUSIC_CHARTS --><li<!-- IF $PORTALXL == 'dm_music_charts' --> class="lavaLampCurrent"<!-- ENDIF -->><a href="{U_DM_MUSIC_CHARTS}" title="{L_DM_MUSIC_CHARTS}"><span>{L_DM_MUSIC_CHARTS}</span></a></li><!-- ENDIF -->
              </ul>
              </div>
          </td>
          <td class="row1" width="20%" align="right"></td>
          </tr>
          </table>

Modifiche file: styles/subsilver2/theme/portal_adds.css

Aggiungi infine:

    /* --- Lavalamp Menu 0.1 by Agron92 --- */

    .tableLavaLamp {
       margin-bottom: -25px;
       margin-top: 3px;
       border: 1px solid #a9b8c2;
       background-color: #ececec;
    }

    .lavaLamp {
       height: 30px;
       overflow: hidden;
       position: relative;
       z-index: 0;
       width: 820px;
    }

    .lavaLamp ul {
       height: 20px;
       list-style: none outside none;
       z-index: 1;
    }

    .lavaLamp li:first-child {
       margin-left: 10px;
    }

    .lavaLamp li {
       float: left;
       list-style: none outside none;
       margin: 8px 0 0 0;
       z-index: -3;
    }

    #nav li.back {
       background: url("./images/lava.png") no-repeat scroll right -24px transparent;
       height: 24px;
       bottom: 3px;
       position: absolute;
       z-index: -4;
    }

    #nav li.back .left {
       background: url("./images/lava.png") no-repeat scroll left top transparent;
       height: 24px;
       margin-right: 5px;
    }

    .lavaLamp li a {
       font-family: Arial,Helvetica,sans-serif;
       font-size: 11px;
       font-weight: bold;
       padding: 5px 10px;
       margin: 0;
    }

    .lavaLamp li a:hover {
       text-decoration: none;
    }

    .lavaLampCurrent a span {
       text-decoration: underline;
    }