---
title: "Meny med flikar - hur på bästa sätt?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/71948-meny-med-flikar-hur-på-bästa-sätt"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "[AMD]Zmaster"
published: "2003-03-23T16:21:37.000Z"
updated: "2003-03-26T10:05:15.000Z"
replies: 13
views: 469
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/71948-meny-med-flikar-hur-på-bästa-sätt"
---

# Meny med flikar - hur på bästa sätt?

## #1 — [AMD]Zmaster, 2003-03-23T16:21Z

Jag håller på med en sida, och menyn där ska vara som flikar, den som man är inne på "flyter" samman med en linje nedanför, som typ på www.apple.com, fast lite enklare, bifogar bild på en enkel skiss, ska ju va snyggare sen, men ni förstår vad jag menar.

Hur gör jag detta på bästa sätt?

Bilagor:

- [des.gif](https://www.webforum.nu/a/1211.gif)

Permalänk: https://www.webforum.nu/p/71948

## #2 — Proton, 2003-03-23T16:53Z

Man kan göra det på väldigt många olika sätt, det beror helt på vad man kan. Ex. Fireworks, Flash, Shockwave, JavaScript, ASP, PHP. 

I dreamweaver finns det en mouseover funktioner så att när du för pekaren över ett fält så kommer bilden att bytas. Ta gärna en titt på Fireworks, där man lätt kan snickra ihop en sådan meny du önskar.

Komplettera gärna med vad du kan / har tillgång till för programspråk eller program så blir det lättare att hjälpa dig.

/Johnny

Permalänk: https://www.webforum.nu/p/986341

## #3 — [AMD]Zmaster, 2003-03-23T16:54Z

Mouseover är ju inte direkt samma sak, för när jag klickar på en annan ska den som va "markerad" bli som de andra...alltså uppbyggt av bilder va?
Kan html, gör det mesta i Golive dock...vill helst att det ska vara vanlig html som alla browsers/operativsystem klarar

Permalänk: https://www.webforum.nu/p/986342

## #4 — trexter, 2003-03-23T17:05Z

r) hehe, tar bort koden efter att ha kollat på den lite noggrannare. ;)

 :)

Permalänk: https://www.webforum.nu/p/986350

## #5 — Proton, 2003-03-23T17:16Z

Har för mig att man kan använda lager-funktioner bra i GoLive? Isåfall så kan du ju lösa det med olika lager som du gör synliga vid olika tillfällen. Eller så letar du upp en bra JavaScripts tutorial.

/Johnny

Permalänk: https://www.webforum.nu/p/986357

## #6 — [AMD]Zmaster, 2003-03-23T17:21Z

> **Proton skrev:**
>
> Har för mig att man kan använda lager-funktioner bra i GoLive? Isåfall så kan du ju lösa det med olika lager som du gör synliga vid olika tillfällen. Eller så letar du upp en bra JavaScripts tutorial.
> 
> /Johnny

Men lager sätter man ju bestämd position på, inte typ i mitten...så det blir ju felplacerat beroende på upplösning man kör, eller?

Permalänk: https://www.webforum.nu/p/986365

## #7 — mattiasnordin, 2003-03-23T18:00Z

Här kommer koden till en sida som jag har skrivit. Den visar flikar som fungerar som www.apple.com. När du har klickat på en sida så kan du välja att spara ett värde i en cookie så att rätt flik visas även om du kör refresh. Den har även en mouseover funktion som gör fliken tex lite ljusare när du håller muspekaren över den...

Cookie inkluden hittar du på: www.jojoxx.net.

OBS! Jag har klippt ut koden lite vårdslöst så det är en del fel här i koden. Sidan var för lång för att få plats...  ;) 

