Html ancla horizontalmente sin javascript

http://www.indofolio.com/, estoy tratando de crear un sitio web con una función similar a esta, pero no entiendo cómo hizo el desplazamiento horizontal con la etiqueta de anclaje sin javascript. Desactiva JavaScript y su sitio web sigue funcionando correctamente. Realmente me encanta la mejora progresiva que hizo.Html ancla horizontalmente sin javascript

Código de prueba para el anclaje horizontal, sacar bloque en línea y flotar a la izquierda y funciona perfectamente.

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

Fuente

2011-11-06 FireStream

Como Quentin dijo, pero su explicación puede ser un poco escasa si eres nuevo en el diseño web. Con javascript desactivado, tenga en cuenta que el url en los cambios. La página de inicio es www.indofolio.com/#box1 la siguiente tiene #box2, etc. Esos son id de los cuadros de contenido que está usando. El comportamiento normal para una etiqueta a es "saltar" a esos puntos si existen en una página y el anclaje está configurado para hacerlo. Su ancla de página de inicio es <a class="link home selected" href="#box1">Home</a> donde el href es lo que causa el salto a esa ubicación.

EDITAR: Aquí hay un código rediseñado para su ejemplo.

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

Fuente

2011-11-06 20:39:55 ScottS

Sí entiendo cómo se salta, pero no funciona horizontalmente, que acaba de pegar un código en la parte superior simplemente probarlo. Cuando quitas el bloque en línea y flotas a la izquierda, funciona perfectamente, pero no a la inversa. por desgracia, pero funciona en indofolio .... sigue siendo un misterio – FireStream

No se mueve horizontalmente en indofolio con Javascript desactivado. Simplemente está "saltando" en su lugar. La horizontal solo se efectúa con javascript. – ScottS

desactive JavaScript, desborde desbordamiento oculto en div id = "envoltorio", las imágenes se alinean horizontalmente al alejarse para minimizar el contenido, y cuando hace clic en el menú, salta a él. Lo sé. pero no funciona normalmente incluso en mi prueba simple allá arriba. No saltaría horizontalmente ... por supuesto, gracias por ser más preciso, porque soy tonto, y me siento más tonto cuando tengo que volver a precisar. – FireStream

-1

Se desplaza verticalmente, utilizando anclajes regulares, si JS no está disponible.

El posicionamiento horizontal se aplica con JS.

Fuente

2011-11-06 20:21:43 Quentin

Html ancla horizontalmente sin javascript

Respuesta

Cuestiones relacionadas