Hjälp med CSS menu med aktiva knappar och samtidigt enkel att uppdatera?

Permalänk

Hjälp med CSS menu med aktiva knappar och samtidigt enkel att uppdatera?

Jag skulle vilja ha hjälp med att ordna en meny som är enkel att uppdatera men som ändå har en funktioner med aktiva knappar.

Menyn jag vill använda är baserad på denna: http://www.webdesignerwall.com/demo/css3-dropdown-menu/

När man byter sida på menyn så ändras den "highlightade" knappen till den aktuella sidan. Detta görs genom att man manuellt får lägga in hela oordnade menyn i den aktuella sidan och sedan lägga till css stilen.

För att göra det enklare att uppdatera menyn så skulle jag därför vilja använda php för att ändra knappen automatiskt. I stil med denna guide: http://webdevjunk.com/coding/css/17/php-menu-includes-with-cs...

Jag provade att ändra <li> till det som står i guden, men detta gör menyn obrukbar.

Så jag undrar om det finns någon vänlig själ som orkar förklara hur jag går till väga.

ps. Och jag har sagt det förut och jag säger det igen, jag är totalt värdelös på att skriva webbsidor osv, men jag försöker lära mig så jag ber om ursäkt om mina frågor är dumma.

Permalänk
Medlem

Såhär ser det ju ut: <li class="current"><a href="http://www.webdesignerwall.com">Home</a></li> varje gång <li> har classen current så är den knappen markerad. Skapa bara en ifsats när den sidan är aktiv så blir får den knappen current.

Visa signatur
Permalänk

Om jag ändrar till så det står i guiden så blir resultatet detta: www.drunkenmasters.se:81 Alltså inte så lyckat. Tittar man i källkoden ser det ut som om man ändrat klass själv, men med ett heltkonstigt resultat.

Permalänk
Medlem

Jag skulle säga att problemet ligger någonstans i den minst sagt stökiga koden. Skriv dina taggar ordentligt:

<li><a href="#"></li>

Istället för

<li <a="" href="#"></li>

Så tror jag att saker och ting kommer lösa sig. Jag sparade ner sidan och gjorde dessa ändringar, då började det hända grejer. Däremot verkar det finnas kvar ett problem med padding/margin, men tar du dig en titt i stilmallen hittar du säkert vad som bråkar.
Du bör även ta en städvända i din css, såg du hade ett element för att stilge html där.

Permalänk
Skrivet av Ojeu:

Jag skulle säga att problemet ligger någonstans i den minst sagt stökiga koden. Skriv dina taggar ordentligt:

<li><a href="#"></li>

Istället för

<li <a="" href="#"></li>

Så tror jag att saker och ting kommer lösa sig. Jag sparade ner sidan och gjorde dessa ändringar, då började det hända grejer. Däremot verkar det finnas kvar ett problem med padding/margin, men tar du dig en titt i stilmallen hittar du säkert vad som bråkar.
Du bör även ta en städvända i din css, såg du hade ett element för att stilge html där.

Är som sagt en riktig nybörjare på att skriva hemsidor, så lite mer specifikt vad som kan städas bort och hur jag får det att fungera skulle vara tacksamt.

Permalänk
Medlem
Skrivet av SupaBeast:

Är som sagt en riktig nybörjare på att skriva hemsidor, så lite mer specifikt vad som kan städas bort och hur jag får det att fungera skulle vara tacksamt.

Vad jag kan se nu är det bara att du rättar till

<li> "class="current"<a href="http://www.drunkenmasters.se">Home</a></li>

Så den istället ser ut såhär:

<li class="current"><a href="http://www.drunkenmasters.se">Home</a></li>

Permalänk
Skrivet av Ojeu:

Vad jag kan se nu är det bara att du rättar till

<li> "class="current"<a href="http://www.drunkenmasters.se">Home</a></li>

Så den istället ser ut såhär:

<li class="current"><a href="http://www.drunkenmasters.se">Home</a></li>

Nja, det går inte riktigt det heller. Det som syns i källkoden är ju inte riktigt som filen ser ut egentligen.

Home t.ex ser ju ut såhär:

<li> <?php echo $active[1] ?><a href="http://www.drunkenmasters.se">Home</a></li>

tar jag då bort ena > så att det blir såhär istället

<li <?php echo $active[1] ?>

så fungerar istället ingenting av menyn.

Knappen som är aktiv får alltså sin class från ett php kommando som kontrollerar aktuell sida.

Permalänk
Medlem
Skrivet av SupaBeast:

Nja, det går inte riktigt det heller. Det som syns i källkoden är ju inte riktigt som filen ser ut egentligen.

Home t.ex ser ju ut såhär:

<li> <?php echo $active[1] ?><a href="http://www.drunkenmasters.se">Home</a></li>

tar jag då bort ena > så att det blir såhär istället

<li <?php echo $active[1] ?>

så fungerar istället ingenting av menyn.

Knappen som är aktiv får alltså sin class från ett php kommando som kontrollerar aktuell sida.

Jaså, på så vis. Då borde det ju se ut såhär:

<li <?php echo $active[1] ?>><a href="http://www.drunkenmasters.se">Home</a></li>

Permalänk
Skrivet av Ojeu:

Jaså, på så vis. Då borde det ju se ut såhär:

<li <?php echo $active[1] ?>><a href="http://www.drunkenmasters.se">Home</a></li>

Ah, tackar så mycket. Ser det ut att fungera bättre (koden som syntes vid "home" knappen försvann.) dock så verkar inte stilen fungera då knappen ser ut som vanligt utan att se aktiverad ut.

Edit: I dreamweaver på Live view så fungerar menyn precis som den ska. Knappen är aktiverad, men i Firefox så är ingen knapp aktiverad, men menyn ser ut som den ska, fast utan aktiverad knapp. Vad är det som kan vara fel nu då?

Permalänk
Inaktiv

Hur ser $active[1] ut? Den skriver ut

<li "class="current"><a href="http://www.drunkenmasters.se">Home</a></li>

Du ska inte ha ett " före class.

Sen borde du ta och titta igenom din källkod, du har deklarerat en doctype, meta charset samt body två gånger.

Permalänk
Skrivet av anon150287:

Hur ser $active[1] ut? Den skriver ut

<li "class="current"><a href="http://www.drunkenmasters.se">Home</a></li>

Du ska inte ha ett " före class.

Sen borde du ta och titta igenom din källkod, du har deklarerat en doctype, meta charset samt body två gånger.

Tackar! Där satt felet. Nu fungerar menyn. Nu måste jag bara försöka städa upp allt. (Om ni har fler tips på hur jag skall städa upp, lämna dem gärna här.)

Tackar så mycket för alla svar!