Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Multidropdown meny

Om man vill ha en dropdownmeny men har väldigt många kategorier och vill ha det mer städat än bara en massa kategorier som dimper ner när användaren hovrar med musen över “kategorier” (till exempel) så kan man använda en “multidropdown” för att strukturera upp det. Det betyder att man helt enkelt kategoriserar sina egna kategorier i över- & underkategorier (se bilden). Tyvärr så sköter den inte sig självt när det kommer till blogg.se’s programmeringssyntax av arkivet, vilket betyder att om man vill använda denna kod på arkivet så får man lägga in det manuellt (alltså använda kodmallskoden, göra varje “Delkategori” till ett år, och sedan underkategorierna till månader som man lägger in efter hand).

Stilmallskod:

#multi-navbar, #multi-navbar ul {
width: 100%;
list-style-type: none;
margin: 0px;
padding: 0px;
clear: both;
}
#multi-navbar li {
list-style-type: none;
text-align: center;
width: auto;
float: left;
height: auto;
margin-top: 200px;
padding-top: 0px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 0px;
}

#multi-navbar li li {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
width: 10em;
text-align: left;
border-top: 3px solid #f9f3f1;
margin-top: -3px;
}

#multi-navbar li a {
list-style-type: none;
display: block;
width: auto;
text-decoration: none;
height: auto;
margin: 0px;
font-family: verdana, sans-serif;
font-size:20px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
padding-top:4px;
text-transform:normal;
font-weight: normal;
color:#7c7c7c;
}

#multi-navbar li a:hover {
background-image: none;
}

#multi-navbar li li a {
padding: 8px;
background-image: none;
border-bottom: 3px solid #f9f3f1;
font-family: verdana, sans-serif;
font-size: 10px;
}

#multi-navbar li li a:hover {
text-decoration: none;
background-color:#F8F8F8;
-o-transition: all 0.7s ease-out 0s;
-webkit-transition: all 0.7s ease-out 0s;
-moz-transition: all 0.7s ease-out 0s;
}

#multi-navbar span {
}

#multi-navbar li#home {
display: block;
}

#multi-navbar li#home a, #multi-navbar li#home a:hover {
}

#multi-navbar ul {
position:absolute;
width: 10em;
left: -999em;
z-index: 9999;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background: #fff;
}

#multi-navbar ul ul {
margin-top: -31px;
margin-right: 0;
margin-bottom: 0;
margin-left: 10em;
}

#multi-navbar li:hover ul ul, #multi-navbar li:hover ul ul ul, #multi-navbar li:hover ul ul ul ul {
left: -999em;
}

#multi-navbar li:hover ul, #multi-navbar li li:hover ul, #multi-navbar li li li:hover ul, #multi-navbar li li li li:hover ul {
left: auto;
}

#multi-navbar .nuvarande {
display: block;
}

#multi-navbar .nuvarande li {
}

#multi-navbar .nuvarande a {
}

#multi-navbar .nuvarande li a {
}

#multi-navbar .nuvarande li a:hover {
}

 

Kodmallskod:

<ul id="multi-navbar">
<li><a href="#">Överrubrik (exempelvis "Kategorier")</a>
<ul class='children'>
<li><a href="#">Delkategori 1</a>
<ul class='children'>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
</li>
</ul>
</li>
<li><a href="#">Delkategori 2</a>
<ul class='children'>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
</li>
</ul>
</li>

<li><a href="#">Delkategori 3</a>
<ul class='children'>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
</li>
</ul>
</li>

<li><a href="#">Delkategori 4</a>
<ul class='children'>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>
<a href="#länktillkategorin">Kategori</a>

</li>
</ul>
</li>
</ul>
</li>

 

multidropdown

Transkribering från film:

Multidropdown

Hej hörni.

Idag så tänkte jag visa er hur man kan göra en så kallad multidropdown. Jag har gjort detta på bland annat Andreas blogg. Jag kan säga det direkt att det här fungerar tyvärr inte med blogg.se:s inbyggda programmering när det kommer till arkivet. Jag har försökt otaliga gånger så att först så kommer åren nedrullande och när man håller musen över ett årtal så kommer alla månader ut till höger då om den här. Men jag har inte fått det här att funka med hjälp av den här programmeringskoden som blogg.se har lagt in, ni vet den här …(hör inte vad Sanna säger).

Jag kan visa lite här på Andreas blogg och jag zoomar in bara för att ni kan se ordentligt vad det är jag menar. Här så har ju Andrea, vad heter det, delat upp sina kategorier i över- och underkategorier och de har vi då lagt i en sån här multidropdown i hennes header. När man håller musen över kategorier här så kommer hennes, vad heter det, kategorier och då har vi livsstil och då ser ni att då hoppar liksom alla livsstilskategorierna ut här till höger. Sen så har vi kreativt, då kommer de där. Så har vi resor, då kommer alla de där och så övrigt, kommer alla de där.

