HTML/CSS, Bästa sätt för meny?

Marta · Inlägg av **Marta** » 31 januari 2020, 08:06:46

Tack för alla förslag.

Det där var en stökig site. Jag blev 100% yr.

Något på servern skall där inte vara. Den förstår bara GET och består av en RPi-0w.

CRAP
TRODDE att det fungerade.
document.getElementById('hem').classList.add('active')
fungerar inte på den länkade menyn. Jag ger upp. Blir en fil per sida...

Hittade ett script med bl.a. include på w3schools. Fungerar perfekt på FF, chromium "Version 57.0.2987.98 Built on 8.7, running on Debian 9.9" kräker nedanstående. Är scriptet sk*t eller är det chromium som är det. Eller finns här en error någonstans?

file:///home/marta/martakson/menu.htm. Cross origin requests are only
supported for protocol schemes: http, data, chrome, chrome-extension, https.
w3.includeHTML @ w3.js:249
(anonymous) @ index.htm:114

Kod: Markera allt

w3.includeHTML = function(cb) {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          elmnt.removeAttribute("w3-include-html");
          w3.includeHTML(cb);
        }
      }
      xhttp.open("GET", file, true);                !!! detta är 249 !!!
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};

Mr Andersson · Inlägg av **Mr Andersson** » 31 januari 2020, 10:42:38

Chromium tillåter inte XMLHttpRequest på file:// som standard. Det finns något argument som aktiverar det, men om du lägger filerna på servern och kör http(s) så borde det fungera.

Marta · Inlägg av **Marta** » 31 januari 2020, 12:15:49

Tack för svar. Då är det tydligen något security crap som bråkar.

Även om sidan laddar som den skall från en server så kvarstå problemet med att lägga till en class på vald menyrad. Firefox ignorerade detta när menyn hade laddats med hjälp av scriptet.

Skall sidan funka stabilt och utan serverkladd tycks det vara kompletta filer som gäller. Blir lite stökigt att ändra, men ändå en förenkling när det är samma kod i alla filernas första del.

papabear · Inlägg av **papabear** » 31 januari 2020, 22:48:48

Nu tar vi det lite lugnt här:

Kod: Markera allt

<html>

<head>
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>

<body id="home">
    <script src="./js/menu.js"></script>
    <p>välkommen till index</p>
</body>

</html>

Kod: Markera allt

<html>

<head>
    <title>Sida 2</title>
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
</head>

<body id="page2">
    <script src="./js/menu.js"></script>
    <p>välkommen till sida 2</p>
</body>

</html>

Det enda som diffar mellan sidorna är innehållet och id:t på body-taggen.

Kod: Markera allt

const pages = [{
        name: 'Hem',
        path: './index.html',
        class: 'home'
    },
    {
        name: 'Sida2',
        path: './sida2.html',
        class: 'page2'
    }
];

//ändrat enligt edit
const styles = `<style>
${pages.map(page => `#${page.class} .${page.class}`)}{ 
    color: red;
}
</style>`;

const menu = `
<ul class="menu">
    ${pages.map(page => `<li><a class="${page.class}" href="${page.path}">${page.name}</a></li>`).join('')}
</ul>`;

document.write(styles);
document.write(menu);

I menu.js finns allt som rör menyn; en lista med sidor och en mall för hur listan ska renderas.
Och sista raden är ju rätt viktig för att faktiskt infoga menyn

.

Kod: Markera allt

/*ändrat enligt edit. lägg bara normal styling här*/
p {
    color: #333;
}

Tack vare id:t på body-taggen, kan vi sätta stil på aktuellt menyval, här bara markerat med röd färg som exempel.

ex sida2:

page2.PNG

edit: du skulle ju också kunna göra en mall i menu.js för stylingen av just menyklasserna också, så minskar du ner dubbelarbetet lite till.
Ska du i det fallet lägga till en sida, skapar du bara den nya sidan (med rätt, nytt, id på body) och uppdaterar page-arrayen i menu.js med info om den nya sidan.

Corax, why? · Inlägg av **Corax, why?** » 5 februari 2020, 19:08:06

Det är synd att frame blir deprecated eftersom det är det enda sättet att göra vad du vill/verkar vilja göra med helt statisk html utan javascript. I vissa fall kanske iframe kan fungera men det är krångligt.

Serverar du filerna från egen server?

Om du inte vill använda något aktivt serverside, inte ens ett build-script, så finns det bara javascript kvar som alternativ. Vilket är ett sämre alternativ än build-script eftersom man av säkerhetsskäl bör ha javascript avstängt när man surfar, särskilt om det är HTTP och inte HTTPS.

Kort sagt, så som standarderna utvecklas så är det "meningen" att man ska processa sina sidor genom exempelvis PHP. Det är fortfarande "meningen" att man ska ha progressive enhancement och att alla webbläsare tillbaka till Netscapes första betaversion ska ha fullt stöd, även om ingen bryr sig om det. Websidevärlden är absurd.

Mr Andersson · Inlägg av **Mr Andersson** » 5 februari 2020, 19:28:00

frame är deprecated men iframe är inte det.
Dock kräver iframes mer minne då varje frame är en egen browser-sandbox.

Marta · Inlägg av **Marta** » 7 februari 2020, 07:18:26

Javascript är helt OK. Det är nödvändigt att ha påkopplat, annars blir det tvärnit på förbaskat många sidor. Måste vara något som lätt kan testas lokalt utan att sätta upp en avancerad server.
Den som besöker sidor där det kan finnas sk*t skall givetvis köra en VM och när något inträffar är det bara att radera denna och kopiera in en ny.
En del av siten var först tänkt att ligga på egen server, men one har nya regler så troligen kan smärre Linuxfiler av högst måttligt intresse finnas där numera.

Har laddat ner det papabear varit vänlig att skriva ihopa, men funkar dessvärre inte. Testat med en lätt antik ff och lätt ankommen chromium på lokala filer.

Ser nu det blivit knas med filnamn och directories. Flyttat till rätt dir's och fixat filnamnen. Blir OK visning, men länkarna funkar inte. Även testat absolut path.

Ändring 2:
Vilka dumma wbläsare som inte kan översätta "sida" till "page"

Funkar nu. Stort Tack! Skall jobba vidare från detta.

papabear · Inlägg av **papabear** » 7 februari 2020, 10:28:33

Ah, ser att jag fibblat med filnamnen från mitt test till inklistring här.
Men man kunde ju tycka att datorer kunde vara lite smarare ibland

Kul att det funkar.

HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?

Re: HTML/CSS, Bästa sätt för meny?