Span menu

Jeg glemte lige at sige at det gerne må være i ASP, altså hvis man kan lave en smart func eller noget andet.

Prøv at kigge lidt på Thomas Brattli\'s Coolmenus: http://www.dhtmlcentral.com/

hth
jes

Hej jes

Du skal nok få nogle point, men jeg vil gerne have nogle lidt mindre kompliceret koder end dem på dhtml....
Så jeg venter lige på nogle flere svar.

Thomas

Du kan kigge på følgende links:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnmind99/html/htmltree.asp

Og, hvis du selv vil kode en context-menu / static menu:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude110498.asp

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml.asp

Meget fint men er der ikke nogle der har noget kode som er simpelt, jeg har selv prøvet med dette


<a href=\"java script:void(0)\" onclick=\"undermenu.innerHTML=\'Undermenu 1\'\">Link 1</a>

<span id=\"undermenu\">Her kommer der nogle undermenuer</span>

Men det virker ikke...

Dette er den simpleste og funktionelle jeg kender:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
<HEAD>
<!-- Minus AutoDato -->
    <TITLE>[Ingen titel]</TITLE>
<META NAME=\"Generator\" CONTENT=\"Stone\'s WebWriter 3\">


<!-- 3 steps to follow -->


<!-- 1:Put this stylesheet in to the head of your page.
This sets the colour of the links in the drop down
menus. Does not effect other links! -->

