Multidropdown

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:

• Överrubrik (exempelvis "Kategorier")
  • Delkategori 1 Kategori Kategori Kategori Kategori
  • Delkategori 2 Kategori Kategori
  • Delkategori 3 Kategori Kategori Kategori Kategori Kategori
  • Delkategori 4 Kategori Kategori Kategori Kategori