Header Ads

Drop down meny

Edit: Det har visat sig bli problem att visa underlänkarna i Internet Explorer. Jag arbetar på problemet och återkommer med uppdaterad kod så snart som möjligt!
-----------------------------

Vill du ha en drop down meny som du själv kan ändra färger och utseende på? Då har jag en bra kod för dig som använder någon av de nya designmallarna ( de du hittar i Malldesignern ).

Du lägger in all kod direkt i kodmallen, men är du bara lite nogrann så är det inte svårt alls.


Börja med att öppna din kodmall, gå till adminpanelen och välj Mall - Redigera HTML.


När du öppnat din kodmall ska du först lägga in css-delen, det är den som styr hur menyn ser ut.
Tryck Ctrl och F på ditt tangentbord för att få fram en sökruta.

I rutan ska du klistra in:  ]]></b:skin>  och sen trycker du Enter på tangentbordet för att söka. Nu kommer du rätt direkt i mallen.

Ovanför ]]></b:skin>  lägger du in den här koden:

/*!!!!!!!!!!! NodeFire Core CSS [Redigera inte här!] !!!!!!!!!!!!!*/
/*[START-QCC]*/.qmclear{}.qmmc:after{content: ".";display:block;height:0px;clear:both;overflow:hidden;}.qmmc img {border:none;}.qmmc, .qmmc>span, .qmmc>a, .qmmc div>a, .qmmc dd>a, .qmmc li>a, .qmmc div>span, .qmmc dd>span, .qmmc li>span, .qmmc div.qmsub, .qmmc dl, .qmmc dd, .qmmc .qmsub>li, .qmmc ul.qmsub {text-align:left;outline:none;font-weight:normal;text-decoration:none;font-family:Arial;font-size:14px;line-height:normal;padding:0px;margin:0px;color:#333;background-color:transparent;}.qmmc .qmiefix {z-index:0;}.qmmc, .qmmc .qmsub, .qmmc .qmmulti{list-style:none;padding:0px;margin:0px;}.qmmc .qmdivider{display:block;border-width:0px;border-style:solid;position:relative;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;}.qmmc {position:relative;zoom:1;}.qmmc .qmitem-m, .qmmc>li {display:block;white-space:nowrap;position:relative;}.qmmc .qmitem-s, .qmmc .qmsub>li {display:block;white-space:nowrap;position:relative;}.qmmc .qmsub{visibility:hidden;position:absolute;z-index:10;left:100%;top:0px;}.qmmc div.qmsub{left:0px;}.qmmc .qmcbox{cursor:default;display:block;position:relative;white-space:normal;}.qmmc .qmmulti{display:block;float:left;position:relative;}.qmmc .qmmulti dd{margin:0px;padding:0px;position:relative;}.qmmc.qm-horizontal-c>li, .qmmc.qm-horizontal-c .qmitem-m, .qmsub.qm-horizontal-c>li, .qmsub.qm-horizontal-c>.qmitem-s, .qm-horizontal-c>.qmtitle, .qm-horizontal-c>.qmdivider, .qm-horizontal-c>.qmcbox, .qm-horizontal-c>li>.qmtitle, .qm-horizontal-c>li>.qmdivider, .qm-horizontal-c>li>.qmcbox {float:left;}.qm-horizontal-c>li>.qmsub  {left:0px;top:100%}.qmmc li:hover>.qmsub, .qmmc dd:hover>ul.qmsub {visibility:inherit;}.qmmc .qmml0 {z-index:99;}.qmmc .qmml1 {z-index:98;}.qmmc .qmml2 {z-index:97;}.qmmc .qmml3 {z-index:96;}.qmmc .qmml4 {z-index:95;}.qmmc .qmml5 {z-index:94;}.qmmc .qmml6 {z-index:93;}.qmmc .qmml7 {z-index:92;}.qmmc .qmml8 {z-index:91;}.qmmc .qmml9 {z-index:90;}


/*!!!!!!!!!!! NodeFire Styles [Nedan kan du redigera!] !!!!!!!!!!!*/



/* NodeFire 0 */

/*"""""""" Övre raden """"""""*/
#qm0
{
width:100%;  /* Vidd på menyn */
padding:6px 0;
background: #45484d;
        background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
        background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: -o-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: linear-gradient(top,  #45484d 0%,#000000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
border-width:1px;
border-style:solid;
border-color:#000000;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
-ms-border-radius:4px 4px 4px 4px;
-o-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
}


/*"""""""" Övre radens länkar """"""""*/
#qm0 .qmitem-m
{
padding:7px 25px 7px 9px;
background-color:transparent;
color:#EAEAEA;
font-family:Verdana;
font-size:14px;
text-decoration:none;
font-style:normal;
font-variant:small-caps;
border-width:1px 1px 0px;
border-style:solid;
border-color:transparent;
border-radius:4px 4px 0px 0px;
-moz-border-radius:4px 4px 0px 0px;
-webkit-border-radius:4px 4px 0px 0px;
-ms-border-radius:4px 4px 0px 0px;
-o-border-radius:4px 4px 0px 0px;
-khtml-border-radius:4px 4px 0px 0px;
}


/*"""""""" Övre raden - hover """"""""*/
#qm0 .qmitem-m:hover
{
background-color:#D3558E;
text-decoration:none;
}


/*"""""""" Övre raden - aktiva länkar """"""""*/
#qm0.qmmc .qmitem-m.qmactive, #qm0 li:hover>.qmitem-m.qmparent, #qm0 dd:hover>.qmitem-m.qmparent
{
z-index:100;
background-color:#D3558E;
color:#333333;
text-decoration:none;
border-color:#000000;
}


/*"""""""" Underraderna """"""""*/
#qm0 .qmsub
{
padding:10px 5px;
margin:-1px 0px 0px;
background-color:#EAEAEA;
border-width:1px;
border-style:solid;
border-color:#000000;
border-radius:0px 4px 4px 4px;
-moz-border-radius:0px 4px 4px 4px;
-webkit-border-radius:0px 4px 4px 4px;
-ms-border-radius:0px 4px 4px 4px;
-o-border-radius:0px 4px 4px 4px;
-khtml-border-radius:0px 4px 4px 4px;
box-shadow:2px 2px 2px rgba(121, 121, 121, 0.7);
-moz-box-shadow:2px 2px 2px rgba(121, 121, 121, 0.7);
-webkit-box-shadow:2px 2px 2px rgba(121, 121, 121, 0.7);
-ms-box-shadow:2px 2px 2px rgba(121, 121, 121, 0.7);
-o-box-shadow:2px 2px 2px rgba(121, 121, 121, 0.7);
-khtml-box-shadow:2px 2px 2px rgba(121, 121, 121, 0.7);
}


/*"""""""" Underraderna """"""""*/
#qm0 .qmsub .qmmulti
{
padding:10px;
}


/*"""""""" Underlänkar """"""""*/
#qm0 .qmitem-s
{
padding:4px 40px 4px 5px;
color:#2B2B2B;
font-size:13px;
text-decoration:none;
border-width:1px;
border-style:solid;
border-color:#EAEAEA;
border-radius:2px 2px 2px 2px;
-moz-border-radius:2px 2px 2px 2px;
-webkit-border-radius:2px 2px 2px 2px;
-ms-border-radius:2px 2px 2px 2px;
-o-border-radius:2px 2px 2px 2px;
-khtml-border-radius:2px 2px 2px 2px;
}


/*"""""""" Underlänkar - hover """"""""*/
#qm0 .qmitem-s:hover
{
background-color:#D3558E;
color:#FFFFFF;
text-decoration:none;
border-color:#000000;
}

/*[END-QS0]*/

Nu ska du istället klistra in:  <div class='content-outer'> i din sökruta och trycka Enter. Har du stängt den redan?
Ctrl och F öppnar sökrutan på nytt!

Nu ska du lägga in din länk-kod under <div class='content-outer'>



<!-- NodeFire Structure [Menu 0] -->
<ul id="qm0" class="qmmc qm-horizontal-c">

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 1</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 1a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 1b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 1c</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 1d</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 1e</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 2</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 2a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 2b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 2c</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 3</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 3a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 3b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 3c</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 4</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 4a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 4b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 4c</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 5</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 5a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 5b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 5c</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 6</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 6a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 6b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 6c</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 7</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 7a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 7b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 7c</a></li>
</ul></li>

<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 8</a>

<ul class="qmsub">
<li><a class="qmitem-s" href="http://webadress">Under 8a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 8b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 8c</a></li>
</ul></li>

</ul>

<!-- Create Menu Settings: (Int Menu ID, Object Literal Settings - {showDelay:int, hideDelay:int, interaction:string}) [interaction options... 'hover', 'all-always-open', 'click-all', 'all', 'all-always-open', 'main')] -->
<script type="text/javascript">qm_create(0,{showDelay:200,hideDelay:200,interaction:'hover',autoResize:false});</script><!--[END-QM0]-->


Ser du att det står Rubrik 1, Rubrik 2 och så vidare? Det är överlänkarna, de som ligger i den horisontella menylisten och som alltid syns. Varje rubrik har ett antal underlänkar, de heter Under och så siffran från överlänken samt a, b, c och så vidare.
Rubrik 3's underlänkar heter alltså Under 3a, Under 3b och Under 3c. Det här är bra att veta så att du lägger in dina länkar på rätt plats, där du tänkt dig.

Du byter förstås ut respektive länks Rubrik mot den rubrik du vill ha och http://webadress mot den länk du vill använda. Akta så att du inte råkar radera "tecknen" (redigerar du menyn senare så byter bloggers kodmall ut " mot ', det är helt okej och som det ska vara. Akta även dessa ' ' tecken.)

Du kan radera de länkar och underlänkar du inte vill använda.

För att radera en ensam underlänk raderar du en sån här rad, från den första <li>taggen till den sista </li>taggen:

<li><a class="qmitem-s" href=" http://webadress ">Under 1a</a></li>

För att radera alla underlänkar under en rubrik raderar du från <ul>taggen till den avslutande </ul>taggen, så här (akta den avslutande </li>taggen som kommer efter </ul>, den ska vara kvar) :


<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 2a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 2b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 2c</a></li>
</ul>

För att radera en hel rubrik inklusive underlänkar raderar du så här:


<li><a class="qmitem-m qmparent" href=" http://webadress ">Rubrik 2</a>

<ul class="qmsub">
<li><a class="qmitem-s" href=" http://webadress ">Under 2a</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 2b</a></li>
<li><a class="qmitem-s" href=" http://webadress ">Under 2c</a></li>
</ul></li>


Nu när du lagt in de länkar du vill ha vill du säkert redigera färgerna också.
Då ska du titta på den första koden du la in, css-delen.

Den översta delen har jag markerat Redigera inte här! Hoppa över det stycket tills du kommer ner till min markering Nedan kan du redigera! Under den raden kan du ändra i menyns utseende.

Om du vill byta bakgrundsfärg på själva menyraden till en enfärgad variant kan du radera de röda raderna (som är en gradient):



/*"""""""" Övre raden """"""""*/
#qm0
{
width:100%;  /* Vidd på menyn */
padding:6px 0;
background: #45484d;  /* spara den här bakgrundsraden */
        background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
        background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: -o-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: -ms-linear-gradient(top,  #45484d 0%,#000000 100%);
        background: linear-gradient(top,  #45484d 0%,#000000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
border-width:1px;
border-style:solid;
border-color:#000000;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
-ms-border-radius:4px 4px 4px 4px;
-o-border-radius:4px 4px 4px 4px;
-khtml-border-radius:4px 4px 4px 4px;
}


Då har du bara en bakgrundskod kvar - koden background: #45484d; - där kan du byta ut färgkoden!
Resterande kod kan du testa att ändra i som du tycker, fråga gärna här i tråden om du undrar något.

Skulle menyn hoppa snett eller se tokig ut så kom tillbaka till det här inlägget och kopiera om grundkoderna och klistra in över de du ändrat i. På så sätt återställer du enklast menyn och kan börja om. Att börja reda i en kod man ändrat en del i kan ta mer tid än vad det är värt!

Din meny kommer att lägga sig i toppen på din "content", ovanför din rubrik och ev header.
Så här ser resultatet ut i grundversionen, men använder du Internet Explorer kommer du inte att se de rundade hörnen eller skuggan under dropdown-delen. Däremot kommer dina besökare som använder andra webläsare att se de här effekterna så de kommer ändå till nytta ;-)

Lycka till!




Behöver du hjälp?
Ställ dina frågor i supporttråden på Forumet! Klicka här!

14 comments:

  1. Riktigt snygg meny, undra om man kan göra om den så den funkar för blogg.se med...

    ReplyDelete
  2. Har jag redan testat :-) Den funkar! Men du - jag pm'ar dig med länken till gratisprogrammet jag gjorde den i. Så kan du skapa något precis som du vill!

    ReplyDelete
  3. Åh! jag tror jag ska byta ut den jag har till denna istället! Den här var mycket snyggare! :)

    ReplyDelete
  4. Hej! Hur ändrar man längden på drop down menyn? Min går lååångt utanför storleken på min blogg nu, så hur förminskar man den?

    ReplyDelete
  5. Jag gissar att det är vidden du vill ändra? Då ändrar du de 100% den är på just nu, precis i början på den css man får ändra alltså. Du kan byta ut 100% mot så många pixlar du vill ha istället om du föredrar, t.ex. 900px

    ReplyDelete
  6. Vilket gratisprogram är det som används? /Daniel

    ReplyDelete
  7. Mycket bra. Har länge väntat på en dropdown meny. En fråga, kan man få menyn att ligga under bloggrubriken (headern)?

    ReplyDelete
  8. Kan man inte lägga den under Headern/rubriken?

    ReplyDelete
  9. Eftersom det inte går att lägga in html-koder i kommentarerna här på Fixabloggen har jag startat en supporttråd på forumet. Kika där!

    Supporttråd

    ReplyDelete
  10. Riktigt snyggt ♥......

    ReplyDelete
  11. Hei ! Jeg sliter med bloggen min . Kommentar feltet og følger feltet er borte . Hva kan jeg gjøre med det ???

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Hej, jag undrar om du kan hjälpa mig att lägga till en dropdown meny under min header? En med vit bakrund och svart text ( new times roman eller hur det nu stavas ) Jag försökte själv men jag klarade det inte. Eller om du ger tips. Tack på förhand!

    ReplyDelete
  14. Har ni löst problemet att visa underlänkarna i Internet Explorer?
    Skulle så gärna vilja att det fungerade på min blogg.. :)

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------