```
	
<!---===  Includerar cookieskripten  ===--->
<script language="JavaScript" src="lib_cookies.js"></script>

<script language="JavaScript">
function KillCookie(){
var kaka = new Cookie("ValdKnapp", "")
kaka.set();
}</script>

<SCRIPT Language="JavaScript">
	// Laddar bilderna //
	button1_out=new Image(); button1_over=new Image(); button1_clicked=new Image();  
    button1_out.src="tab_start0.gif";        
    button1_over.src="tab_start1.gif";       
    button1_clicked.src="tab_start2.gif";       
	// Denna sida ska laddas när man klickar på knappen //
	// button1_url = "index2.html"
	
	button2_out=new Image(); button2_over=new Image(); button2_clicked=new Image();  
    button2_out.src="tab_pro_serv0.gif";        
    button2_over.src="tab_pro_serv1.gif";       
    button2_clicked.src="tab_pro_serv2.gif";       
	// Denna sida ska laddas när man klickar på knappen //
	// button2_url = "/tab_products/products_start.asp"
	
	button3_out=new Image(); button3_over=new Image(); button3_clicked=new Image(); 
    button3_out.src="tab_corporate0.gif";        
    button3_over.src="tab_corporate1.gif";       
    button3_clicked.src="tab_corporate2.gif";       
	// Denna sida ska laddas när man klickar på knappen //
	// button3_url = "/tab_corporate/corporate_start.asp"

</script>

	

<body onunload="KillCookie()" vlink=blue background=bak_above_iar4.gif bgcolor="#FFE000"><base target=workFrame>

<!--- Startbilderna på knapparna --->
<!--- Används mellanslag så blir det mellanslag mellan bilderna i MSIE. Där av den LÅÅÅNGA raden --->
<table cellpadding=0 cellspacing=0 border=0><td>
<img src="tab_short_stop.gif"><A href="index2.html" onMouseOver="bilden_in(1);return true" onMouseOut="bilden_out(1);return true" onClick="funRedirect(1)"><img border=0 src="tab_start1.gif" name=flik1></a><!'''''2'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_products/products_start.asp" onMouseOver="bilden_in(2);return true" onMouseOut="bilden_out(2);return true" onClick="funRedirect(2)"><img border=0 src="tab_pro_serv0.gif" name=flik2></a><!'''''3'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_corporate/corporate_start.asp" onMouseOver="bilden_in(3);return true" onMouseOut="bilden_out(3);return true" onClick="funRedirect(3)"><img border=0 src="tab_app-serv0.gif" name=flik3></a><!''''''4'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_offices/offices_index.html" onMouseOver="bilden_in(4);return true" onMouseOut="bilden_out(4);return true" onClick="funRedirect(4)"><img border=0 src="tab_corporate0.gif" name=flik4></a><!''''''5'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A href="/tab_log/log_start.asp"  onMouseOver="bilden_in(5);return true" onMouseOut="bilden_out(5);return true" onClick="funRedirect(5)"><img border=0 src="tab_office0.gif" name=flik5></a><!''''''6'''''''><img src="tab_short_stop.gif"><img src="tab_short_stop.gif"><A href="http://www.iar.com" onMouseOver="bilden_in(6);return true" onMouseOut="bilden_out(6);return true" onClick="funRedirect(6)"><img border=0 src="tab_log0.gif" name=flik6></a><!''''''7'''''''><img src="tab_short_stop.gif"><A href="http://salescorner.iar.se" onMouseOver="bilden_in(7);return true" onMouseOut="bilden_out(7);return true" onClick="funRedirect(7)"><img border=0 src="tab_extranet_salescorner0.gif" name=flik7></a><!''''''8'''''''><img src="tab_short_stop.gif"><A href="http://e-sales.iar.se" onMouseOver="bilden_in(8);return true" onMouseOut="bilden_out(8);return true" onClick="funRedirect(8)"><img border=0 src="tab_extranet_e-sales0.gif" name=flik8></a>
</form>
</BODY></HTML>

<script language="JavaScript">

// VISAR RÄTT KNAPP VID RELOAD AV BROWSERN //
varValdKnapp = Cookie.get("ValdKnapp")	
if (varValdKnapp == ""){
varValdKnapp = 0
}
funRedirect(varValdKnapp)

// OM KAKAN = 0 SÅ SKA DEN TAS BORT //
if (varValdKnapp == "0"){
KillCookie()
}

// VISAR KNAPP BEROENDE PÅ ONCLICK //
function funRedirect(num){
	if (num == 0){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "0")
		//kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_out.src;
		document.flik2.src = button2_out.src;
		document.flik3.src = button3_out.src;
		document.flik4.src = button4_out.src;
		document.flik5.src = button5_out.src;
		document.flik6.src = button6_out.src;
		document.flik7.src = button7_out.src;
		document.flik8.src = button8_out.src;
		document.flik9.src = button9_out.src;
		document.flik10.src = button10_out.src;
		document.flik11.src = button11_out.src;
		document.flik12.src = button12_out.src;
		varValdKnapp = num
	}
	if (num == 1){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "1")
		//kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_clicked.src;
		document.flik2.src = button2_out.src;
		document.flik3.src = button3_out.src;
		document.flik4.src = button4_out.src;
		document.flik5.src = button5_out.src;
		document.flik6.src = button6_out.src;
		document.flik7.src = button7_out.src;
		document.flik8.src = button8_out.src;
		document.flik9.src = button9_out.src;
		document.flik10.src = button10_out.src;
		document.flik11.src = button11_out.src;
		document.flik12.src = button12_out.src;
		varValdKnapp = num
		//parent.workFrame.location=button1_url
	}
	if (num == 2){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "2")
		//kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_out.src;
		document.flik2.src = button2_clicked.src;
		document.flik3.src = button3_out.src;
		document.flik4.src = button4_out.src;
		document.flik5.src = button5_out.src;
		document.flik6.src = button6_out.src;
		document.flik7.src = button7_out.src;
		document.flik8.src = button8_out.src;
		document.flik9.src = button9_out.src;
		document.flik10.src = button10_out.src;
		document.flik11.src = button11_out.src;
		document.flik12.src = button12_out.src;
		varValdKnapp = num
		//parent.workFrame.location=button2_url
	}
	if (num == 3){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "3")
		//kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_out.src;
		document.flik2.src = button2_out.src;
		document.flik3.src = button3_clicked.src;
		document.flik4.src = button4_out.src;
		document.flik5.src = button5_out.src;
		document.flik6.src = button6_out.src;
		document.flik7.src = button7_out.src;
		document.flik8.src = button8_out.src;
		document.flik9.src = button9_out.src;
		document.flik10.src = button10_out.src;
		document.flik11.src = button11_out.src;
		document.flik12.src = button12_out.src;
		varValdKnapp = num
		//parent.workFrame.location=button3_url
	}
}

//alert ("varValdKnapp = " +varValdKnapp)
function bilden_in(num){ 		// Onmouse over and out. Skippar vald bild 
	if (varValdKnapp != num){ 	// Om iconen tidigare är vald händer INGET.
		// alert (num);
		if (num == 1){ 
		document["flik" +num].src=button1_over.src	
		}
		if (num == 2){ 
		document["flik" +num].src=button2_over.src	
		}
		if (num == 3){ 
		document["flik" +num].src=button3_over.src	
		}
		if (num == 4){ 
		document["flik" +num].src=button4_over.src	
		}
		if (num == 5){ 
		document["flik" +num].src=button5_over.src	
		}
		if (num == 6){ 
		document["flik" +num].src=button6_over.src	
		}
		if (num == 7){ 
		document["flik" +num].src=button7_over.src	
		}
		if (num == 8){ 
		document["flik" +num].src=button8_over.src	
		}
		if (num == 9){ 
		document["flik" +num].src=button9_over.src	
		}
		if (num == 10){ 
		document["flik" +num].src=button10_over.src	
		}
		if (num == 11){ 
		document["flik" +num].src=button11_over.src	
		}
		if (num == 12){ 
		document["flik" +num].src=button12_over.src	
		}
	}
}

function bilden_out(num){ 		// Onmouse over and out. Skippar vald bild 
	if (varValdKnapp != num){ 	// Om iconen INTE tidigare är vald
		//alert (num);
		if (num == 1){ 
		document["flik" +num].src=button1_out.src	
		}
		if (num == 2){ 
		document["flik" +num].src=button2_out.src	
		}
		if (num == 3){ 
		document["flik" +num].src=button3_out.src	
		}
		if (num == 4){ 
		document["flik" +num].src=button4_out.src	
		}
		if (num == 5){ 
		document["flik" +num].src=button5_out.src	
		}
		if (num == 6){ 
		document["flik" +num].src=button6_out.src	
		}
		if (num == 7){ 
		document["flik" +num].src=button7_out.src	
		}
		if (num == 8){ 
		document["flik" +num].src=button8_out.src	
		}
		if (num == 9){ 
		document["flik" +num].src=button9_out.src	
		}
		if (num == 10){ 
		document["flik" +num].src=button10_out.src	
		}
		if (num == 11){ 
		document["flik" +num].src=button11_out.src	
		}
		if (num == 12){ 
		document["flik" +num].src=button12_out.src	
		}
	}
}
</SCRIPT>
```

