Horisontell dropdown meny - genomskinlig

Tips / Direktlänk / / Publicerat: 2010-02-01 @ 18:34:08



Tänkte sakta men säkert hjälpa er lite med designandet och ge lite tips då och då. Först ut är hur man gör en Genomskinlig horisontell dropdown meny.


Bild - http://shortys.se [Min personliga blogg]


1. Kopiera koden i rutan och lägg in den i din Stilmall [Design → Redigera stilmall] glöm inte att Spara.



2. Gå in i dina kodmallar [Design → kodmallar] och klistra in koden i rutan, där du vill ha din dropdown meny



Obs! Glöm inte att lägga in koden i alla dina 4 sidor i kodmallarna (om du vill att menyn ska finnas på alla sidor).

3.
Titta på din design så allting funkar. Nu kan du börja lägga in dina länkar (i kodmallarna). Där det står # ska adressen dit du vill länka stå och där det står "Länk1" är det ordet du länkar. Alltså, vill du länka en person så skriver du bloggnamnet istället för "Länk1" och bloggadressen istället för "#".

Exempel:
<li><a href="#">Länk 1</a></li> = <li><a href="http://shortys.se">Petrahs blogg</a></li>

4. Vill du ha fler länkar och rubriker klistrar du in följande kod som finns i rutan (i dina kodmallar):




- Ny kategori och underlänkar:
Det lägger du in så här:

<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
</li>
<li><a href="#">Kategori 4</a> ← Där lägger du in koden
<ul>
<li><a href="#">Länk 10</a></li>
<li><a href="#">Länk 11</a></li>
</ul>
</li>

</ul>

- Bara en till underlänk:
Det lägger du till så här:
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
<li><a href="#">Länk 10</a></li> ← Där lägger du in koden
</li>





Om du vill ha en genomskinlig dropdownmeny lägger du till denna kod längst ner i koden du la in i stilmallarna:


Lycka till!
Obs!
Jag har inte tid att sitta och hjälpa alla som inte får det att funka. Jag är bara till för att hjälpa er en bit på traven. Jag tackar designadinblogg.se där jag lärt mig det mesta jag kan. Läs Designadinblogg's version av inlägget om du inte förstår min.
© Design | Copyright by Shorty


Postat av: Anonym

för du gör verkligen bra designer :)

kram!

2010-02-01 @ 19:28:07
URL: http://betweens.blogg.se/
Postat av: anna

Måste säga att din version var bättre, lättare att förstå! :)

2010-02-02 @ 12:34:42
Postat av: DESIGN BY SHORTY

SVAR ANNA;



aw tusentack :) kul att höra! Får man se resultatet :)?

2010-02-02 @ 12:41:14
URL: http://designbyshorty.blogg.se/
Postat av: Linn

Sv: Den 2a Augusti, 2010 ;} Nu i år då, hehe :) Glömmer att det inte är 2009 längre! ;D

2010-02-19 @ 10:02:55
URL: http://linnlowes.com
Postat av: CJ

Vilket bra inlägg! Du verkar vara grym på det här med koder och design. Jag har listat ut hur man fixar en drop-down-meny under/över headern MEN hur gör jag för att få in själva menyn i drop-down-menyn? Så att inlägg, kategorier osv hamnar där? Tacksam för svar. :)

2010-05-12 @ 00:07:50
URL: http://cjskonstigheter.blogg.se/
Postat av: Elin

hur kan man göra så att dropdown menyn kommer i mitten, t.ex. ovenför headern.

tacksam för svar :))

2010-06-13 @ 10:05:09
URL: http://sofiaelinn.blogg.se/
Postat av: Elin

om man nu har lagt till en sån här dropdown-meny.

kan man då ta bort den vanliga menyn , och hur gör man i så fall ?

om du förstår vad jag menar ? :))

2010-06-14 @ 19:24:51
URL: http://sofiaelinn.blogg.se/
Postat av: Anonym

