CSS Meny - Aktiv länk.

3 svar · 737 visningar · startad av Sjodahl 2 juli 2009

SjodahlMedlem sedan maj 20033 218 inlägg

Frågan2 juli 2009 17:42#1

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?

tantenMedlem sedan nov. 20051 596 inlägg

2 juli 2009 17:59#2

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?

SjodahlMedlem sedan maj 20033 218 inlägg

2 juli 2009 18:03#3

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.

jarvkloMedlem sedan juli 20013 378 inlägg

2 juli 2009 23:25#4

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