Permalänk: https://www.webforum.nu/p/986394

## #8 — [AMD]Zmaster, 2003-03-23T18:07Z

Du kan inte ge mig direktlänk till hela fungerande scriptet ? :)

Permalänk: https://www.webforum.nu/p/986401

## #9 — mattiasnordin, 2003-03-23T18:20Z

Kontakta mig på: <mattiasnordin@tjohoo.se> så ska jag maila det till det. Jag har det nämligen inte på den datorn jag sitter på just nu.

Mvh
Mattias

Permalänk: https://www.webforum.nu/p/986416

## #10 — [AMD]Zmaster, 2003-03-23T18:23Z

Skickat iväg ett mail...

Permalänk: https://www.webforum.nu/p/986419

## #11 — [AMD]Zmaster, 2003-03-25T19:28Z

Ännu inte fått nått mail =/

Permalänk: https://www.webforum.nu/p/990709

## #12 — mattiasnordin, 2003-03-26T09:40Z

Sorry...

Är det något liknande detta du letar efter?

[Exempel på menysystem med flikar](http://mattiasnordin.net/web2002/but_webmister/but_script/script_tab_meny/ver1/) 

Filerna kommer med posten...

Permalänk: https://www.webforum.nu/p/991008

## #13 — SirPeter, 2003-03-26T09:45Z

Är det inte bättre att lägga in koden här så att fler kan få hjälp av denna tråd om det är någon mer som söker efter samma sak?
Det är liksom så ett forum är tänkt att fungera. ;)

