Alt har en begynnelse…

Archive for the ‘Meny’ Category

You are currently browsing the archives for the Meny category.

4 mar 2010

Design: Meny “fane”

Vanskelighets grad: Enkelt.

Da prøver vi oss på en meny til, det er stort sett noe alle ønsker.

Denne gangen her skal vi prøv å få til en slik meny. OG NEI det er ikke så vanskelig som du tror

Passer ikke farge valget ? ikke noe problem du går nemlig inn på denne siden http://www.tabsgenerator.com/ og lager dine egne knapper, er gjort på 1-2-3. Last ned bildene til datamaskinen din, og last dem opp igjen på http://tinypic.com og laster det opp. Kopier ut adressen til bildet for det trenger du etter på.

Når jeg sier “bildene” så holder det med et bilde ( en knapp ) men hvis du feks vil at den skal skifte farge når du holder musen over må du lage to bilder.

Først går vi inn i stilsettfilen, helt nederst i den setter vi inn koden under. Ta med deg alt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.tsmenyfane{

float: left;

width: 100%;

margin-top: 20px; /* vi lagger et lite mellomrom opp til header, ser finere ut da */

margin-left: 10px; /* denne flytter menyen litt lenger inn på siden, litt forskjellig fra mal til mal */

background: transparent;  /* sett denne til en fargekode hvis du vil  ha en annen farge enn bakgrunnen på bloggen */

}

