WN

WN (https://www.wn.se/forum/index.php)
-   Serversidans teknologier (https://www.wn.se/forum/forumdisplay.php?f=4)
-   -   ASP-sida + Css-meny? (https://www.wn.se/forum/showthread.php?t=30436)

Starnoire 2008-07-09 22:04

Jag vill bygga en sida i asp men använda en gammal snygg meny jag har, som bygger på flikar där css:en markerar vilken sida som är aktiv.

Om jag nu använder include file, hur får jag ihop det så att menyn visar rätt flik? Den ska alltså förstå vilken sida som är aktiv...

eliasson 2008-07-10 12:31

Läs av querystringen, och markera beroende på det.

Starnoire 2008-07-10 14:19

Någon kod att exemplifiera med?

WeaZear 2008-07-10 14:24

if request.querystring("page") = "start" then

response.write "<img src=start_markerad.gif>"

end if

Starnoire 2008-07-10 18:30

Hm. Det är en lite mer komplicerad meny så det räcker inte att byta en bild, den måste använda min css-fil på något sätt. Tror det här blir alldeles för komplicerat för en nybörjare på asp, får nog tänka ut nåt annat..

WeaZear 2008-07-10 18:31

Hur ser CSS scriptet ut då?

mr_lundis 2008-07-10 19:02

Det finns 2 valiga sätt att lösa detta på:
1. Man sätter en klass på den aktuella meny-noden (förslagsvis när man renderar menyn).
2. Man sätter ett id på body'n för att på så sätt applicera css regler som är unika för just den sidan

tartareandesire 2008-07-10 19:08

Det blir lättare att svara om du postar aktuella kodsnuttar.

scrdj 2008-07-10 19:39

Kan du inte bara göra olika csser för varje meny och sedan välja css efter vilken sida man är på?

Starnoire 2008-07-10 21:03

Tack för tipsen!

Jag gillar mr_lundis förslag 2, förslag 1 fattar jag nog inte riktigt hur det skulle se ut...

Det här är det som styr menyn:

#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#656565;
}

#header a:hover {
color:#000;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

mr_lundis 2008-07-11 00:07

Förslag 1 implementerar man vanligtvis genom att sätta en klass på det aktuella meny-elementet när man loopar igenom dem (detta förutsätter att menyn genereras dynamiskt av en template motor/asp-script).

jonny 2008-07-11 08:33

Jag har svårt att förstå problemet. Du använder CSS på precis samma sätt i ASP som i HTML. Det är ju trots allt HTML som genereras på servern.

mr_lundis 2008-07-11 12:04

Så vit jag förstår så vill Starnoire ha ett sätt att märka upp det aktiva meny-elementet, via asp, för att sedan kunna styla det via css.

allstars 2008-07-13 14:09

Jo, men det behöver man inte asp-script för...

Som tidigare sagt sätt ett id eller en class på body som markerar vilken sida man är på och sedan css och byta style för den aktiva fliken.

Sätt först generella regler för alla flikar
Kod:

ul#nav li {float: left;}
ul#nav li a {
        display: block;
        padding: 16px 8px;
        border: none;
        color: #999;
        text-decoration: none;
        text-shadow: 0 1px 1px #000;
        }

Sedan, efter att du satt id eller class på bodyn ange vad som skall vara annorlunda
Kod:

#home li#nav-home,
#company li#nav-company,
#products li#nav-products,
#news li#nav-news,
#media li#nav-media,
#contact li#nav-contact,
#order li#nav-order {
        background: url(../img/menuindicator.gif) bottom center no-repeat;
        }

#home li#nav-home a,
#company li#nav-company a,
#products li#nav-products a,
#offers li#nav-offers a,
#news li#nav-news a,
#media li#nav-media a,
#contact li#nav-contact a,
#order li#nav-order a {
        color: #fff; background: none; border: none;
        }

På detta vis behöver man inte lägga till en class=active eller id=active.
Kom ihåg dock att alla LI behöver en identifierare

markupen för menyn i detta exempel ser ut så här
Kod:

<ul id="nav">
        <li id="nav-home"><a href="/sv/index.asp">Hem</a></li>
        <li id="nav-company"><a href="/sv/index.asp">Företaget</a></li>
        <li id="nav-products"><a href="/sv/produkter.asp">Produkter</a></li>
        <li id="nav-news"><a href="/sv/nyheter-och-massor.asp">Nyheter &amp; mässor</a></li>
        <li id="nav-media"><a href="/sv/media.asp">Media</a></li>
        <li id="nav-contact"><a href="/sv/kontakt.asp">Kontakt</a></li>
        <li id="nav-order"><a href="/sv/bestallning.asp">Beställ</a></li>
</ul>



Alla tider är GMT +2. Klockan är nu 10:32.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson