Vill göra denna meny

detta är väll inte så svårt?
http://voigtan.cjb.net

jag har gjort min "meny" i bara tabeller med olika färger.. så det lär ju vara lätt att fixa "menyn" i tabell form..

Prova att expermentera lite med CSS och JavaScript så får du säkert fram något.

Deras lösning verkar vara uppbyggd på så sätt att en MouseOver ändrar css-formateringen. Inte så värst avancerat som voigtann1 säger men väldigt smart och estetiskt tilltalande enligt min mening!

Precis en sån lösning jag förordar också! :D CSS och enkel JavaScript är hundratals gånger bättre än Java, Flash, Bratta-JavaScript och andra styggelser.. ;)

en skitenkel och övertydlig guide vore inte fel. Någon som kan rekomendera något i den vägen?

mvh david s

tja.. jag skulle väll kunna slänga ihop en snabb lösning :e ger mej 30 minuter eller något :e

ok! jag kikar in igen efter lunch-gröten och 'svart krabba' vid typ 12-rycket!:e

OFFTOPIC!! varför fick jag ingen smiley när jag avslutate ovanstående inlägg med :e

aha! mellanslag! :) :e

stött på litet problem.. hur får man en class in i onmouse over? :e

Visst är en den enkelt uppbyggd, men om man inte är så haj på javascript och css tillsammans så kan det bli problem.

Jag vill ha menyn för den kräven inga bilder som ska laddas.

Vet inte hur du får in class i onmouse over.... :(

hoppas det går bra med kursen :)

Vadå? Det är väl visst bilder som skall laddas?? De ligger ju bara som bakgrund istället...

är det inte så att det är en onmouse over och då ändrar tabellen färg? --> utan bilder...?
Eller har jag fel?

Inga bilder, onmouseover --> ändrar färg.

Ha!, ejick du hade fel ;)

jag har fixat detta.. dock är jag på "jobbet" och har inte koderna här :e lovar att skicka när jag är färdig... har gjort så att det ska vara enkelt att förstå och ändra själv.

Lite exempelkod, enkel att modifiera:

<table>
<tr bgcolor="#000000">
<td>

<table cellspacing="0" cellpadding="0" width="150" border="0">
<tr>
<td onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor=''#f3f2ff;" width="150" bgColor="#f3f2ff">Text</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor=''#f3f2ff;" width="150" bgColor="#f3f2ff">Text</td>
</tr>
</table>

</td>
</tr>
</table>

sant.. det är enkelt.. fast jag har alltid problem att läsa allt på en rad.. gilar mer struktur :e som sagt.. lägger upp det när jag kommer hem

Ett litet fel i koden ovanför.

<table>
<tr bgcolor="#000000">
<td>

<table cellspacing="0" cellpadding="0" width="150" border="0">
<tr>
<td onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor='#f3f2ff';" width="150" bgColor="#f3f2ff">Text</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='#ffffff';" onmouseout="this.style.backgroundColor='#f3f2ff';" width="150" bgColor="#f3f2ff">Text</td>
</tr>
</table>

</td>
</tr>
</table>

''#f3f2ff;

Detta style-sheet gör själva designen på hur dina "knappar" ska se ut.

<style type="text/css">
<!--
.menu {
/* Vilket typsnitt/storlek/färg ska du ha i din text på knappen? */
	font-family: Verdana, Arial, Helvetica; 
	font-size: 10px;
	color: #FFFFFF;

/* Vilket Bakgrund skall själva bakgrunden vara? */
	background: #736357;

/*Vill du ha en '"3D" känsla på din knapp? vill du inte ha runt hela "knappen'" så är det bara att sätta 0 px eller ta bort de rader du inte vill ha */
	border-top : 1px solid #AA9E94;
	border-bottom : 1px solid #624837;
	border-left : 1px solid #AA9E94;
	border-right : 1px solid #624837;
	
/* Använder detta bara för att besökare skall förstå att det är en länk i knappen */
	cursor: hand;
}
.menu_hover {
	font-family: Verdana, Arial, Helvetica;
	font-size: 10px;
	color: #FFFFFF;

	background: #707B87;

	border-top : 1px solid #919BA6;
	border-bottom : 1px solid #6E7986;
	border-left : 1px solid #919BA6;
	border-right : 1px solid #6E7986;

	cursor: hand;
}
-->
</style>

Självklart kan du mixtra hur mycket du vill med hur dina knappar skall se ut. När du är färdig med det så är det dags att få "Knapparna" att fungera.

<table width="100" border="0" cellpadding="1" cellspacing="1" bgcolor="#000000">
  <tr>
    <a href="#"><td class="menu" onmouseover="this.className='menu_hover'" onmouseout="this.className='menu'">Knapp 1</td></a>
  </tr>
</table>

Lägg till hur många knappar du vill nu

Allt skall fungera.

Lycka till!