menu TOP

Ho appena fatto il menu TOP, non l'avevo fatto prima perche' non conosco questo linguaggio, questo e' il codice:

nell'HEAD

<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}

#MainTable A:hover {color: yellow;}
</style>

<script language="JavaScript">

//Top Nav Bar I v2.1- By Constantin Kuznetsov Jr.

//Modified by Dynamic Drive for various improvements

//Visit http://www.dynamicdrive.com for this script

var keepstatic=1 //specify whether menu should stay static (works only in IE4+)

var menucolor="#000000" //specify menu color

var submenuwidth=150 //specify sub menus' width
</script>

<script language="JavaScript" src="menu.js"></script>

<script language="JavaScript" src="menucontext.js"></script>

<script language="JavaScript">

showToolbar();

</script>

nel BODY

<script language="JavaScript">

function UpdateIt(){

if (ie&&keepstatic&&!opr6)

document.all["MainTable"].style.top = document.body.scrollTop;

setTimeout("UpdateIt()", 200);

}

UpdateIt();

</script>

nei fogli ausiliari

//Top Nav bar script v2.1- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location, linktarget);

menu = new Menu();
menu.addItem("newsid", "News", "News", "http://punkstyle.altervista.org/notizie/notiziehome.html", null, null);
menu.addItem("recensioniid", "Recensioni", "Recensioni", "http://punkstyle.altervista.org/recensioni/recensionihome.html", null, null);
menu.addItem("concertiid", "Concerti", "Concerti", null, null);
menu.addItem("intervisteid", "Interviste", "Interviste", "http://punkstyle.altervista.org/interviste/intervistehome.html", null, null);
menu.addItem("haveabreakid", "Have a break!", "Have a break!", null, null);
menu.addItem("contattiid", "Contatti", "Contatti", null, null);

menu.addSubItem("concertiid", "Live Report", "Live Report", "http://punkstyle.altervista.org/archiviolr/archiviolr.html", "");
menu.addSubItem("concertiid", "Date", "Date", "http://punkstyle.altervista.org/concerti/concerti.html", "");

menu.addSubItem("haveabreakid", "Audio", "Audio", "http://punkstyle.altervista.org/haveabreak/haveabreak.html", "");
menu.addSubItem("haveabreakid", "Video", "Video", "http://punkstyle.altervista.org/haveabreak/haveabreak.html", "");
menu.addSubItem("haveabreakid", "Foto", "Foto", "http://punkstyle.altervista.org/haveabreak/haveabreak.html", "");
menu.addSubItem("haveabreakid", "Tutto il resto", "Tutto il resto", "http://punkstyle.altervista.org/haveabreak/haveabreak.html", "");

menu.addSubItem("contattiid", "Mail", "Mail", "mailto:styloso21@yahoo.it", "");
menu.addSubItem("contattiid", "Link", "Link", "http://punkstyle.altervista.org/pagine/link.html", "");

menu.showMenu();
}

if (document.all) {n=0;ie=1;ns6=0;fShow="visible";fHide="hidden";}
if (document.getElementById&&!document.all) {n=0;ie=0;ns6=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;ns6=0;fShow="show";fHide="hide";}

//Top Nav bar script v2.1- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

opr6=ie&&navigator.userAgent.indexOf("Oper a")!=-1

window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
this.bgColor = menucolor;
if (ie) this.menuFont = "bold 12px Arial"; //default font settings. Don't change. Instead, modify stylesheet in sample.htm
if (n) this.menuFont = "bold 12px Verdana";
this.fontColor = "black";

this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;

this.subMenuPaneWidth = submenuwidth;

lastMenu = null;

rightY = 0;
leftY = 0;
leftX = 0;

HTMLstr = "";
HTMLstr += "\n";
HTMLstr += "\n";
if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:absolute;top:0;left:0;'>\n";
// if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr>";
if (n) HTMLstr += "<td>&nbsp;";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
HTMLstr += "\n";
if (ie||ns6) HTMLstr+= "</div>\n";
// if (n) HTMLstr+= "</layer>\n";
HTMLstr += "\n";
}

function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "|&nbsp;";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie||ns6)
{
MENUitem += "<td>\n";
MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
MENUitem += "<a ";
MENUitem += "class=clsMenuItemIE ";
// MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
if (hint != null)
MENUitem += "title='"+hint+"' ";
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += ">";
MENUitem += "|&nbsp;\n";
MENUitem += text;
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "\n\n";
MENUitem += "\n";

HTMLstr = HTMLstr.replace("\n", MENUitem);
}

