Kotwica Html poziomo bez javascript

http://www.indofolio.com/, Próbuję stworzyć stronę internetową o funkcji podobnej do tej, ale nie rozumiem, jak on zrobił poziome przewijanie z tagiem kotwicy bez javascript. Wyłącz javascript, a jego strona internetowa nadal działa poprawnie. Naprawdę kocham postępowe ulepszenie, które zrobił.Kotwica Html poziomo bez javascript

Kod testowy do zakotwiczenia poziomego, wyjmij blok inline i ułóż w lewo i działa idealnie.

<!DOCTYPE HTML> 
    <html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
.ab { 
    width: 20%; 
    height: 20%; 
    float: left; 
    display: inline-block; 
    border: 1px solid red; 

} 

</style> 
</head> 
<body> 
<a href="#box1">aaaaaaa</a> 
<a href="#box2">bbbbbbb</a> 
<div id="container" style="width:100%"> 
    <ul style="width:500%;height:2000px;background-color:red"> 
     <li class="ab"><a name="box1"></a> 
      <div>test</div> 
     </li> 
     <li class="ab"><a name="box2"></a> 
      <div>test2</div> 
     </li> 
     <li class="ab"> 
      <a name="box3"></a> 
      <div>test3</div> 
     </li> 
     <li class="ab"> 
      <div></div> 
     </li> 
     <li class="ab"> 
      <div></div> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

Źródło

2011-11-06 FireStream

Tak jak powiedział Quentin, ale jego objaśnienie może trochę zabraknąć, jeśli dopiero zaczynasz projektowanie stron internetowych. Przy wyłączonym javascript, zauważ zmiany w url. Strona główna to www.indofolio.com/#box1 następna ma #box2 itd. Są to id z pól zawartości, z których korzysta. Normalne zachowanie dla znacznika a polega na "przeskakiwaniu" do tych punktów, jeśli istnieją one na stronie, a kotwica jest ustawiona, aby to zrobić. Jego kotwica strony głównej to <a class="link home selected" href="#box1">Home</a>, gdzie href powoduje skok do tej lokalizacji.

EDYCJA: Oto trochę przerobiony kod dla twojego przykładu.

HTML

<div id="nav"> 
<a href="#box1">B1</a> 
<a href="#box2">B2</a> 
<a href="#box3">B3</a> 
<a href="#box4">B4</a> 
<a href="#box5">B5</a> 
</div> 
<div id="container"> 
    <ul> 
     <li class="ab" id="box1"> 
      <div>test1</div> 
     </li> 
     <li class="ab" id="box2"> 
      <div>test2</div> 
     </li> 
     <li class="ab" id="box3"> 
      <div>test3</div> 
     </li> 
     <li class="ab" id="box4"> 
      <div>test4</div> 
     </li> 
     <li class="ab" id="box5"> 
      <div>test5</div> 
     </li> 
    </ul> 
</div>

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
.ab { 
    width: 20%; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

.ab div { 
    height: 500px; 
    border: 1px solid red; 
} 

#container { 
    width: 500%; /* five page widths for five horizontal pages */ 
    padding: 0; 
    margin: 1.5em 0 0; 
} 

#container ul { 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    position: fixed; 
    left: 0; 
    top: 0; 
} 

#nav a { 
    margin-right: 10px; 
    display: inline-block; 
}

Źródło

2011-11-06 20:39:55 ScottS

Tak mi zrozumieć, jak skoki, ale to nie działa w poziomie, po prostu wklejony kod na górze po prostu przetestować. KIEDY usuwa się blok inline i pływa w lewo, działa idealnie, ale nie w inny sposób. Niestety, ale działa na indofolio .... jego wciąż tajemnica – FireStream

Nie porusza się poziomo na indofolio przy wyłączonym javascript. To po prostu "skacze" na miejsce. Horyzont jest wykonywany tylko przy pomocy javascript. – ScottS

Wyłącz javascript, włącz przepełnienie ukryte na div id = "wrapper", obrazy są wyrównywane poziomo po pomniejszeniu, aby zminimalizować zawartość, a po kliknięciu menu przeskakuje do niego. Wiem. ale nie działa normalnie nawet na moim prostym teście. Nie wyskoczyłoby to poziomo ... nexx być bardziej precyzyjnym plz, bo jestem głupi, i czuję się bardziej głupi, kiedy muszę ponownie ustalić. – FireStream

-1

Przewija się w pionie, używając zwykłych kotwic, jeśli JS jest niedostępny.

Położenie poziome jest stosowane z JS.

Źródło

2011-11-06 20:21:43 Quentin

Kotwica Html poziomo bez javascript

Odpowiedz

Powiązane problemy