webForumDet fria alternativet

hur görs meny med tabeller?

HTML & CSS

14 svar · 367 visningar · startad av TantVass

Medlem sedan nov. 200221 inlägg
Frågan#1

Hej på er :)

Jag gör sällan websidor men tillräckligt för att känna att jag inte gillar ramar.
På den här sidan har jag ändrat menyn för varje enskillt htm-doc, otroligt jobbigt och säkert lika korkat.
http://user.tninet.se/~wbg403m/akvarium/

Så var det dags nu igen för en sida med meny... och jag gjorde den med frames... Usch, jag gillar det inte :( http://w1.605.telia.com/~u60523230/kronikor/

Men detta måste väl finnas en lösning på!? Kan man hänvisa ett menydockument till en tabellruta på nått sätt (som med frames) eller hur gör man?

TantVass

Medlem sedan nov. 200013 890 inlägg
#2

Har du möjlighet att köra SSI, PHP, ASP, JSP eller nåt annat trevligt på server?

Medlem sedan nov. 200221 inlägg
#3

Nej.. vet inte vad det där e för förkortningar heller.. :P jag kan bara fuska med gammeldax html och css i "notepad"

Medlem sedan nov. 200013 890 inlägg
#4

Du kan inte inkludera filer på din hemsida med bara "HTML-teknik". Sidan ligger på Telias server eller?

Medlem sedan nov. 200221 inlägg
#5

jupp.

Medlem sedan sep. 20011 914 inlägg
#6

Förstod inte riktigt din förklaring. Är du ute efter ett menysystem eller...

Medlem sedan nov. 200013 890 inlägg
#7

Jag vet inte vad Telias servrar stödjer men du kanske kan hitta någon "hemsidehjälp" på Telias sida.

SSI fungerar så här:
1. Döp om din sida till xxx.shtml
2. I koden skriver du sedan:

<!-- #Include file="fil.txt" -->

3. Den kod som du vill inkludera på sidan skriver du sedan i filen fil.txt.
Du kan ju testa om det funkar.

Medlem sedan nov. 200221 inlägg
#8

Ja! :)
Hur gör man? Hur gör ni? (hur gör djur, hihi)
Alltså krångla och ändra i menyn så länkarna blir rätt för varje dokument är ju rena döden.. det måste finnas bra och enkla sätt.

Medlem sedan nov. 200221 inlägg
#9

hm... Ska göra en liten ssi test då, tack! ..bäst att läsa på lite om detta först.. ;)

Medlem sedan nov. 200013 890 inlägg
#10

Det finns massor med sätt men server måste klara av mer än att bara visa HTML-sidor. Det finns inte så mycket att läsa om SSI - testa det som jag skrev så ser du om det funkar. ;)

Medlem sedan juli 20011 084 inlägg
#11

web-tor visade just de enklare sättet?

Medlem sedan juni 20006 031 inlägg
#12

Den teliaserver du har (följer med internetabbonemanget) stödjer inte SSI eller andra godsaker, endast vanlig HTML.
Vissa program typ Dreamweaver kan ändra samtliga menyer automatiskt, men använder du notepad så får du göra det manuellt. Tyvärr.

Medlem sedan sep. 20011 914 inlägg
#13

Här är ett menysystem från dhtmlcentral lite mycket kod kanske, men ändå ganska lätt att förändra. Gjorde några små markeringar där du enkelt kan ändra (de är i rött).

Lägg detta inom head

<style type="text/css">
[red]/*I #divCont kan du ändra top och left värderna för menyns position*/[/red] 
#divCont {position:absolute; z-index:1; left:100px; top:70px; height:400px; width:170px; visibility:hidden;}

.clTop   {position:absolute; z-index:1; width:170px; line-height:17px;}
.clSub   {position:absolute; z-index:1; left:0px; top:20px; width:170px; line-height:14px;}

[red]/*Ändra på länkarnas egenskaper*/[/red]
/*** This sets the style for the links inside the menu. ***/
#divCont .clTop a {color:#000000; font-family:verdana,arial,helvetica,sans-serif; font-size:14px; font-weight:bold; text-decoration:none;}
#divCont .clTop a:hover {color:#000000; text-decoration:none;}
#divCont .clTop .clSub a {color:#777777; font-family:verdana,arial,helvetica,sans-serif; font-size:12px; font-weight:normal; text-decoration:none;}
#divCont .clTop .clSub a:hover {color:#333333; text-decoration:none;} 
</style>

<script language="JavaScript" type="text/javascript">
/**********************************************************************************   
FoldoutMenu 
*   Copyright (C) 2001 Thomas Brattli
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by Thomas Brattli
*
*   Script date: 09/04/2001 (keep this date to check versions) 
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=lib_bwcheck()

/*** variables you can configure ***/

FoldNumber = 6					//How many toplinks do you have?
var stayFolded = false			//Stay open when you click a new toplink?
foldImg = 1						//Do you want images (if not set to 0 and remove the images from the body)?
mainOffsetY = 0					//Vertical space adjustment between the main items, in pixels.

//This is the default image.
//Remember to change the actual images in the page as well, but remember to keep the name of the image.
var unImg=new Image();
unImg.src='foldoutmenu_arrow.gif'

