Tạo thanh menu CSS3 tuyệt đẹp với hiệu ứng scale

-
Menu là một trong những công cụ thiết yếu của Blogspot cũng như Blogger. Khi vào Blog chắc hẳn các bạn không ai mà không nhìn hoặc nhấp vào cái Menu Blog đúng không nào. Hôm nay, mình chia sẻ đến các bạn một thanh menu CSS3 tuyệt đẹp với hiệu ứng scale bắt mắt. Các bạn có thể xem demo ở hình dưới.

Tạo thanh menu CSS3 tuyệt đẹp với hiệu ứng scale
Cách thực hiện
Bước 1: Đầu tiên các bạn chèn đoạn code sau vào trên thẻ đóng </body>
<style type="text/css">
html, body, aside {
  display: block;
  margin: 0;
  padding: 0;
}
body {
  background: #ddd;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.sky-mega-menu,
.sky-mega-menu * {
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  background: none;
}
.sky-mega-menu {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* level 1 */
.sky-mega-menu {
  width: 980px;
  margin: 25px auto;
  position: relative;
  z-index: 999;
  background: #2D3E50;
  box-shadow: 0 0 20px rgba(0,0,0,.3);
  font-size: 0;
  line-height: 0;
  text-align: right;
}
.sky-mega-menu:after {
  content: '';
  display: table;
  clear: both;
}
.sky-mega-menu li {
  position: relative;
  display: inline-block;
  float: left;
  padding: 5px;
  border-style: solid;
  border-color: #aaa;
  border-right-width: 1px;
  font-size: 13px;
  line-height: 45px;
  text-align: left;
  white-space: nowrap;
}
.sky-mega-menu li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s;
  -o-transition: background 0.4s, color 0.4s;
  -ms-transition: background 0.4s, color 0.4s;
  -moz-transition: background 0.4s, color 0.4s;
  -webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: -9999px;
  margin-top: 8px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(0,0,0,.3);
  opacity: 0;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  -o-transition: -o-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 8px;
  background: transparent;
}
.sky-mega-menu li > div:before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 24px;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #2D3E50;
  border-left: 5px solid transparent;
}
.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
  background: #1D2936;
  color: #fff;
}
.sky-mega-menu li:hover > div {
  left: 0;
  opacity: 1;
  -webkit-transform: translate(0, 0);
}
/* level 2+ */
.sky-mega-menu li li {
  display: block;
  float: none;
  border-width: 0;
  border-top-width: 1px;
  line-height: 21px;
  white-space: normal;
}
.sky-mega-menu li li:first-child {
  border-top: 0;
}
.sky-mega-menu li li a {
  padding-top: 12px;
  padding-bottom: 12px;
}
.sky-mega-menu li li > div {
  top: 0;
  margin: 0 0 0 8px;
}
.sky-mega-menu li li > div:after {
  top: 0;
  right: 100%;
  bottom: auto;
  left: auto;
  width: 8px;
  height: 100%;
}
.sky-mega-menu li li > div:before {
  top: 22px;
  right: 100%;
  bottom: auto;
  left: auto;
  border-top: 5px solid transparent;
  border-right: 5px solid #2D3E50;
  border-bottom: 5px solid transparent;
}
.sky-mega-menu li li:hover > div {
  left: 100%;
}
.sky-mega-menu .right li > div {
  margin: 0 8px 0 0;
  -o-transform-origin-x: 100%;
  -ms-transform-origin-x: 100%;
  -moz-transform-origin-x: 100%;
  -webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right li > div:after {
  right: auto;
  left: 100%;
}
.sky-mega-menu .right li > div:before {
  right: auto;
  left: 100%;
}
.sky-mega-menu .right li:hover > div {
  right: 100%;
  left: auto;
}
/**/
/* animations */
/**/
.scale-effect li > div {
  -o-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}
.scale-effect li:hover > div {
  -o-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  background: #2D3E50;
}
/* grid */
.sky-mega-menu .grid-column {
  float: left;
}
.sky-mega-menu .grid-column3,
.sky-mega-menu .submenu {
  width: 234px;
}
</style>
Bước 2: Tiếp theo các bạn chèn đoạn code sau vào nơi bạn muốn hiển thị menu
<ul class="sky-mega-menu scale-effect">
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a>
        <div class="submenu">
            <ul>
                <li><a href="#">Mission</a></li>
                <li><a href="#">Our Team</a>
                    <div class="submenu">
                        <ul>
                            <li><a href="#">Markus Fisher</a>
                                <div class="submenu">
                                    <ul>
                                        <li><a href="#">About</a></li>
                                        <li><a href="#">Skills</a></li>
                                        <li><a href="#">Contacts</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">Leyla Sparks</a>
                                <div class="submenu">
                                    <ul>
                                        <li><a href="#">About</a></li>
                                        <li><a href="#">Skills</a></li>
                                        <li><a href="#">Contacts</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">Gleb Ismailov</a>
                                <div class="submenu">
                                    <ul>
                                        <li><a href="#">About</a></li>
                                        <li><a href="#">Skills</a></li>
                                        <li><a href="#">Contacts</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="#">Viktoria Gibbers</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Rewards</a></li>
                <li><a href="#">Certificates</a></li>
            </ul>
        </div>
    </li>
    <!--/ about -->
    <!-- news -->
    <li><a href="#">News</a>
        <div class="submenu">
            <ul>
                <li><a href="#">Company</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Specials</a></li>
            </ul>
        </div>
    </li>
    <!--/ news -->
    <!-- portfolio -->
    <li><a href="#">Portfolio</a>
        <div class="submenu">
            <ul>
                <li><a href="#">Logos</a></li>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Branding</a></li>
                <li><a href="#">Illustrations</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contacts</a></li>
</ul>
Sau đó các bạn chỉnh sửa thông tin menu theo ý thích các bạn ở bước 2. cuối cùng lưu lại và xem kết quả. Đặc biệt nó không ảnh hưởng đến tốc độ load nha! Chúc các bạn thành công và có một thanh menu CSS3 tuyệt đẹp với hiệu ứng scale!
Xem thêm: Tạo menu ngang đơn giản cực đẹp cho Blogspot
Nếu thấy hay hãy share hoặc để lại 1 comment để ủng hộ mình nhé!
Cập nhật: đã test thử đẹp quá trời đẹp! <3

Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Index 27/11

-
https://viettelcapquangvn.tumblr.com/ https://viettelcapquangvn.weebly.com/ https://twitter.com/viettelcapquang https://www.diigo.com/profile/lapmangviettel https://getpocket.com/@156g0d7dp5f3aAb1e0T50Z6T47Afpafr730J21D8a2G1a1Eb9787adU7o87rdf00?src=navbar https://viettelcapquangvn.wordpress.com/ https://viettelcapquangvn.blogspot.com/ https://www.blogger.com/profile/14097403780668540490 https://trello.com/viettelcapquangvn https://github.com/viettelcapquangvn https://www.linkedin.com/in/viettelcapquangvn/ https://gitlab.com/viettelcapquangvn https://en.gravatar.com/viettelcapquanghanoi https://bbpress.org/forums/profile/viettelcapquangvn/ https://www.youtube.com/channel/UCjiNoauHbT0RFo14-QoPUYw/about http://www.pinterest.com/viettelcapquangvn/ https://www.giantbomb.com/profile/viettelcapquang/about-me/ https://tawk.to/viettelcapquangvn https://viettelcapquangvn.mystrikingly.com/ https://www.behance.net/viettelcapquangvn https://dribbble.com/viettelcapquangvn/about ...
Đọc thêm

The best Side of chung cư yên ph��

-
Ở không gian phòng ngủ khác, KTS lựa chọn nội thất với chất liệu gỗ An Cường vừa đảm bảo được tính sang trọng vừa phù hợp với chi phí đầu tư của gia chủ Không chấp hành hiệu lệnh dừng phương tiện, ông Đỗ Sanh lái xe bỏ chạy khoảng 10km rồi dừng lại vác gậy tấn công cảnh sát khiến 1 chiến sĩ bị thương. Một môi trường sống với sự kết hợp tuyệt vời giữa cảnh quan thiên nhiên tươi đẹp muôn màu của cuộc sống ngay chính trong ngôi nhà của bạn. Sau khi ở anh Hải mới thấy nhiều bất cập. Chung cư này không được chủ đầu tư quan tâm, tu sửa, nhiều hạng mục xuống cấp, mỗi khi xảy ra hỏng hóc thì chính những người dân sinh sống ở đây phải tự bỏ tiền túi ra để thuê người sửa chữa. Phòng bếp đa năng với hệ thống tủ bếp và thiết bị nhà bếp cao cấp. Tủ bếp chữ I được làm bằng gỗ kết hợp đá ốp bếp nhân tạo vân mây mang lại không gian nấu nướng thật tinh tế hài hòa. Liền kề khu căn hộ Sơn Kỳ là KĐT sinh thái Celadon City quy mô 82.5 ha của Malaysia và các Trung tâm mua săm của tập đoàn Aeon Mall Nhật bản...
Đọc thêm