webForumDet fria alternativet

Svängd meny - hur skulle Ni göra?

HTML & CSS

12 svar · 613 visningar · startad av Aureola

Medlem sedan okt. 201027 inlägg
Frågan#1

Hej!
Jag sitter och jobbar med ett skolprojekt och har valt att göra en design som kanske inte är helt enkel att koda. Menyn ligger till vänster men knapparna kommer inte att ligga rakt under varann utan längs en svängd båge som fungerar som avgränsare mellan meny och innehåll.
Mina idéer är som följer:
1, Göra en rad rektangulära genomskinliga fyrkanter som ska fungera som behållare, sen placera mina knappar som jag vill inuti dessa. Sist ange klickbar region genom x och y-värden (så att inte hela den genomskinliga rutan blir klickbar utan endast knappen/ikonen).
2. Göra en enda stor genomskinlig bild i PS, vars högra sida är böjd längs bågen, sen placera knapparna efter böjningen.
3. Sköta all placering av knapparna i menyn genom att göra en container-div och sen massa små-div'ar vari knapparna läggs och positioneras inuti dem mha margin.
Grejen är att jag vill kunna ha hover-effekt på menyknapparna. Vet därför inte om de två första alternativen är hållbara, är ganska ny på css.
Nån som kan tipsa mig om hur jag bör gå tillväga?

Jag kan posta screenshot på webbsidan om det behövs, men är ny på forumet så jag vet inte riktigt hur jag gör det än (behöver jag lägga upp det på annan plats först och sen posta länk dit..?)

Tack på förhand för all input!

Medlem sedan sep. 2004828 inlägg
#2

Varför inte bara köra med margin-left på knapparna?

Medlem sedan mars 2004485 inlägg
#3

Aureola skrev:

Jag kan posta screenshot på webbsidan om det behövs, men är ny på forumet så jag vet inte riktigt hur jag gör det än (behöver jag lägga upp det på annan plats först och sen posta länk dit..?)

Nepp det behövs inte, du har lite utrymme på wF som räcker till det mesta.
När du postar kolla under Tilläggsalternativ (nedanför där man skriver in text), där hittar du bland annat en knapp för att hantera bifogade filer.

Medlem sedan okt. 2007446 inlägg
#4

som stefan säger..
gör menyn som en lista och sätt sedan olika mycket marginal på länkarna i den

nånting i stil med:

<ul id="menu">
  <li id="knapp1"><a href="sida1.htm">Sida 1</a></li>
  <li id="knapp2"><a href="sida2.htm">Sida 2</a></li>
</ul>

med denna css

#menu{margin:0; padding:0}
#knapp1{margin-left:0;}
#knapp2{margin-left:10px;}
#menu li a{display:block; width:150px; height:35px;background:#fff url(din knapp-bild)}
#menu li a:hover{background:#fff url(din knapp-bild för hover) ...}

Där har du ett skal att jobba vidare med (mer får du inte eftersom det var en skoluppgift ;) )

Medlem sedan sep. 2004828 inlägg
#5

rhdf, vore det inte en bra grej att samtidigt implementera css-sprites?

Medlem sedan okt. 2007446 inlägg
#6

*host* jomenvisst ;)

Medlem sedan dec. 2009308 inlägg
#7

Hej
Vad menas med css-sprites? inte hört det innan. Nu förstår jag. Hade också börjat på det sättet som rhdf och sedan blir det mer lärorikt för dig själv när du har listat hur du skall göra.

MVH

Buddaz

Medlem sedan juni 20019 519 inlägg
Medlem sedan dec. 2009308 inlägg
#9

Hej
Intressant. Alltid kul när man får lära sig något nytt. Om jag fattar det rätt handlar det om bilder och placering?

MVH

Buddaz

Medlem sedan juni 20019 519 inlägg
#10

Ja, en bild vilket ge ett http-anrop vilket underlättar istället för att hämta x-antal per bild + oftast så tjänar du även på filtstorleken.

Medlem sedan okt. 201027 inlägg
#11

Ja precis... tänkte inte på det =) Tack för svaret.

Medlem sedan okt. 201027 inlägg
#12

Ok, då vet jag till nästa gång! Tackar!

Medlem sedan okt. 201027 inlägg
#13

Ja, ännu bättre att göra det med css för mig som behöver träna på det. Tack så mycket!

253 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
126 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)