.tsmenyfane a {

display: block; /* denne må du ikke røre ;) */

padding-left: 10px; /* justerer teksen lenger mot høyre */

width: 130px; /* bredden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å flytte inn teksten på linjen over */

padding-top: 10px; /* justerer teksten lenger ned */

height: 30px; /* høyden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å  flytte ned teksten på linjen over */

background: url( http://i46.tinypic.com/2s68shf.png ); /* "knapp" bildet  */

font-size: 20px; /* størrelsen på fonten */

color: #000; /* fargen på teksen */

margin-right: 10px; /* hvor stor avstand du skal ha mellom knappene */

float: left;

text-decoration: none; /* sier bare at det ikke skal være linje under linken */

}

/* delen under forandrer bildet når du holder musen over, hvis du  ikke ønsker dette så fjern denne delen */

.tsmenyfane a:hover, .tsmenyfane .preload{

background: url( http://i49.tinypic.com/35a3thj.png ) no-repeat; /*  knappen forandrer seg til denne når du holder musen over */

}

Du ser at det er to forskjellige adresser til tinypic.com i koden over. Den første er til bildet som skal vises i menyen, det andre er til hvordan knappen skal se ut når noen plassere musen over. Sett inn linkene til de knappene du har fikset selv. Koden over passer til knapper som er 40 høy og 140 bredd, har du andre størrelser på knappene må du tilpasse koden over. Er ganske greit forklart så det skulle ikke være noe problem.

Lagre. Du skal ikke se noe forskjell på siden enda, hvis du gjøre det så har du gjort noe feil! Tilbake still designet og prøv igjen.

Når det er gjort så skal vi putte inn litt kode i malen . Det første du må gjøre er å finne linjen:

Over den linjen limer du inn koden som står under her:

1
2
3
4
5
6
7

<!-- Meny start -->

<div class="tsmenyfane">

<a href="/">Forside</a>

<a href="LINKEN">NAVN</a></div>

<!-- Meny slutt-->

Lim inn alt. På linjen som det står LINKEN på kan du kopiere opp så mange ganger du vil, LINKEN byttes ut med adressen til innlegge/kategorien som du vil skal komme opp når noen trykker på NAVN. NAVN byttes ut med navnet du vil ha på knappen.

Trykk på forhåndsvisning.
Hvis du er fornøyd så lagrer du. For at menylinjen skal vises heletiden må den siste delen også limes inn i malene “innlegg”, “kategori” og “Arkiv”. Da tar du bare koden som du nettopp limte inn i malen og kopierer den inn i de andre.
Hvis det er noe du ønsker å forandre på å så se på linjene i stilsettet, har skrevet forklaringer på alle linjene. Noe du ikke får til å legg igjen en melding her så skal jeg sjekke det ut.

Lykke til

4 mars, 2010 at 4:20 by Tronds

Posted in Design, Meny, html/css | 8 Comments »

10 jul 2009

Design: Meny ( dropdown )

Stine ( http://stinesandberg.blogg.no/ ) ønsket seg dropdown menyer så da prøver vi på det.

Dette er noen helt enkle som du kan utforme slik du vil. Her finner du en demo av den menyen som er vist her: http://www.lostdot.com/testdesign/dropdown/

Vanskelighetsgrad: Litt innsikt i html og tungen rett i munnen.

Først skal vi ha noe inn i “stilsett” filen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

#pad {height:140px;}

/* ================================================================

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html

is available at http://www.cssmenus.co.uk

Copyright (c) 2009- Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

#menu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#menu li {float:left; margin-right:1px;}

#menu li a {display:block; float:left; height:40px; line-height:40px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}

#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}

#menu li:hover {position:relative; z-index:200;}

#menu li:hover > a {color:#fff; background:#c60;}

#menu li:hover > a.sub {color:#fff; background-color:#c60;}

#menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;}

#menu :hover ul {left:0; top:40px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */

#menu ul,

#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#menu :hover ul :hover ul

{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#menu :hover ul li {margin:0; border-top:1px solid #666;}

#menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}

#menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;}

#menu :hover ul :hover {background-color:#c60; color:#fff;}

#menu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#menu :hover ul li.currentsub a {background:#840; color:#fff;}

#menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;}

#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}

#menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}

Lagre og forhåndsvisning. Ikke noe forskjell sier du ? helt rett, skal ikke se noe forskjell enda.. I noen sammenhenger kan du se forskjell, dette kommer av at du kanskje har en “meny” kode som bruker den koden du puttet inn nå.

Da er tiden kommet til at du må bestemme deg hvor du vil ha menyen,

Gå inn på maler:

Se etter en linje som ser slik ut ( kan være litt forskjellige fra design til design ):

hvis du plasserer koden under, rett etter denne linjen vil du få menyen under headeren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<ul id="menu">

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

    <li><a href="#"><strong>Om meg</strong></a></li>

    <li><a class="sub" href="dropdown.html"><strong>Kategorier</strong><!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]>

<table>

<tr>

<td><![endif]-->

<ul>

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

    <li><a class="fly" href="#url">Ferie<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]>

<table>

<tr>

<td><![endif]-->

<ul>

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

    <li><a href="#url">Høst</a></li>

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

</ul>

<!--[if lte IE 6]></td>

</tr>

</table>

</a><![endif]--></li>

    <li><a class="fly" href="#url">Blogger<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]>

<table>

<tr>

<td><![endif]-->

<ul>

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

    <li><a href="#url">Design hjelp</a></li>

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

</ul>

<!--[if lte IE 6]></td>

</tr>

</table>

</a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td>

</tr>

</table>

</a><![endif]--></li>

    <li><a href="#"><strong>Kontakt meg</strong></a></li>

    <li><a href="#"><strong>Hjelp?!</strong></a></li>

</ul>

Bytt ut det du vil med dine valg. Dette kan være utrolig vanskelig for noen som ikke kan html/css. DERfor vil jeg i løpet av de nærmeste dagene ordne til et side der dere kan skrive inn meny valg og koden dere skal lime inn i menyen vil automatisk bli laget til.

Men akkurat nå er det litt seint

Menyen er hentet fra: http://www.cssmenus.co.uk her har de mange menyer som du kan laste ned gratis. bare å bruke samme fremgangsmåten som over.

EDIT: Stine Sandberg har også skrevet sin egen forklaring på sin blogg, hvis du ikke forstår noe av det jeg skriver over så ta en titt innom hennes blogg.

10 juli, 2009 at 3:51 by Tronds

Posted in Design, Meny | 37 Comments »

19 mai 2009

Design: Meny

[EDIT] Tiril ( http://www.tiruuuuul.blogg.no ) lurtepå om hvordan hun forandret fargen på menyen. Har skrevet inn kommentarer i CSS delen. Kommentarene behøves du ikke å fjerne når du limer inn koden

Jeg har vært innom en god del blogger og jeg ser at det er mange som er flink til å ordne designet sitt selv, men de har alltid spørsmål om et eller annet. Derfor tenkte jeg at jeg kunne ordne en kategori der jeg la inn litt design tips. Jeg kan tipsene, men jeg er utrolig dårlig til å fikse design som ser bra ut selv

Vanskelighetgrad: Lett, bare du holder tungen rett i munnen og følger oppskriften.

Det første jeg vil ta for meg er menyer, jeg ser det er mange som lurer på hvordan de kan få seg en meny på siden. Det er faktisk ikke så vanskelig som noen vil ha det til.

Denne gangen skal vi prøve på denne menyen her:

La oss begynne. Jeg har bare erfaring med blogg.no så jeg vil her vise hvordan du setter den inn i desighet der:

Logg deg inn.

Velg “Design”

Velg “Rediger”

Sett inn disse linjene med kode på slutten av “stilsett” filen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

#meny2 {

font-family: Arial, sans-serif;

font-weight: bold;

text-transform: uppercase;

padding: 0;

list-style-type: none;

background-color: #eee;

font-size: 13px;

height: 40px;

border-top: 2px solid #eee;

border-bottom: 2px solid #ccc;

}

#meny2 li {

float: left;

margin: 0;

}

