CSS-meny med expanderbara knappar

Mitt inlägg 5 användbara CSS-tricks visade sig snabbt bli populärt och för att fortsätta att lära ut intressanta CSS-tekniker ska vi gå igenom hur du kan göra en snygg meny i HTML och CSS till din webbplats med expanderbara knappar

Denna teknik är framtagen för de tillfällen då du behöver knappar som kan anpassa sig efter antal tecken i ett element och när både yttersidorna av elementet är unika, till exempel med en avrundning som i mitt exempel.

Skapa knapparna

Eftersom denna meny bygger på grafik är det första steget att öppna ditt grafikprogram (i mitt fall Adobe Photoshop) och skapa utseendet på menyknapparna. För denna meny har jag två bilder – en bild för det det aktiva menyelementet och en bild för resterande element. Det aktiva menyelementet är också tänkt att användas för hover-effekt. Jag har sedan skapat en enda PNG-fil med där båda dessa bilder ligger under varandra.

Anledningen till att båda menybilderna läggs i samma bild är att det är ett effektivt sätt att snabba upp laddningen av en webbplats (genom att minska antal HTTP-requests). Att tänka på är att eftersom denna fil används för alla hörn krävs det att den har en längd som är längre än vad det längsta menyalternativet kommer att vara. När du har gjort en egen bild (eller vill använda min) är det dags att gå vidare till att skriva HTML.

Markup

Inga konstigheter här – en helt vanlig lista med länkar. Det menyalternativ som besökaren befinner sig på har fått klassen aktiv.

<div class="nav">
	<ul>
		<li><a href="#">Hem</a></li>
		<li class="aktiv"><a href="#">Nyheter</a></li>
		<li><a href="#">Arkiv</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">En aningen längre text</a></li>
	</ul>
</div>

CSS

Hittills har det varit relativt enkelt – nu kommer vi till den biten som får betecknas som knepig, att skriva CSS:en som ska användas. Under CSS-koden i inlägget finns några förklaringar till hur allt är uppbyggt.

.nav {
	font:bold 1.1em Arial, Verdana, Helvetica, sans-serif;
	width:100%;
	float:left;
	text-transform: uppercase;
	margin-bottom: 30px;
	border-bottom: 1px solid #d3d3d3;
}

.nav ul {
	margin:0;
   	list-style:none;
	padding:14px 14px 0 10px;
}

.nav a {
	float:left;
   	display:block;
	color:#878787;
	padding:12px 20px 10px 14px;
	background: url(images/navitem.png) no-repeat 100% -39px;
	text-decoration:none
}

.nav li {
   float:left;
   background:url(images/navitem.png) no-repeat 0px -39px;
   margin:0 20px 0 0px;
   padding:0 0 0 9px;
}

/* Klass för att markera det nuvarande menyalternativet */

.nav .aktiv {
   background:url(images/navitem.png) no-repeat 0 0px;
}
.nav .aktiv a {
   background:url(images/navitem.png) no-repeat 100% 0px;
	padding:12px 20px 10px 14px;
	color:#545454
}

/* Hover-effekt */

.nav a:hover {
   color: #545454;
}

• Padding används för att bestämma storleken på knapparna.
• li-elementet används för att visa den vänstra sidan av menybilden,
• Länken utgår från menybildens högra sidan genom positioneringen av bakgrunden till 100% 0.
• Tillsammans blir alltså li-elementet och länken en sammansatt knapp.