Hur gör man en sån här meny? http://loltarget.com/

28 juni 2012 16:52 | #1 sixten103

Hej, jag undrar hur man gör en sån meny som dom har på denna länken: http://loltarget.com/img/266258/

det jag inte fattar är hur dom får den runt i kanterna.

28 juni 2012 19:43 | #2 villese

(Det är inte jag som har skrivit <span> överallt utan det är någon bugg :S)

Du får använda 'Border-Radius', och koden ska placeras i StilSchemat (CSS KOD).

<span>Om runda hörn</span>

Om Css

<span>#menu</span> <span>{</span>
margin: <span>0 0 10px 0</span><span>;</span>
<span>background-color: white</span>;
<span>-webkit-border-radius: 10px</span>;
<span>-moz-border-radius: 10px</span>;
<span>border-radius: 10px</span>;
<span>-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .20)</span>;
<span>-moz-box-shadow: 0 1px 5px rgba(0,0,0,.20)</span>;
<span>box-shadow: 0 1px 5px</span> <span>rgba(0, 0, 0, .20)</span>;

<span>}</span>

Ovanför ser du koden de använde på den sidan du länkade i ditt inlägg, men den koden du vill åt är:

{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

för det är denna som skapar de runda hörnen, det andra är bara skuggan ;)

Om du letar efter andra lösningar till din hemsida så rekomenderar jag starkt <span>W3Schools</span>, den har hjälpt mig väldigt mycket samtidigt som den ger många bra exempel.

Jag hoppas att det var svaret på din fråga.

/Mvh

Victor Johansson

3 augusti 2012 10:47 | #3 Laxkotlett

Det här är en lösning, och den lösning som har använts på den aktuella sidan som TS visade upp. Men man bör ha i bakhuvudet att CSS3 är såpass nytt att ett flertal äldre webbläsare inte stödjer tekniken - vilket resulterar i att menyn förblir orundad och oskuggad i dessa webbläsare. Det bästa (men mest tidskrävande, då) är ju helt enkelt att skapa en fallback för de webbläsare som inte stödjer CSS3, alternativt att bygga hela menyn i CSS2 från början.

Om du skulle vilja bygga denna lösning i CSS2 så wrappar man helt enkelt ul-elementet med så många div-element som det finns "rundade sidor", sätter en marginal på dessa som motsvarar rundningens pixelbredd/höjd, och lägger in den rundade biten som en icke-repeterande, höger/vänsterjusterad bakgrund i vardera wrappande element. Här får du samma effekt, men det fungerar i ALLA webbläsare.