#meny2 li a {

text-decoration: none;

display: block;

padding: 0 20px;

line-height: 40px;

color:  #000; /* Farge på skriften */

}

#meny2 li a:hover, #meny2 li.active a {

background-color: #f5f5f5;

border-bottom: 2px solid #DDD;

color: #999;

}

#meny2_wrapper ul {

margin-left: 12px;

border-top: 2px solid #356AA0;   /* Farge på top-rammen */

border-bottom: 2px solid #204061; /* farge på bunn-rammen */

background: #356AA0; /* bakgrunnsfarge */

}

#meny2_wrapper li a:hover, #meny2_wrapper li.active a {

color: #90CDFF;   /* skrift farge når du holder musen over */

background: #3D7BBB; /* bakgrunnsfarge når du holder musen over */

border-bottom: 2px solid #356AA0;  /* farge på bunn-rammen når du holder musen over */

}

#meny2_wrapper {

padding: 0 16px 0 0;

background: url(rund.png) no-repeat right;

}

#meny2_wrapper div {

float: left;

height: 44px;

width: 12px;

background: url(rund.png) no-repeat left;

}

Her kan du forandre på bakgrunnsfargen, størrelse på fonten. Den må også ha “rund.png” bildet ellers vil du ikke få avrundet kanter. Det som jeg bruker her kan du laste ned her:

Når det er gjort trykk på: “lagre stilsett”

Så trykker du på “Maler”

Her må du finne hvor du vil sette inn meny linjen på siden din. Hvis du ikke er sikker så vil jeg anbefale deg i å sette det etter “breadcrumbs”, dvs etter denne linjen som er slik ut ( kommer litt ann på hvor mye du har forandre på original designet) :

over denne kopierer du inn følgende html kode:

1
2
3
4
5
6
7
8

<div id="meny2_wrapper">

<ul id="meny2">

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

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

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

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

</ul>

</div>

Her kan må du forandre på hva som skal stå på knappene og hvor de skal peke. Feks. hvis jeg ville at “Hjem” skulle peke til min side her så hadde den sett slik ut:

Du kan putte inn flere linjer hvis du ønsker det. Når du er ferdig trykk på “lagre”. Nå har menyen kommet på hoved siden, hvis du vil at menyen skal komme opp når noen er inne på et innlegg å leser må du legge inn siste koden i filen “Enkeltinnlegg” også.

Det er bare å prøve seg frem med forskjellige farger og oppsett.

Hvis det er noe som ikke går eller du får problem er det bare å rope ut, under her

CSS koden og bildet er hentet fra http://13styles.com/category/css-menus/ . Du kan følge oppskriftet min over og kopiere inn andre menyer fra denne siden.

Lykke til.

19 mai, 2009 at 12:27 by Tronds

Posted in Design, Meny, Nerding | 88 Comments »

Archive for the ‘Meny’ Category

Design: Meny “fane”

Design: Meny ( dropdown )

Design: Meny

Legg meg til som venn

Siste innlegg

Siste kommentarer

Emner

Bloggrull