var exImg=new Image();					//Making an image variable...
exImg.src='foldoutmenu_arrow_open.gif'	//...this is the source of the image that it changes to when the menu expands.

// NOTE: if you change the position of divCont from absolute to relative, you can put the foldoutmenu in a table.
// HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning.

/*** There should be no need to change anything beyond this. ***/

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
	scrX= innerWidth; scrY= innerHeight;
	document.onmousemove= function(){
		if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
			scrX = innerWidth;
			scrY = innerHeight;
			initFoldout();
		}
	};
}

//object constructor...
function makeMenu(obj,nest){
	nest= (!nest)?"":'document.'+nest+'.';
	this.el= bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj);	
   	this.css= bw.ns4?this.el:this.el.style;
	this.ref= bw.ns4?this.el.document:document;		
	this.x= (bw.ns4||bw.opera5)?this.css.left:this.el.offsetLeft;
	this.y= (bw.ns4||bw.opera5)?this.css.top:this.el.offsetTop;
	this.h= (bw.ie||bw.ns6)?this.el.offsetHeight:bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:0;
    this.vis= b_vis;
	this.hideIt= b_hideIt;
    this.showIt= b_showIt;
    this.moveIt= b_moveIt;
	return this
}
//object methods...
function b_showIt(){this.css.visibility='visible'}
function b_hideIt(){this.css.visibility='hidden'}
function b_vis(){if(this.css.visibility=='hidden' || this.css.visibility=='HIDDEN' || this.css.visibility=='hide') return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px}

/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
	if(bw.bw){
		if (!stayFolded){
			for (var i=0; i<oSub.length; i++){
				if (i!=num){
					oSub[i].hideIt()
					if (foldImg)oTop[i].ref["imgA"+i].src = unImg.src
				}
			}
			for(var i=1; i<oTop.length; i++){
				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h)
			}
		}
		if (oSub[num].vis()){
			oSub[num].showIt()
			if (foldImg)oTop[num].ref["imgA"+num].src = exImg.src
		}else{
			oSub[num].hideIt()
			if(foldImg)oTop[num].ref["imgA"+num].src = unImg.src
		}
		for(var i=1; i<oTop.length; i++){ 
			if (!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+oSub[i-1].h+mainOffsetY) 
			else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].h+mainOffsetY)
		}
	}
}

/*********************************************************************
The init function... there should be no need to change anything here.
*********************************************************************/
function initFoldout(){
	//Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
	bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
	if (bw.opera5) bw.ns6 = 0

	oTop = new Array()
	oSub = new Array()
	//Making the objects and hiding the subs...
	for (var i=0; i<FoldNumber; i++){
		oTop[i] = new makeMenu('divTop'+i,'divCont')
		oSub[i] = new makeMenu('divSub'+i,'divCont.document.divTop'+i)
		oSub[i].hideIt()
	}
	
	//Positioning the top objects...
	oTop[0].moveIt(0,0)
	for (var i=1; i<oTop.length; i++){
		oTop[i].moveIt(0, oTop[i-1].y+oTop[i-1].h+mainOffsetY)
	}
	
	//Making the containing menu object and showing it...
	oCont = new makeMenu('divCont')
	oCont.showIt()
}

// If the browser is ok, the script is started onload...
if(bw.bw) onload = initFoldout;
</script>

Lägg detta inom body:

<div id="divCont"> <!-- These are the contents of the foldoutmenu. -->

<div id="divTop0" class="clTop"><a href="#" onclick="menu(0); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [choice 0]</a><br>
[red]/* Dina länkar. Ex. <a href="undersidor/fiskmat.html" target="namnet på det fönster du vill att länkarna skall öppnas">*/[/red]
<div id="divSub0" class="clSub">
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
</div><br>
</div>

<div id="divTop1" class="clTop"><a href="#" onclick="menu(1); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [choice 1]</a><br>
<div id="divSub1" class="clSub">
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
</div><br>
</div>

<div id="divTop2" class="clTop"><a href="#" onclick="menu(2); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [choice 2]</a><br>
<div id="divSub2" class="clSub">
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
</div><br>
</div>

<div id="divTop3" class="clTop"><a href="#" onclick="menu(3); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [choice 3]</a><br>
<div id="divSub3" class="clSub">
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
</div><br>
</div>

<div id="divTop4" class="clTop"><a href="#" onclick="menu(4); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [choice 4]</a><br>
<div id="divSub4" class="clSub">
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
</div><br>
</div>

<div id="divTop5" class="clTop"><a href="#" onclick="menu(5); return false" onfocus="this.blur()"><img src="foldoutmenu_arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [choice 5]</a><br>
<div id="divSub5" class="clSub">
	<a href="#">This is a link</a><br>
	<a href="#">This is a link</a><br>
</div><br>
</div>

</div> <!-- Here ends the foldoutmenu. -->
Medlem sedan nov. 200013 890 inlägg
#14

Men Dino »
TantVass fråga är typ: "Hur inkluderar jag kod på min HTML-sida?"

Medlem sedan sep. 20011 914 inlägg
#15

Jag sa ju ovan att jag inte riktigt visste vad hon menade. Men ett menysystem kan ju aldrig vara fel ;)

272 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
143 ms — hämta tråd, inlägg och bilagor (db)
118 ms — ändringar (db)