vilken kod ;o

2010-06-24 @ 22:24:39
Postat av: Patricia

Hej, har haft drop-down-meny förut, så de va inte så svårt att fixa, men hur gör jag för att få länkarna genomskinliga? Länken står ovan i ditt inlägg, men de funkar inte...?! :O

Tacksam för svar! :)

2010-07-12 @ 20:27:09
URL: http://ssandrapatricia.blogg.se/
Postat av: Patricia

Svar: Men jag får ändå inte det att bli genomskinligt i/på länkarna :( Vad gör jag för fel...? :(

2010-07-13 @ 03:27:09
URL: http://ssandrapatricia.blogg.se/
Postat av: isabelle

Hej! Jag försöker göra en dropdown meny, men det fungerar inte utan blir bara som en punktlista. Vad kan det bero på? Hittar inte felet..



MVH Isabelle

2010-07-16 @ 13:47:34
Postat av: isabelle

Oj, såg just din kommentar att du inte kan hjälpa individuellt SORRY!

2010-07-16 @ 13:48:40
Postat av: Zabbe

Hejsan!

Hur får man in själva menyn alltså senaste inlägg/kategori/arkiv/länkar i dropdown menyn? Skulle vara snällt om jag fick hjälp =D Försökt ett bra tag nu.. :S

2010-08-06 @ 21:57:52
URL: http://holmsabina.blogg.se/
Postat av: sabbi

vart någonstans ska man lägga in koderna? fattar inte riktigt, hehe

2010-08-29 @ 18:26:19
URL: http://subbsabb.blogg.se/
Postat av: Elsa

Vet att du inte kanske svarar på detta men, jag vill varken ha menyn år vänster eller höger utan i mitten. Och det funkar inte att skriva center i stilmallen där det står right. Vad ska jag göra?! Tacksam för svar! Kram! ;}

2010-09-20 @ 11:38:46
URL: http://elsaglans.blogg.se/
Postat av: HANNA

förlåt om du inte har tid,

men jag undrade över om man kunde centrera menyn? jag har fått den över headern, precis som jag vill, men jag får inte til ldet där med att centrera den. tacksam för svar!

2010-11-04 @ 13:43:22
URL: http://hannalovisasol.blogg.se/
Postat av: eliasphoto-

Hur har du fått "dropdown" där du lägger in koderna?

Tacksam för svar, bråttom!!

2010-11-10 @ 19:14:16
URL: http://fotograbben.se
Postat av: Jane Emmanuela

Jeg har fått til drop down menyen, men jeg lurte på om du vet hvordan jeg får lagt den sånn at den ligger midt under banneren og ikke helt mot venstre, vet du det? Hadde satt pris på svar :)

2010-11-28 @ 17:58:14
URL: http://www.janeemmanuela.blogg.no
Postat av: viktoria

opacitet-grejen funkade inte :(

2010-11-30 @ 19:21:59
Postat av: viktoria

jag fattar inte opacitet-grejen, ska koden ligga i stilmallen elr kodmallen,och vart ?

2010-11-30 @ 19:26:35
Postat av: djoikiis

precis vad jag letade efter! Men hur gör man om man vill ha den i mitten istället? Inte till höger eller vänster? :) Kram!

2010-12-23 @ 10:36:19
URL: http://djoikiis.blogg.se/
Postat av: SoFia

Tack för hjälpen!

2010-12-24 @ 03:31:43
URL: http://wannabeastar.blogg.se/
Postat av: Patricia

åå tack så jätte mycket de gick bra för mig :d

2011-01-08 @ 12:25:31
URL: http://paaatows.blogg.se/
Postat av: emma

Det funkar inte för mig, har du lust att hjälpa mig? kram!

2011-01-08 @ 18:08:39
URL: http://eemmahagelin.blogg.se/
Postat av: Sandra