Det är alltså det som jag ska visa er idag och ni har två koder nedanför. Ni har en kodmallskod och ni har en stilmallskod helt enkelt. Ni kan ju börja med att göra som så att ni klistrar in stilmallskoden längst ner i stilmallen. Spara stilmallen och gå sedan över till kodmallen. Då kan vi göra som så att vi börjar med framsidan och så grejar helt enkelt lite där då. Ska vi se här, jag kommer använda mig av en liten testblogg här. Går in på kodmallar. Jag kommer inte liksom gå in på hur en dropdown fungerar eller hur man positionerar en dropdown eller så. Utan det här är bara för att liksom visa hur man gör det här. Som sagt börjar jag med att lägga in stilmallskoden och jag föredrar ju att ha flera fönster så att jag kan stilmallen i den ena och kodmallen i den andra. Så publicerar vi det. Sen går vi över till kodmallen och man får ju välja själv var man vill lägga den här koden. Antingen kan man lägga den i <div id=”wrapper”> eller så kan man lägga den i headern, <div id=”header”>. Jag gör som så att jag lägger den i <div id=”header”> så ser vi vad som händer. Jo då har vi den här. Den hamnade ju lite nedanför men, och det blir liksom ett mellanrum här emellan, men det beror på margin och padding och allt sådant så det kommer jag inte gå igenom nånting idag utan ni får själva sitta och trixa och greja liksom med alla stilmallskoder och se vad som ändrar vad och så där. Man lär ju sig alltid bäst på att testa själv och har ni frågor om margin och padding så kan jag ju givetvis svara på dem men jag har gjort en film som förklarar vad margin och padding är för nånting så jag rekommenderar att ni tittar på den. Kan jag länka den här nedanför.

Men i alla fall då har vi här överrubrik och så har vi delkategori 1, delkategori 2, delkategori 3 och 4. När vi då går in i kodmallskoden så ser vi då att här är överrubrik. Det är alltså det som står här. Exempelvis kategorier. Om jag ändrar det där då till bara kategorier så kommer ni se att det ändras. Kategorier. Så står det kategorier där istället. Så har vi delkategori 1. Då väljer jag att skriva kanske foto. Så har jag min första kategori som heter porträtt och min andra som heter natur och min tredje som heter, ja vad kan den heta, party kan den väl heta. Så har vi även djur där säger vi.

Så här då så har ni #länktillkategori och för att hitta kategori så är det bara att trycka på kategorin i sin blogg och hämta den adressen som hamnar där uppe. Om vi tar Andreas blogg här så är det ju den adressen som är där. Så tar ni bort från och med # till och med, så att det bara återstår de här två citattecknena, och det här vet ni ju sen innan. Jätteviktigt att http är med annars så kommer man ju inte komma fram till kategorin. Man måste alltid ha med http i både sina blogginlägg när man länkar och i kodmallarna. Så vi gör såhär på alla så har vi delkategori 2 här och den kan få heta mode. Då har vi stil och så har vi outfits där säger vi. Samma sak där, klistrar vi in där våran stil, om den heter stil. Det får ni ju liksom gå in och kolla vad ni har döpt den till, ni fattar ju hur det här fungerar antar jag. Annars får ni gå in och kolla på själva den filmen som jag har gjort om dropdown generellt liksom eller hur en dropdown fungerar överhuvudtaget. Så får ni kolla på det först liksom. Man kanske ska ha lite lite hum om hur det fungerar innan man ger sig på det här.

Sen har vi i alla fall delkategori 3 och delkategori 4 så vi gör samma sak där. Vill man lägga till en kategori då gör man det från och med <li> alltså vi börjar liksom på den här raden där ni har det ordet delkategori. Så vi tar den här, vi tar delkategori 3 och så är det fram till andra </li>. Först har vi <li> sen har vi delkategori sen har vi <ul class=”children”>, sen har vi de här olika länkarna då och sen så har vi </li>, </ul> och </li> igen. Då så gör vi som så att vi tar hela det här och så lägger vi till en till och en till. DÅ kan man lägga till hur många man vill där helt enkelt.

Som sagt ni får gå in och modifiera i css:en, stilmallskoden för att ändra utseendet på den så får vi helt enkelt hoppas att ni använder det här på ett jättefint sätt och gör jättefina bloggdesigner som vanligt. Så får jag önska er en fortsatt trevlig dag och ha det så gott. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

4 comments

  1. SvaraMagda.

    Hej Sanna! Kul att du flyttats hit. 🙂
    På min testblogg(http://testmagda.blogg.se/) så har reklamerna som oftast är mellan inläggen hoppat upp och lagt sig ovanför min header, detta gör också att min dropdown hoppar till längst ned på sidan. Har detta med något i min kodmall att göra?


    1. Author
      SvaraSanna

      Hej Magda!
      Jag har sett den reklamen på flera sidor, och det verkar som att det är blogg.se som ligger bakom det. Du kan inte styra din reklam som är i de två fälten som du måste köpa bort med PRO-medlemskap (alltså den som ligger efter första inlägget och efter andra inlägget), så därför kan man tyvärr inte justera det. Jag vet personligen att blogg.se’s kundtjänst inte alltid svarar på frågor, men detta måste de ändå svara på så jag tycker att du borde lägga ett mail till deras kundtjänst och fråga varför det blir så. I och med att du inte kan justera detta för att du inte kommer åt koderna i din kodmall så finns det nog inget annat att göra, tyvärr. Lycka till!

  2. SvaraAnna

    Hej! Nu när blogg.se har gjort om sättet man redigerar bloggdesignen med så blir jag förvirrad. Man kan välja att redigera stilmall, men sedan finns bara alternativen “startsida”, “inläggssida” o.s.v. Ingen kodmall. Jag har försökt att lägga in kodmallskoden på “Startsida”, men det funkar inte. Hur ska jag göra för att få en dropdownmeny med blogg.se nya redigeringsverktyg?

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *