Montañas

Rios

cuevas

Cataratas

________________________________________________________________________________

El código html es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS-Only Accordion Effect: Horizontal Accordian</title>
<style>
body {
   font: small/1.2 Arial, Helvetica, sans-serif; }
#accordion {
   width: 500px;
   margin: 100px auto; }
#accordion div {
   float: left;
   width:25%;
   height: 300px;
   overflow: hidden;}
#accordion:hover div {
   width: 20px; }
#accordion:hover div:hover {
   width: 440px;
   overflow: auto; }

#spring {
   background-color: #CCFF99; }
#summer {
   background-color:#FF6633; }
#autumn {
   background-color: #FFCC00; }
#winter {
   background-color:#99FFFF; }
h1 {
   font-size: 150%;
   margin: 10px 10px .2em 25px; }
p {
   margin: 1em 25px; }
</style>
</head>
<body>
   <div id="accordion">
      <div id="spring">
         <h1>Spring</h1>
         <p>Spring ......</p>
      </div>
      <div id="summer">
         <h1>Summer</h1>
         <p>The seasons are considered ....</p>
         <p>Today, the meteorological reckoning of the seasons is used in Australia, Denmark, the former USSR and by many people in the United Kingdom, but the astronomical definition is still more frequently used in the United States.</p>
      </div>
      <div id="autumn">
         <h1>Autumn</h1>
         <p>Autumn .....</p>
      </div>
      <div id="winter">
         <h1>Winter</h1>
         <p>Winter is .....</p>
      </div>
      <div style="float: none; clear: both; height: 0;"> </div>
   </div>

</body>
</html>

________________

El efecto se obtuvo aplicando modelo de la siguiente página:

ENLACE a: http://www.cssnewbie.com/

________________

Otros enlaces de consulta para aprender a trabajar acordeones son:

ENLACE a: https://jqueryui.com/

ENLACE a: http://www.ite.educacion.es

ENLACE a: http://recursoswebyseo.com/

Solo para mis blogs

Etiquetas

sábado, 26 de diciembre de 2015

Menú Acordeón

Montañas

Rios

cuevas

Cataratas