Δημιουργήσετε ένα CSS3 μενού
Ένα menu με την δημιουργία CSS αναδιπλωμένο να πω την αλήθεια είναι ένα από τα ομορφότερα που έχω δει.
DEMO
Πάμε να ξεκινήσουμε ...
Αντιγραφή επικόλληση στο σημείο του blog σας που θέλετε.
<nav class="ph-lift1">
<ul>
<li class="active"><a href="#home" data-title="Home"><span data-title="Home">Home</span></a>
<ul>
<li><a href="#"><span data-title="Featured">Featured</span></a></li>
<li><a href="#"><span data-title="Top 10">Top 10</span></a></li>
</ul>
</li>
<li><a href="#portfolio"><span data-title="My works">My works</span></a>
<ul>
<li><a href="#"><span data-title="Web design">Web design</span></a></li>
<li><a href="#"><span data-title="Illustrations">Illustrations</span></a></li>
<li><a href="#"><span data-title="Patterns">Patterns</span></a></li>
</ul>
</li>
<li><a href="#"><span data-title="Who am I?">Who am I?</span></a></li>
<li><a href="#"><span data-title="Contact me">Contact me</span></a>
<ul>
<li><a href="#"><span data-title="Email me">Email me</span></a></li>
<li><a href="#"><span data-title="Network">Network</span></a></li>
</ul>
</li>
</ul>
</nav>
Αναζήτηση το ]]></b:skin> και επικολλήσω πριν από αυτό.
CSS
nav.ph-lift1 > ul > li {
float: left; }
nav.ph-lift1 ul li {
height: 80px;
line-height: 80px;
background: white;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease; }
nav.ph-lift1 ul li ul {
max-height: 0;
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
overflow: hidden;
display: block; }
nav.ph-lift1 ul li:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
background: darkolivegreen; }
nav.ph-lift1 ul li:hover ul {
max-height: 300px; }
nav.ph-lift1 ul li a {
display: block;
overflow: hidden;
text-decoration: none;
color: #546a2f;
height: 80px; }
nav.ph-lift1 ul li ul li a {
color: #7e7e00; }
nav.ph-lift1 ul li ul li:hover {
background: olive; }
nav.ph-lift1 ul li a span {
-webkit-transition: all.6s ease;
-moz-transition: all.6s ease;
-o-transition: all.6s ease;
-ms-transition: all.6s ease;
transition: all.6s ease;
display: block;
padding: 0 40px; }
nav.ph-lift1 ul li:hover > a span {
margin-top: -80px;
color: white;
text-shadow: 0 1px 2px black; }
nav.ph-lift1 ul li a span:after {
content: attr(data-title);
display: block; }
Δημιουργός: pehaa.com
Σχόλια