DaviXM 3.0

Noticias

En la sección +D Periódico.

Tweets:

Visitantes Web:

País: us
Code: us
Hits: 100313
Total: 41761

+D

Animacion Css Menu | Intro



|

Hola amigos este es el primer post sobre Css, les presento este menu elegante para que lo usen en el extra de Pwg que quedaría espectacular, o también si saben un poco de programación pueden usar su imaginación y ver dónde lo pueden usar, este menu es una versión adaptada. Creada por programadores de Crodops vemos que tiene un .nav elíptico gran ingenio, está hermoso el menu. 

Úsenlo como gusten y pongan su creatividad en el código

Básico

Código Html

Información: Para principiantes en la programación, el código CSS ya está subido en un hoting, solo tienen que copiar el HTML
Azul : Editar y Colocar el Título de cada .li de menu


<link rel="stylesheet" type="text/css" href="http://davixm.web44.net/Post-Css/Animacion Css3 Menu - Intro/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://davixm.web44.net/Post-Css/Animacion Css3 Menu - Intro/css/style10.css" />
<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis" rel="stylesheet" type="text/css" />
<div class="container">
<div class="header"><a><strong>Titulo: </strong>Animacion Css3 Menus</a> <span class="right"> <a target="_blank" href="http://http://davixm.es.tl/Recursos-Web.htm">Recursos Web</a> <a href="http://www.es.tl"><strong>Volver a Davixm</strong></a> </span>
<div class="clr">&nbsp;</div>
</div>
<h1>Aqui el Titulo de tu Pagina<span>Aqui un breve descipcion</span></h1>
<div class="content">
<ul class="ca-menu">
<li><a href="#"> <span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 1</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 2</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon" id="heart">N</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 3</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 4</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 5</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
</ul>
</div>
<!-- content --></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <!-- Script-no borrar --> <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script> <!-- Codigo Adaptado por www.davixm.es.tl -->

 

Avanzado

Información:Para los expertos les dejo el Css y el Html para que brote su imaginación con el css.

Código Css


Código Html


<ul class="ca-menu">
<li><a href="#"> <span class="ca-icon">F</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 1</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">H</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 2</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon" id="heart">N</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 3</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">K</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 4</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
<li><a href="#"> <span class="ca-icon">L</span>
<div class="ca-content">
<h2 class="ca-main">Titulo 5</h2>
<h3 class="ca-sub">Descripcion</h3>
</div>
</a></li>
</ul>

 Fuente: http://tympanus.net/codrops/
Adaptado por: David Castillo
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=