Permalänk: https://www.webforum.nu/p/991010

## #14 — mattiasnordin, 2003-03-26T10:05Z

Visst ska man dela med sig av det man kan. Frågan är hur mycket tid man ska lägga ner på att skala ner koden så att den får plats att klippa in i webforums formulär... Det hade varit trevligt med ett litet javascript som visar hur många tecken man har skrivit så att man blir förvarnad innan man slår i taket!

Tredje försöket att infoga koden kommer här...

Håll till godo :-)

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<STYLE TYPE="TEXT/CSS">
	<!--
	A:active 	{color:white} 
	A:visited 	{color:blue}
	A:link  	{color:blue}
	A:hover 	{color:green}  
	//-->
	</STYLE>

	<TITLE>Kodexempel skrivet av Mattias Nordin</TITLE>
	

	
<!---===  Includerar cookieskripten  ===--->
<script language="JavaScript" src="lib_cookies.js"></script>

<script language="JavaScript">
function KillCookie(){
var kaka = new Cookie("ValdKnapp", "")
kaka.set();
}</script>

<SCRIPT Language="JavaScript">
	// Laddar bilderna //
	button1_out=new Image(); button1_over=new Image(); button1_clicked=new Image();  
    button1_out.src="tab_start0.gif";        
    button1_over.src="tab_start1.gif";       
    button1_clicked.src="tab_start2.gif";       
	// Denna sida ska laddas när man klickar på knappen //
	button1_url = "startsida1.html"
	
	button2_out=new Image(); button2_over=new Image(); button2_clicked=new Image();  
    button2_out.src="tab_pro_serv0.gif";        
    button2_over.src="tab_pro_serv1.gif";       
    button2_clicked.src="tab_pro_serv2.gif";       
	// Denna sida ska laddas när man klickar på knappen //
	 button2_url = "knapp2.html"
	
	button3_out=new Image(); button3_over=new Image(); button3_clicked=new Image(); 
    button3_out.src="tab_corporate0.gif";        
    button3_over.src="tab_corporate1.gif";       
    button3_clicked.src="tab_corporate2.gif";       
	// Denna sida ska laddas när man klickar på knappen //
	button3_url = "http://mattiasnordin.net"
