---
title: "CSS Meny - Aktiv länk."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/179238-css-meny-aktiv-länk"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Sjodahl"
published: "2009-07-02T17:42:06.000Z"
updated: "2009-07-02T23:25:46.000Z"
replies: 3
views: 740
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/179238-css-meny-aktiv-länk"
---

# CSS Meny - Aktiv länk.

## #1 — Sjodahl, 2009-07-02T17:42Z

Hej,

Kollat igenom en hel del css templates på webben.
De flesta använder något liknande följande kod:

```
<div id="MainMenu">
	<div id="tab">
		<ul>
			<li class="item_active"><a href=""><span>Home</span></a></li>
			<li><a href=""><span>About</span></a></li>
			<li><a href=""><span>Contact</span></a></li>
		</ul>
	</div>
</div>
```

Där: 

> \<li class="item_active"\>

 är den aktiva sidan. Men om man trycker på en annan sida, finns det något sätt att lösa så att den blir aktiv med vanlig html, css. Eller måste man blanda in js,aspx,php?

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

## #2 — tanten, 2009-07-02T17:59Z

Om du menar att allt är gjort med bara html och att menyn inte inkluderas från en fil så är det bara att flytta på \<li class="item_active"\> till den aktuella sidan typ:

```
<li><a href=""><span>Home</span></a></li>
			<li class="item_active"><a href=""><span>About</span></a></li>
			<li><a href=""><span>Contact</span></a></li>
```

Var det vad du menade?

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

## #3 — Sjodahl, 2009-07-02T18:03Z

Nja inte riktigt så jag menar, bygger i ASP.NET så jag har en MasterPage som menyn ligger i. Det jag menar är väl om det går att flytta "item_active" utan att blanda in .NET code på något sätt.

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

## #4 — jarvklo, 2009-07-02T23:25Z

Du kan ge varje sida en unik identitet genom att lägga till en class på body (eller t.ex. din alltomspännande \<form\> om du kör ASP.NET)

Exempel:
Om du kodar menyn såhär: 

```
<ul class="menu">
  <li class="fee"><a href="#">Fee</a></li>
  <li class="fie"><a href="#">Fie</a></li>
  <li class="foe"><a href="#">Foe</a></li>
  <li class="fum"><a href="#">Fum</a></li>
</ul>
```

 kan du t.ex. ställa in ett enklare utseende såhär i CSS 

```
.menu li {display: block; border: 1px solid black; background-color: silver}
.fee .menu .fee,
.foe .menu .foe,
.fie .menu .fie,
.fum .menu .fum {background-color: gray}
```

 och sedan kontrollera vilken av menyerna som är "selekterad" (mörkare grå i exemplet) genom att påverka t.ex. bodytaggens class-atrribut såhär:

```
<body class="fee">
```

```
<body class="fie">
```

```
<body class="foe">
```

```
<body class="fum">
```

Det går naturligtvis bra att välja andra klassnamn  ;)  - men tricket är alltså att "matcha" i CSS genom en kombination av någon klass du väljer för t.ex. body (eller annat alltomslutande element) och den klass du har på den "menypinne"  som du vill highligta...

... men \*helt\* utan ASP.NET-kod vete f-n hur du skall kunna få till olika klasser på body för olika sidor om du har en masterpage förstås...   ;)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/179238-css-meny-aktiv-länk
