---
title: "Vill göra denna meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/design-grafik/68605-vill-göra-denna-meny"
topic: "Design & grafik"
topic_url: "https://www.webforum.nu/amne/design-grafik"
author: "Mannen"
published: "2003-02-18T08:58:29.000Z"
updated: "2003-02-18T21:08:36.000Z"
replies: 22
views: 596
page: 1
pages: 2
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/design-grafik/68605-vill-göra-denna-meny"
---

# Vill göra denna meny

_Sida 1 av 2._

## #1 — Mannen, 2003-02-18T08:58Z

Hejsan
Om ni går till <http://www.cnn.com> och tittar på deras meny till vänster.
Den är gjord utan bilder.

Vart finns det en "guide" på hur man gör en sånn. Jag har sett det en gång men kommer ej ihåg vart.

Någon som vet, lägg då läänken här. Eller om ni har andra åsikter och förslag

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

## #2 — voigtann1, 2003-02-18T09:20Z

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..

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

## #3 — Del Pero, 2003-02-18T09:42Z

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!

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

## #4 — Axel, 2003-02-18T09:47Z

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.. ;)

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

## #5 — supinum, 2003-02-18T09:59Z

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

mvh david s

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

## #6 — voigtann1, 2003-02-18T10:01Z

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

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

## #7 — supinum, 2003-02-18T10:07Z

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

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

## #8 — supinum, 2003-02-18T10:08Z

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

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

## #9 — supinum, 2003-02-18T10:09Z

aha! mellanslag! :) :e

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

## #10 — voigtann1, 2003-02-18T10:18Z

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

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

## #11 — Mannen, 2003-02-18T11:54Z

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 :)

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

## #12 — ejick, 2003-02-18T12:44Z

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

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

## #13 — Mannen, 2003-02-18T12:54Z

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

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

## #14 — solbulle, 2003-02-18T13:04Z

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

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

## #15 — Mannen, 2003-02-18T14:01Z

Ha!, ejick du hade fel ;)

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

## #16 — voigtann1, 2003-02-18T14:11Z

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.

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

## #17 — m_soderlund, 2003-02-18T14:17Z

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>
```

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

## #18 — voigtann1, 2003-02-18T14:18Z

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

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

## #19 — solbulle, 2003-02-18T14:33Z

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;

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

## #20 — voigtann1, 2003-02-18T17:03Z

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!

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

---

Tråden på webben: https://www.webforum.nu/amne/design-grafik/68605-vill-göra-denna-meny  
Nästa sida: https://www.webforum.nu/amne/design-grafik/68605-vill-göra-denna-meny/page2.md