Hej! Enkelt och simpelt förklarat, funkade skitbra...först, men nu har liksom menyn lagt sig fel...den låg bra centrerad först, vet inte vad jag tolkat fel i koderna...skulle uppskatta om du kunde hjälpa mig :) tack

2011-01-12 @ 21:49:57
URL: http://paintthenurserypink.blogg.se/
Postat av: CillaaH ♥

hur gör jag för att få in själva menyn i drop-down-menyn? Så att inlägg, kategorier osv hamnar där?



Och min största fråga är, hur spar jag mina inlägg i kategorerna i dropdown menyn? finns bara allmänt jag kan välja. förstår du vad jag menar?



ursäkta frågan men tacksam för svar

2011-01-30 @ 14:03:06
URL: http://cillaah.blogg.se/
Postat av: izabell

Hur lägger man in tex i en sån där ruta där alla koder är i :)?

2011-02-01 @ 21:53:09
URL: http://izabellbackman.blogg.se/
Postat av: johanna

FY vilket bra inlägg. TACK SÅ MYCKET! hur gör man sånadär rutor där du skrivit in texten?

2011-03-01 @ 21:12:46
URL: http://johannakarlstroms.blogg.se/
Postat av: Alice

Hur har du gjort för att gå rundade hörn på den?? dropdown menyn alltså

2011-04-04 @ 10:30:28
URL: http://bilderbyalice.blogg.se/
Postat av: Saga

Hej! guiden verkar jättebra men du har visst högerklicksskydd så jag kan nt kopiera koden ;(



Har du nåt tips på nån annan som har en sån här guide? : )

2011-04-13 @ 10:40:03
URL: http://sagzz.blogg.se/
Postat av: amii ♥

jättebra inlägg, hjälpte verkligen, men det funkar inte klicka på menyerna, när jag klickar på själva "rubriken" så kommer ju listan upp, när jag har musen på listan så går det inte, listan försvinner, sen har jag testat så om och om igen, fast det funkar inte >:

2011-04-22 @ 20:50:13
URL: http://amilija.blogg.se/
Postat av: Z A N D R E A ´S . ♥ v ä r l d ♥

Hej. Tacksam om du svarar. Jag vill ha en horisontell dropdown meny men jag får inte till länkarna till drop down, vad blir fel!? kolla in hur det blir: http://zandrea.blogg.se/design vad fasen att jag itne klarar av det, snälla hjälp mig!!! :(

2011-05-26 @ 11:31:11
URL: http://zandrea.blogg.se/
Postat av: elin

Hej!

Jag underar hur man kan flytta runt dropdown menyn :)? liksom lägga den precis som man vill ha den :)

2011-05-27 @ 15:59:51
URL: http://byelin.blogg.se/
Postat av: Linn

Superbra förklarat! Tack så mycket <3

2011-07-28 @ 20:57:08
URL: http://sofiaohlin.blogg.se/
Postat av: Vackraste

Hej, jo, jag fattar liksom inte var man ska sätta in den första koden. Sen, om man vill få den där uppe, ovanför headern, hur gör man då? :)

2011-08-12 @ 08:50:21
Postat av: alice

det blir bara som en punkt lista, hur gör jag då?

tacksam för svar!

2011-08-13 @ 13:44:43
URL: http://aaliceandersson.blogg.se/
Postat av: islandsekipagen

när jag gjorde första gången av don beskrivning blev allt super bra! Vart skit nöjd med bloggen och nu när jag har haft den designen i 1 månad så mitt i allt blev allting konstigt. Har gjort om och försökt igen och gjort allt jag kommit på. Vill verkligen ha just din dropdown meny för de är den bästa och snyggaste jag har hittat och jag har kollat på alla jordens dropdown menyer. Så snälla hjälp mig, Hur ska jag göra för att bloggen ska bli normal?

2011-09-06 @ 13:58:43
URL: http://islandsekipagen.blogg.se/
Postat av: julia

