Rullgardinsmeny - drop down (mobilanpassad sida)
Vet du med dig att din mall inte är mobilanpassad - se artikeln för ej responsiv sida.
Det är möjligt att få till, men det kräver en hel del pyssel. Jag försöker nedan gå igenom allt pyssel som krävs.
Steg 1 är att kopiera meny-koderna öppna med fördel anteckningar och lägg informationen där.
Högerklicka på din sida, ta visa källa eller visa sidkälla. I chrome fungerar även ctrl+U.
Där finner du: <body...> och under den hittar du (neden kallat Övre Kodsnutten):
<style>.nav-collapse{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1;}.nav-collapse.opened{max-height:9999px;}.nav-toggle{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;width:60px;height:36px;z-index:999999;position:absolute;right:15px;top:4px;overflow:hidden;display:block;background:#000 url(https://images.staticjw.com/jim/9159/hamburger.png) no-repeat 50% 44%;}@media screen and (min-width: 700px) {.nav-collapse{position:relative;}.nav-collapse.closed{max-height:none;}.nav-toggle{display:none !important;}}@media (min-width: 700px) {ul#responsive-nav{display:none;}}@media (max-width: 700px){img {max-width:100%;height:auto;}#logo-image{max-width:90%;}.nav-collapse{margin-bottom:30px;margin-top:-45px;min-height:15px;}ul#nav{display:none;}ul#responsive-nav{width:100%;background-color:#fff;margin:0;padding:0 0 10px;display:block;list-style:none;}ul#responsive-nav a{background:none;box-shadow:none;font-size:13px;text-decoration:none;color:#111;display:block;padding:10px 0 5px 15px;text-transform:uppercase;font-family:arial;text-align:left;}ul#responsive-nav #active a {font-weight:bold;}ul#responsive-nav li{width:100%;line-height:25px;display:block;padding:0;border-top:1px solid #ddd;margin:0 !important;}ul#responsive-nav li:hover{background-color:#eee;}body{margin-top:45px;background-color:#fff;background-image:none;}}</style>
<div class="nav-collapse">
<ul id="responsive-nav">
<li><a href="..">..</a></li>
<li><a href="..">..</a></li>
</ul>
</div>
Väl där letar du upp (Nedre Kodsnutten):
<ul id="nav"> ... </ul><br>
Kopiera och spara undan allting som står där.
Justera adresserna så att det i stället för www.dinadress.se/ blir ##home_url##
<ul id="nav"> <li id="active"><a>Hem</a></li> <li><a href="##home_url##sida1">Sida 1</a></li> <li><a href="##home_url##sida2">Sida 2</a></li> <li><a href="##home_url##sida3">Sida 3</a></li> </ul>
Därefter ska vi justera första hem-länken.
<ul id="nav"> <li><a href="##home_url##">Hem</a></li> <li><a href="##home_url##sida1">Sida 1</a></li> <li><a href="##home_url##sida2">Sida 2</a></li> <li><a href="##home_url##sida3">Sida 3</a></li> <li><a href="##home_url##kontakt">Kontakt</a></li> </ul>
Justeringen görs genom att ta bort " id="active"" och lägga till " href="##home_url##" ". Detta görs på båda platserna.
Därefter går du till egen mall (var i menyn den ligger beror på när du skapade din sida).
https://www.username.n.nu/admin/custom-template.php
Se efter så att du * har* koden "##responsive_navigation##" i din mall, har du inte det behöver färre saker fixas, se manualen för det.
Ersätt koden "##responsive_navigation##" i din mall med den modifierade Övre Kodsnutten (se ovan).
Ersätt ##navigation_ul## med Nedre Kodsnutten (se ovan).
För att kunna se vilken sida besökaren är på i menyn behöver följande läggas ovan "##statistics##"
<script>
var currentURL = window.location.href;
var menu = document.getElementById('nav');
menuLi = menu.getElementsByTagName('li');
recursiveElements(menuLi, currentURL);
function recursiveElements(menu, uri) {
if (menu.length > 0) {
for (var i = 0; i < menu.length; i++) {
link = menu[i].getElementsByTagName('a');
if (link.length > 0) {
if (link[0].href == uri) {
menu[i].id = "active";
} else {
recursiveElements(menu[i], uri);
}
}
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/responsive-nav.js/1.0.39/responsive-nav.min.js"></script>
<script>var nav = responsiveNav(".nav-collapse",{label: ""});</script>
##statistics##
Sådär, nu har du en meny som fungerar som den gjorde nyss.
Kvar nu är drop-downs.
Underlänkar läggs till genom att skapa nya listor innanför <li></li>.
Såhär:
Du måste sätta ner förälderns </li> och lägga den nya listan däremellan (Detta måste du göra på TVÅ ställen!):
<ul id="nav"> <li><a href="##home_url##">Hem</a></li> <li><a href="##home_url##sida1">Sida 1</a></li> <li><a href="##home_url##sida2">Sida 2 med drop down</a> <ul> <li><a href="##home_url##undersida1">UnderSida 1</a> <li><a href="##home_url##undersida2">UnderSida 2</a> <li><a href="##home_url##undersida3">UnderSida 3</a> </ul> </li> <li><a href="##home_url##sida3">Sida 3</a></li> <li><a href="##home_url##kontakt">Kontakt</a></li> </ul>
Detta kommer att skapa en undermeny. Beroende på vilken mall du har kan den se helt OK ut, eller bli katastrof. Blir det katastrof kan Support hjälpa dig med det.
Se till att alla sidor du länkar till finns (eller skapas) som sidor i "extra undersidor".
Mobilmenyn ser lite bättre ut om du i egen css lägger
#responsive-nav li ul li a {margin-left:10px;}
ul#responsive-nav li ul li a {font-size:12px!important;line-height:14px;}
ul#responsive-nav li ul li a:hover {background:#fff;}