Fixa länkar så folk vet vilken sida de är på.
Hej, jag har ett problem här. Jag skulle vilja fixa mina länkar (som är bilder) så att de visas annorlunda beroende på vilken sida man är på. Ni vet, typ :active-links fast med bilder. Måste man lösa det med javascript/php? Kan inte mycket om sånt, skulle va fint om någon här kan scriptet för det. När jag inspekterar med firebug på sidor som använder den tekniken så har jag upptäckt att de kör med "span" i länkarna, men det kanske inte har nåt med det att göra? Provade söka på "span in links" på google, men blev inge klokare. Hur gör ni? www.nodeone.se har ju t.ex. så. Där lyser "Kunder"-länken upp när man står på den sidan, det är ju jquery, kanske är lättare vet ej.
Edit: Jag fick till det nu lol. Men om jag ska ha rundade hörn då? Då måste jag ha en bild för vänstra delen där kurvan är, och en för högra delen? Är det inte lättare att ta hela bilden som en knapp då och ladda bilden som ska vara active med javascript?
Ical feed
Drupal lägger till en klass
Drupal lägger till en klass till den meny-länk som är aktiv. Bara att lägga till CSS som talar om hur länkar med den klassen ska visas. Det är så Nodeone och alla andra Drupal-platser gör.
Här är CSS från Nodeones sida, här kan du se ett snyggt och enkelt sätt att göra runda hörn med CSS också.
#primary a.active,#primary li.active-trail a {
background: #cef url(images/primary-hover-bg.jpg) repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-bottom: none;
}
Ja, men det där är ju fusk.
Ja, men det där är ju fusk. Eller inte fusk, men det funkar bara i mozilla eller läsare som har stöd för css3. Det kan man ju även se om du går in på nodeone i Explorer, så försvinner hörnen, inte livsförödande precis, men på menyn jag ska ha kan man säga att det är. Provade nyss att leka runt lite med "li" "a" och "span". Standardläge och hover funkade, men inte active, samt så kunde man hålla musen på sidorna om knappen så blev endast hörnen highlightade - vilket inte var så snyggt. Fan, jag verkar inte kunna hitta nån annan lösning än att köra moz-border-radis och border-radius.. :/
En sökning på rounded corners
En sökning på rounded corners css gav en del matnyttiga tips om hur du gör rundade hörn med CSS. Det är oftast inte konstigare än en massa nestlade taggar med bakgrundsbilder. En väldigt massa taggar om du också vill kunna expander i höjdled.
Du skriver att du kan tänka dig applicera effekten med javascript. I så fall kanske Curvy Corners kan vara något? Jag har ingen egen erfarenhet av just det biblioteket, men Curvy Corners ser trevlig ut och är LGPL-licensierad. Den verkar också använda CSS3 men bara för de webbläsare som stöder det. I annat fall manipulerar den säkert DOM:en och wrappar dina saker med divvar som den sedan CSS:ar.
Så länge rundade hörn inte är kritiskt för användarupplevelsen tycker jag att det är renare och bättre att använda CSS3 än att skapa JS-beroende. Rent pragmatiskt är dock oftast bäst att smutsa ner (X)HTML:en och köra CSS-div-wrap-metoden.
Tobias Sjösten