Detta kan jag - men grejen är att jag vill ha en annan storlek på texten som kommer fram när man håller över t.ex kategorierna.. de texten och storleken är ju lite stor som själva rubrikerna.. =) har prövat mig fram men, hur gör aman? KRAM

2011-10-13 @ 11:53:43
URL: http://juliamartinsson.blogg.se/
Postat av: Tolis

Man kan ju inte kopiera koderna ju, det går inte att högerklicka!! :((

2011-12-21 @ 18:28:23
URL: http://carolinetolshagen.blogg.se/
Postat av: sally

hej gjorde allt som du sa men mitt blev såhär: http://sallyplace.blogg.se/focus/



vad ska jag gör för det ska bli dropdown?

kramar!

2012-01-29 @ 11:26:51
URL: http://sallyplace.blogg.se/
Postat av: Kitiwara

Hej, jag fattar typ ingenting hur man ska göra så jag undrar om du kan hjälpa mig? Du får såklart en fet länk på min blogg om du gör det :D

Kram

2012-02-11 @ 17:12:51
URL: http://kitiwara.blogg.se/
Postat av: malin

om jag vill få menyn bredare ska jag lägga till fler ul och li blir det större mellanrum då?

2012-04-08 @ 20:28:56
URL: http://mmulle.blogg.se/
Postat av: Anonym

Tack så mycket för hjälpen! <3<3<3 Bra blogg du har! <3 :D:D :)

2012-05-12 @ 18:33:40
URL: http://ariems.blogg.se/
Postat av: Anna

Det verkar inte som att länken som gör länkarna genomskinliga fungerar.. :/

2012-05-22 @ 20:10:11
URL: http://annasfoton.blogg.se/test
Postat av: Dennis Foto

TACKAR!!
Detta hjälpte verkligen!!!!!!!!!!!!!!

Svar: Kul att kunna hjälpa till fastän jag inte uppdaterar bloggen längre! :)
Petrah aka. Shorty

2012-06-23 @ 11:20:08
URL: http://www.dennisportfolio.blogg.se
Postat av: marlene

för det första, jättebra guide och bra förklarat :)
Allt funkar för mig, förutom att man inte kan klicka på länkarna. Alltså när jag drar musen över "rubrkerna" i dropdown menyn så kommer listan ner med alla kategorier osv, men så går det inte att klicka på kategorierna! Ingenting händer :( Vad kan det vara som är fel? Tacksam för svar :)

Svar: tack :) jag gick in på din blogg och kikade! Där funkar det ju :)?
Petrah aka. Shorty

2012-07-10 @ 14:49:01
URL: http://maarlenez.blogg.se
Postat av: T I L D A

Man kan inte kopiera koderna.. Kan du ge dom till mig i en kommentar på min blogg istället? Tack snälla :)

Svar: det ska gå att kopiera, tyvärr får du gå in på Designadinblogg.se och försöka istället! Blir för krångligt att skriva koderna i kommentarerna tyvärr :/ lycka till.
Petrah aka. Shorty

2012-07-16 @ 19:00:57
URL: http://ttildan.blogg.se



» Bloggdesign:
Design och layout är gjord av mig. Det är inte tillåtet att kopiera något utan min tillåtelse. Jag ser helst att ni berättar om ni använder er av nån av mina gratisdesigner, som det minsta ni kan göra tillbaka, Fair and square ;p?

Jag gör inte personliga designer gratis!

» Bilder:
De bildredigeringsprogrammen jag använder är; Photoshop Cs4, Photoscape och Picasa.

» Regler för kommentarer:
Spamma inte min blogg med reklam, varken om gratissidor eller din frågestund. Kommentarer som anses som stötande kommer raderas.

Väljer du att kommentera anonym vill jag att du antingen lämnar en mailadress så jag kan svara på din kommentar eller så kikar du in bland kommentarerna i det inlägg du kommenterade i så har du svar där!

» Kontakt:
[Kontaktformulär] - Mailen kollas dagligen!




Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Related Posts with Thumbnails