function addSubItem(idParent, text, hint, location, linktarget)
{
var MENUitem = "";
Lookup = "";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie||ns6)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' onmouseout=operahide() style='position:absolute; visibility: hidden; z-index:100; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "\n";
HTMLstr = HTMLstr.replace("\n", MENUitem);
}

Lookup = "\n";
if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
if (ie||ns6) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}

function showMenu()
{
document.writeln(HTMLstr);
}

////////////////////////////////////////////////////////////////////////////
// Private declaration
function displaySubMenu(idMainMenu)
{
var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow;

leftX = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
} else if (ie||ns6) {
//alert(document.getElementById(idMainMenu+"submenu" ).id)
menu = ie? eval(idMainMenu) : document.getElementById(idMainMenu);
submenu = ie? eval(idMainMenu+"submenu.style") : document.getElementById(idMainMenu+"submenu").styl e;
submenu.left = calculateSumOffset(menu, 'offsetLeft');
// submenu.top = calculateSumOffset(menu, 'offsetTop') + 30;
submenu.top = menu.style.top+23;
submenu.visibility = fShow;
if (lastMenu != null && lastMenu != submenu) hideAll();

leftX = ie? document.all[idMainMenu+"submenu"].style.posLeft : parseInt(document.getElementById(idMainMenu+"subme nu").style.left);
rightX = ie? leftX + document.all[idMainMenu+"submenu"].offsetWidth : leftX+parseInt(document.getElementById(idMainMenu+ "submenu").offsetWidth);

leftY = ie? document.all[idMainMenu+"submenu"].style.posTop+
document.all[idMainMenu+"submenu"].offsetHeight : parseInt(document.getElementById(idMainMenu+"subme nu").style.top)+parseInt(document.getElementById(i dMainMenu+"submenu").offsetHeight);
rightY = leftY;
}
lastMenu = submenu;
}

function hideAll()
{
if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}

function calculateSumOffset(idItem, offsetName)
{
var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}

function updateIt(e)
{
if (ie&&!opr6)
{
var x = window.event.clientX;
var y = window.event.clientY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
if (n||ns6)
{
var x = e.pageX;
var y = e.pageY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}

function operahide(){
if (opr6){
if (!MainTable.contains(event.toElement))
hideAll()
}
}

if (ie||ns6)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
window.captureEvents(Event.CLICK);
window.onmousemove=updateIt;
window.onclick=hideAll;
}

4 domande:

-dove si cambia il font, la grandezza e il colore (sia quando vengono evidenziati sia nella condizione normale)?

-si puo' posizionare dove si vuole? ad esempio sotto il banner in alto (del sito intendo, non quello pubblicitario) se nza essere vincolati dal fatto che questo menu orizzontale e' la prima cosa visualizzata in alto nella pagina?
in caso non si potesse, penso si possa bloccare il banner in alto, facendo cominciare la pagina da sotto il banner, come si fa?

-quali sono le parti superflue che si possono cancellare? ad esempio quelle che ti spiegano cosa fare o quelle che pubblicizzano i siti?; ho problemi di spazio e devo ridurre

-questo menu e' un po' scarno, ma come primo e' ottimo, volendo nei prossimi giorni personalizzare i bottoni che programma e' necessario?

Grazie di cuore

:wink:

mi sa dal css del tag style

scusa per la risp di prima ma stavo finendo na cosa :wink:

[code:1:f04983a5f0] var menucolor="#000000" [/code:1:f04983a5f0] sfondo menu'

[code:1:f04983a5f0] #MainTable A:hover {color: yellow;} [/code:1:f04983a5f0] colore al passaggio del mouse

[code:1:f04983a5f0] {text-decoration: none; font: bold 12px Arial; [b]color: white;[/b]cursor: hand; z-index:100} [/code:1:f04983a5f0] colore testo

GRAZIE SCOOOT!

ma come si fa a bloccarlo facendo si che non mi segua quando scrollo?

dai raga e' importante, date un'occhiata al sito: fa schifo quando la barra del menu si sposta e resta sospesa.... Non si puo' bloccarla?

prova a modifcare il valore di "var keepstatic"

GRANDISSIMO!

Ora vorrei collocarlo in una determinata posizione, non lasciarlo all'estremo margine della pagina in alto.

(e' l'ultima lo giuro :lol: :lol: )

così ad occhio guardandolo alla veloce penso che se modifchi qui puoi metterlo dove vuoi :

"if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:absolute;top:0;left:0;'>\n"; "

anche se tale posizionamento ti funzionerà solo con explorer o netscape 6