</script>

	

<body !onUnload="KillCookie()" vlink=blue background=bak_above_iar4.gif bgcolor="#FFE000"><base target=workFrame>

<!--- Startbilderna på knapparna --->
<br>
<table cellpadding=0 cellspacing=0 border=0><td>
<img src="tab_short_stop.gif"><img src="tab_short_stop.gif"><img src="tab_short_stop.gif"><A !href="index2.html" onMouseOver="bilden_in(1);return true" onMouseOut="bilden_out(1);return true" onClick="funRedirect(1)"><img border=0 src="tab_start1.gif" name=flik1></a><!'''''2'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A !href="/tab_products/products_start.asp" onMouseOver="bilden_in(2);return true" onMouseOut="bilden_out(2);return true" onClick="funRedirect(2)"><img border=0 src="tab_pro_serv0.gif" name=flik2></a><!'''''3'''''''><img border=0 src="tab_short_stop_1px.gif"><img border=0 src="tab_short_stop_1px.gif"><A !href="/tab_corporate/corporate_start.asp" onMouseOver="bilden_in(3);return true" onMouseOut="bilden_out(3);return true" onClick="funRedirect(3)"><img border=0 src="tab_app-serv0.gif" name=flik3></a><img border=0 src="tab_right_longtop3.gif"><br></td>
</table><br>

<script language="JavaScript">

// VISAR RÄTT KNAPP VID RELOAD AV BROWSERN //
varValdKnapp = Cookie.get("ValdKnapp")	
if (varValdKnapp == ""){
varValdKnapp = 1
}
funRedirect(varValdKnapp)

// OM KAKAN = 0 SÅ SKA DEN TAS BORT //
if (varValdKnapp == "0"){
KillCookie()
}

// VISAR KNAPP BEROENDE PÅ ONCLICK //
function funRedirect(num){
	if (num == 0){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "0")
		kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_out.src;
		document.flik2.src = button2_out.src;
		document.flik3.src = button3_out.src;
		varValdKnapp = num
	}
	if (num == 1){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "1")
		kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_clicked.src;
		document.flik2.src = button2_out.src;
		document.flik3.src = button3_out.src;
		varValdKnapp = num
		parent.workFrame.location=button1_url
	}
	if (num == 2){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "2")
		kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_out.src;
		document.flik2.src = button2_clicked.src;
		document.flik3.src = button3_out.src;
		varValdKnapp = num
		parent.workFrame.location=button2_url
	}
	if (num == 3){
		// Skapa kaka //
		var kaka = new Cookie("ValdKnapp", "3")
		kaka.expires = 5
		kaka.set();
		document.flik1.src = button1_out.src;
		document.flik2.src = button2_out.src;
		document.flik3.src = button3_clicked.src;
		varValdKnapp = num
		parent.workFrame.location=button3_url
	}
}

//alert ("varValdKnapp = " +varValdKnapp)
function bilden_in(num){ 		// Onmouse over and out. Skippar vald bild 
	if (varValdKnapp != num){ 	// Om iconen tidigare är vald händer INGET.
		// alert (num);
		if (num == 1){ 
		document["flik" +num].src=button1_over.src	
		}
		if (num == 2){ 
		document["flik" +num].src=button2_over.src	
		}
		if (num == 3){ 
		document["flik" +num].src=button3_over.src	
		}
	}
}

function bilden_out(num){ 		// Onmouse over and out. Skippar vald bild 
	if (varValdKnapp != num){ 	// Om iconen INTE tidigare är vald
		//alert (num);
		if (num == 1){ 
		document["flik" +num].src=button1_out.src	
		}
		if (num == 2){ 
		document["flik" +num].src=button2_out.src	
		}
		if (num == 3){ 
		document["flik" +num].src=button3_out.src	
		}
	}
}
</SCRIPT>

</BODY></HTML>
```

Permalänk: https://www.webforum.nu/p/991027

---

Tråden på webben: https://www.webforum.nu/amne/html-css/71948-meny-med-flikar-hur-på-bästa-sätt