Html anchor orizzontalmente senza javascript

http://www.indofolio.com/, Sto cercando di creare un sito web con funzioni simili a questo, ma non capisco come abbia fatto lo scorrimento orizzontale con il tag di ancoraggio senza javascript. Disattiva javascript e il suo sito web funziona ancora correttamente. Adoro il miglioramento progressivo che ha fatto.Html anchor orizzontalmente senza javascript

Codice di prova per ancoraggio orizzontale, estrarre inline-block e galleggiante sinistra e funziona perfettamente.

<!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>

fonte

2011-11-06 FireStream

Come Quentin ha detto, ma la sua spiegazione potrebbe essere un po 'carente, se siete nuovi al web design. Con javascript disattivato, notare che il url nelle modifiche. La homepage è www.indofolio.com/#box1 la successiva ha #box2, ecc. Queste sono le id delle caselle di contenuto che sta utilizzando. Il comportamento normale per un tag a è "saltare" su quei punti se esistono su una pagina e l'ancoraggio è impostato per farlo. L'ancoraggio della sua home page è <a class="link home selected" href="#box1">Home</a> dove lo href è ciò che causa il salto in quella posizione.

MODIFICA: ecco un codice rielaborato per il tuo esempio.

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; 
}

fonte

2011-11-06 20:39:55 ScottS

Sì ho capito come si salta, ma non funziona in senso orizzontale, ho appena incollato un codice in cima solo testarlo. Quando rimuovi il blocco in linea e lo fai a sinistra, funziona perfettamente ma non nell'altro modo. purtroppo funziona su indofolio .... è ancora un mistero – FireStream

Non si muove orizzontalmente su indofolio con javascript disattivato. Sta semplicemente "saltando" al suo posto. L'orizzontale viene effettuato solo con il javascript. – ScottS

disattiva javascript, ignora l'overflow nascosto su div id = "wrapper", le immagini vengono allineate orizzontalmente quando si riduce lo zoom per ridurre il contenuto e quando si fa clic sul menu si passa ad esso. Lo so. ma non funziona normalmente nemmeno sul mio semplice test lassù. Non salterà orizzontalmente ... ma grazie di essere più preciso, perché sono stupido, e mi sento più stupido quando devo precisare di nuovo. – FireStream

-1

scorre verticalmente, utilizzando tasselli regolari, se JS è disponibile.

Il posizionamento orizzontale viene applicato con JS.

fonte

2011-11-06 20:21:43 Quentin

Html anchor orizzontalmente senza javascript

risposta

Problemi correlati