Δημιουργήσετε ένα 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


Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Εγγραφείτε για να λαμβάνετε τις σημαντικότερες ειδήσεις της ημέρας