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;
}