Trong bài hướng dẫn này, tôi sẽ hướng dẫn các bạn cách sử dụng CSS3 bằng cách tùy chỉnh Pseudo Element
Đầu tiên chúng ta tạo HTML sau:
<nav class="ph-lift"> <ul> <li class="active"><a href="#home" data-title="Home">Home</a></li> <li><a href="#portfolio" data-title="My works">My works</a></li> <li><a href="#about" data-title="Who am I?">Who am I?</a></li> <li><a href="#contact" data-title="Contact me">Contact me</a></li> </ul> </nav>
Tạo hiệu ứng hover thay đổi màu nền và thêm hiệu ứng đỗ bóng vào bên trong:
nav.ph-lift ul li { float: left; height: 90px; line-height: 90px; background: white; overflow: hidden; transition: all.6s ease; } nav.ph-lift ul li:hover { box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset; background: teal; } nav.ph-lift ul li a { display: block; text-decoration: none; color: #007e7e; padding: 0 45px; margin-top: 0; transition: all.6s ease; } nav.ph-lift ul li:hover a { margin-top: -90px; color: white; text-shadow: 0 1px 2px black; } nav.ph-lift ul li a:after { content: attr(data-title); display: block; }
Tạo HTML thứ 2 có menu con:
<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>
CSS chính bạn vẫn vẫn làm như trên nhưng thêm vào tính năng overflow:hidden cho phần tử
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; }
Chúc các bạn thành công!