Nawigacja na witrynie

pytanie zadane 15 marca 2021 w HTML i CSS przez niezalogowany
zamknięte 16 marca 2021

Witam!

Mam pytanie jak zrobić, żeby lista <ul>, a dokładniej jej element <li>, który pełni rolę przycisku nawigacyjnego, przenosił na następną "podstronę" nie tylko po kliknięciu na napis ale i obok niego. Czyli tak jak jest na stronie Pasja informatyki", że nie trzeba klikać np. w przycisk "START" tylko można obok:

Będę wdzięczny za odpowiedź, pozdrawiam!

komentarz zamknięcia: Otrzymanie najlepszej odpowiedzi

1 odpowiedź

odpowiedź 15 marca 2021 przez VBService Ekspert (256,600 p.)
wybrane 16 marca 2021

Najlepsza

Do <li> dodaj (ustaw) padding.

<body>
<ul>
  <li>Start</li>
  <li>Kursy</li>
</ul>
<ul class="padding">
  <li>Start</li>
  <li>Kursy</li>
</ul>
<pre></pre>
</body>

<style>
body {
  user-select: none;
}
ul {  
  list-style-type: none;
}
li {
  display: inline-block;
  margin: 1em;
  cursor: pointer;
  transition: all 1s;
}
li:hover {
  background-color: gray;
  color: white;
}
.padding li {
  display: inline-block;
  margin: 1em;
  border: 1px solid red;
  cursor: pointer;
  padding: 1em; /* <--- */
  transition: all 1s;
}
.padding li:hover {
  background-color: red;
  color: yellow;
  border-color: yellow;
}
</style>

<script>
const pre = document.querySelector('pre');
let id_time_out;

[...document.querySelectorAll('li')].forEach(li_ => {
  li_.addEventListener('click', e => {
    clearTimeout(id_time_out);
    const padding_ = window.getComputedStyle(e.target).getPropertyValue('padding');
    pre.innerHTML = `    Ma padding ustawiony na: <b>${padding_}</b>`;
    id_time_out = setTimeout(() => { pre.innerHTML = ''; }, 2000);
  })
})
</script>

komentarz 15 marca 2021 przez niezalogowany

Dziękuję za odpowiedź, lecz mam ustawiony padding, ale nie ma oczekiwanych skutków, czy ustawienie znaczników <li></li> w środku znaczników <a href="abcd" ></a>, czyli tak:

<a href="/index.php"><li>Strona główna</li></a>

jest zgodne ze standardami, czy tego nie powinno się robić?

komentarz 15 marca 2021 przez VBService Ekspert (256,600 p.)
edycja 15 marca 2021 przez VBService

Znacznik <li> jest częścią znacznika <ul>, czyli inny kod html musi znajdować się w wnętrzu <li> ... kod html ... </li>

Tu masz jak dopasować padding znacznika <a> do <li>

<body>
  <ul>
    <li title="Klik"><a href="#">Start</a></li>
    <li title="Klik">Kursy</li>
  </ul>
  <ul class="padding">
    <li title="Klik"><a href="#">Start</a></li>
    <li class="last-child" title="Klik">Kursy</li>
  </ul>
  <pre> </pre>
  <pre>
    czerwona ramka - padding &lt;li&gt;
     zielona ramka - padding &lt;a&gt;
  </pre>
</body>

<style>
body {
  user-select: none;
}
ul {  
  list-style-type: none;
}
li {
  display: inline-block;
  margin: 1em;
  cursor: pointer;
  transition: all 0.5s;
}
li:hover {
  background-color: gray;
  color: white;
}
.padding li { /*  <------------+   */
  display: inline-block; /*    |   */
  margin: 1em; /*              |   */
  border: 3px solid red; /*    |   */
  cursor: pointer; /*          |   */
  transition: all 0.5s; /*     |   */
  padding: 0; /*  <------------+   */
}
.padding li a { /*  <----+   */
  display: block; /*  <--|   */
  padding: 1em; /*  <----+   */

  color: black;
  border: 3px solid green;
}
.padding li:hover {
  background-color: red;
  color: yellow;
  border-color: yellow;
}
.padding .last-child {
  padding: 2em;
}
</style>

<script>
const pre = document.querySelector('pre');
let id_time_out;

[...document.querySelectorAll('li')].forEach(li_ => {
  li_.addEventListener('click', e => {
    clearTimeout(id_time_out);
    const padding_ = window.getComputedStyle(e.target).getPropertyValue('padding');
    pre.innerHTML = `    Ma padding ustawiony na: <b>${padding_}</b>`;
    id_time_out = setTimeout(() => { pre.innerHTML = ' '; }, 2000);
  })
})
</script>