<style type=\"text/css\">
<!--
a.x:link, a.x:visited, a.x:active{color:#ffffff;text-decoration:none}
//-->
</style>

</HEAD>


<!-- 2: Use this as your body tag. Add your own bgcolor, link and text colours etc. -->

<body marginheight=\"50\" topmargin=\"50\">


<!-- 3: Paste the script in to the body of your page. -->

<script language=\"JavaScript\">
<!-- Cross Browser NavBar2 (Not NS6) kurt.grigg@virgin.net
if (document.layers||document.all){

//Do not alter this first section, go straight to \"Edit the appearance\"

MenuTitles=new Array()
SubMenuLinks=new Array()
function Rtrn(c){
if (document.layers) c.bgColor=HighLight;
if (document.all) c.style.background=HighLight;
}
function HghLght(c){
if (document.layers) c.bgColor=MenuBgColor;
if (document.all) c.style.background=MenuBgColor;
}
OpenLayer=(document.layers)?\"<br><layer width=100% onMouseOver=\'HghLght(this)\'; onMouseOut=\'Rtrn(this)\'><center>\":\"<span style=\'width:100%\' onMouseOver=\'HghLght(this)\'; onMouseOut=\'Rtrn(this)\'>\";
CloseLayer=(document.layers)?\'</center></layer>\':\'</span>\';

/*************** Edit the appearance here ***************/

MenuWidth=120;
MenuFont=\'Verdana,Arial\';
MenuFontSize=2; //1 to 7 only!
SubMenuFontSize=2; //1 to 7 only!

MenuFontColor=\'#ffffff\';
MenuBgColor=\'005eff\';
HighLight=\'0598ff\';
Separater=2;

/********* Menu Amount and titles here. Add or delete as needed *********/

MenuTitles[0]=\'Menu 1\';
MenuTitles[1]=\'Menu 2\';
MenuTitles[2]=\'Menu 3\';
MenuTitles[3]=\'Menu 4\';
MenuTitles[4]=\'Menu 5\';


/**************************************************************************
The sub menu titles are the drop down links which appear when the corresponding
main menu titles/headers are moused over. eg: When MenuTitles[0] is moused over,
all the links in SubMenuLinks[0] will appear etc. You can have any number of links
in the sub menus. !!Make sure your links are in the same format as shown!!.

Do not alter  +OpenLayer+\"  and  \"+CloseLayer  at the beginnings and ends!!

Here\'s how you would fill them with your links. Example:
+OpenLayer+\"<a href=\'http://www.google.com\' class=\'x\'>Search with Google</a>\"+CloseLayer
**************************************************************************/

SubMenuLinks[0]=\"\"
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer

SubMenuLinks[1]=\"\"
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer

SubMenuLinks[2]=\"\"
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer

SubMenuLinks[3]=\"\"
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer

SubMenuLinks[4]=\"\"
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer
+OpenLayer+\"<a href=\'#\' class=\'x\'>Your Links</a>\"+CloseLayer

/****************** You don\'t need to alter anything past this point ******************/
MenuAmount=MenuTitles.length;
MenWidth=0;
PageWidth=0;
IniPos=0;
Spacer=0;
aIniPos=0;
aSpacer=0;
function Pos(){
MenWidth=(MenuWidth+Separater)*MenuAmount;
PageWidth=(document.layers)?window.innerWidth/2:document.body.clientWidth/2;
IniPos= PageWidth-MenuWidth-Separater-MenWidth/2;
Spacer=MenuWidth+Separater;
aIniPos= PageWidth-MenuWidth-Separater-MenWidth/2;
aSpacer=MenuWidth+Separater;
if (MenWidth > PageWidth*2){
IniPos=-MenuWidth-Separater;
aIniPos=-MenuWidth-Separater;
}
}
Pos();
if (document.layers){
for (i=0; i < MenuAmount; i++){
document.write(\"<layer name=\'submenu\"+i+\"\' top=0 left=\"+(aIniPos+=aSpacer)+\" \"
+\" width=\"+MenuWidth+\" bgcolor=\"+HighLight+\" visibility=hide\"
+\" onMouseOver=\'this.visibility=\\\"show\\\"; var cd=this.id.length-1; var ab=this.id.charAt(cd); H(ab)\' \"
+\" onMouseOut=\'this.visibility=\\\"hide\\\"; var ef=this.id.length-1; var gh=this.id.charAt(ef); B(gh)\'>\"
+\"<center><font face=\"+MenuFont+\" size=\"+SubMenuFontSize+\">\"
+\"&nbsp;<br>\"+SubMenuLinks[i]+\"<br></font></center></layer>\");
}
for (i=0; i < MenuAmount; i++){
document.write(\"<layer name=\'nsmenu\"+i+\"\' top=0 left=\"+(IniPos+=Spacer)+\" height=0 \"
+\"width=\"+MenuWidth+\" bgcolor=\"+MenuBgColor+\" \"
+\"onMouseOver=\\\"this.bgColor=HighLight; var e=this.id.length-1; var d=this.id.charAt(e); On(d)\\\" \"
+\"onMouseOut=\\\"this.bgColor=MenuBgColor; var e=this.id.length-1; var d=this.id.charAt(e); Off(d)\\\">\"
+\"<center><font face=\"+MenuFont+\" size=\"+MenuFontSize+\" color=\"+MenuFontColor+\">\"
+MenuTitles[i]+\"</font></center></layer>\");                                     
}
function On(x){
for (i=0; i < MenuAmount; i++){
document.layers[\'submenu\'+x].visibility=\'show\';
}
}
function Off(x){
for (i=0; i < MenuAmount; i++){
document.layers[\'submenu\'+x].visibility=\'hide\';
}
}
function B(y){
for (i=0; i < MenuAmount; i++){
document.layers[\'nsmenu\'+y].bgColor=MenuBgColor;
}
}
function H(y){
for (i=0; i < MenuAmount; i++){
document.layers[\'nsmenu\'+y].bgColor=HighLight;
}
}
}
if (document.all){
for (i=0; i < MenuAmount; i++){
document.write(\"<div id=\'sub\"+i+\"\' style=\'position:absolute;\"
+\"top:0px;\"
+\"left:\"+(aIniPos+=aSpacer)+\";\"
+\"height:0px;\"
+\"width:\"+MenuWidth+\";\"
+\"background:\"+HighLight+\";\"
+\"visibility:hidden\'\"
+\" onMouseOver=\'this.style.visibility=\\\"visible\\\";\"
+\" document.all[\\\"headers\"+i+\"\\\"].style.background=HighLight\';\"
+\" onMouseOut=\'this.style.visibility=\\\"hidden\\\";\"
+\" document.all[\\\"headers\"+i+\"\\\"].style.background=MenuBgColor\'>\"
+\"<center><font face=\"+MenuFont+\" size=\"+SubMenuFontSize+\">\"
+\"&nbsp;<br>&nbsp;<br>\"+SubMenuLinks[i]+\"</font></center></div>\");
}
for (i=0; i < MenuAmount; i++){
document.write(\"<div id=\'headers\"+i+\"\' style=\'position:absolute;\" 
+\"top:0px;\"
+\"left:\"+(IniPos+=Spacer)+\";\"
+\"height:0px;\"
+\"width:\"+MenuWidth+\";\"
+\"background:\"+MenuBgColor+\";\"
+\"cursor:nw-resize;\"
+\"padding:0px\'\"
+\" onMouseOver=\'document.all[\\\"sub\"+i+\"\\\"].style.visibility=\\\"visible\\\";\"
+\" this.style.background=HighLight\'\"
+\" onMouseOut=\'document.all[\\\"sub\"+i+\"\\\"].style.visibility=\\\"hidden\\\";\"
+\" this.style.background=MenuBgColor\'>\"
+\"<center><font face=\"+MenuFont+\" size=\"+MenuFontSize+\" color=\"+MenuFontColor+\">\"
+MenuTitles[i]+\"</font></center></div>\");
}
}
function Scroll(){
for (i=0; i < MenuAmount; i++){
if (document.layers){
document.layers[\'nsmenu\'+i].top=window.pageYOffset;
document.layers[\'submenu\'+i].top=window.pageYOffset;
}
if (document.all){
document.all[\'headers\'+i].style.top=0+document.body.scrollTop;
document.all[\'sub\'+i].style.top=0+document.body.scrollTop;
}
}
setTimeout(\'Scroll()\',150)
}
Scroll();
window.onresize=new Function(\"window.location.reload()\");
}
//-->
</script>

</BODY>
</HTML>

>>thomas
Takker for points ;~}
Jeg tager det som udtryk for, at f.eks. callesens script *ikke* var mindre kompliceret.

Men ...
jeg må indrømme, at jeg heller ikke synes Thomas Brattli har skabt den ultimative gudekode, men han har da forsøgt at gøre sin (ekstremt komplicerede) kode nærmest tilgængelig med administrative funktionaliteter.

Og ... jeg ville ikke blive glad, hvis jeg skulle bruge tid på at tilrette hans grundkode -- rent bortset fra at jeg er overbevist om, at der en hel del slam-kode -- man kan ikke kalde det nemt tilgængeligt.

mvh
jes