Menu CSS 3D cho Blog Blogger - Insurance Finances

Trong bài đăng gần đây của tôi, tôi đã chia sẻ menu dọc nổi cho blogger và trước đó tôi đã chia sẻ nhiều loại menu có phong cách, hữu ích, đáp ứng và dễ sử dụng. Tất cả các menu blogger được chia sẻ để giúp những blogger không biết cách thêm menu trong blogger vì blogger không cung cấp bất kỳ tùy chọn nào để thêm menu trực tiếp để blogger phải thêm menu từ các trang web khác, vì vậy ở đây hầu như mọi loại có thể được tìm thấy và thêm vào blog bằng cách làm theo hướng dẫn từng bước. Sau khi chia sẻ các menu khác nhau, tôi sẽ chia sẻ một menu mới, độc đáo, đáp ứng và gọn gàng.
Đây là một menu 3D. Nó có hiệu ứng tuyệt vời là khi một tab / nút được di chuột bằng chuột, nó sẽ quay và hiển thị kích thước khác. Đó là một menu độc đáo và tôi khá chắc chắn rằng bạn chưa từng thấy nó trước đây, bạn có thể xem bản demo bên dưới:

Trong bản demo ở trên, bạn có thể thấy thiết kế 3D của nó, nó là một menu css thuần túy. Javascript không được sử dụng để tạo hiệu ứng 3D trong đó. Bạn có thể nhận thấy màu văn bản màu trắng nhưng khi di chuột, nó trở nên buồn tẻ, bạn có thể thay đổi màu di chuột văn bản và màu menu. Tôi sẽ chỉ cho bạn cách tùy chỉnh menu này ở cuối bài này. Sau khi chia sẻ menu 3D ngang tôi cũng sẽ chia sẻ menu 3D dọc, vì vậy hãy bắt đầu! làm theo các bước dưới đây để thêm menu này vào blog của bạn:
Thêm menu 3D ngang trong blogger:

Bước 1: Chuyển đến bảng điều khiển blogger.
Bước 2: Chọn bố cục trong menu ở bên trái.
Bước 3: Nhấp vào thêm một tiện ích và cuộn xuống Html / javascript.
Bước 4: Sao chép mã bên dưới và dán nó vào cửa sổ Html / javascript:

<div id="cssmenu" class="dropdown">
<ul>
   <li class="active"><a href="#" data-title="Home">Home</a></li>
   <li><a href="#" data-title="Product 1">Product 1</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
   <li><a href="#" data-title="Company">Company</a></li>
   <li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  font-family:Trebuchet Ms;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #3db2e1;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #3db2e1;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #dff2fa;
  background: #19799f;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #3db2e1;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}
</style>

Bước 5: Nhấp vào lưu và bạn đã hoàn tất!

Đảm bảo thêm tiện ích ngay bên dưới tiêu đề blog của bạn nếu không nó sẽ hiển thị ở dạng dọc.

Tùy chỉnh:

Bạn có thể tùy chỉnh mọi thứ trong menu này nếu bạn có kiến ​​thức về CSS, tôi sẽ chỉ cho bạn thấy một số tùy chỉnh phổ biến trong menu này như màu văn bản trước và sau khi di chuột bằng chuột và cả các nút màu trước và sau khi di chuột bằng chuột. Tất cả bạn phải làm là thay thế các mã bằng mã màu mong muốn. Bạn có thể nhận được mã màu bằng cách đọc bài viết này. Tôi đã đánh dấu các phần khác nhau trong mã ở trên để tạo sự khác biệt giữa chế độ di chuột và chế độ hoạt động. Để tùy chỉnh menu này đọc bên dưới, nếu bạn muốn tùy chỉnh một cái gì đó khác, bạn có thể hỏi tôi trong các bình luận hoặc liên hệ với tôi.

Màu này (backgroud: # 3db2e1;) đại diện cho màu hoạt động của các nút, màu hoạt động là màu được hiển thị trước khi di chuột bằng chuột, bạn có thể thay đổi nó bằng cách thay thế # 3db2e1 bằng mã màu mong muốn.

 backgroud: # 3db2e1; đại diện cho màu di chuột, đó là màu được hiển thị khi tab / nút được di chuột bằng chuột.

  color: #ffffff; là màu của văn bản trước khi di chuột bằng chuột và màu: # dff2fa; hiển thị màu của văn bản hiển thị khi một tab được di chuột bằng chuột.

Thêm hoặc xóa nút / tab:

Tôi chỉ chỉ cách thay đổi màu của văn bản hoặc nút trong menu nhưng một điều khác gây nhầm lẫn là thêm hoặc xóa tab. Do là menu 3D, menu này yêu cầu thêm tên của menu 2 lần cái đầu tiên được hiển thị trước khi di chuột và cái còn lại được hiển thị khi một tab / nút được di chuột bằng chuột. Vì vậy, ở đây tôi muốn làm rõ rằng trong menu 3D, bạn phải thêm tên của tab / nút 2 lần nếu không nó sẽ không hiển thị văn bản ở chiều khác. Vì vậy, hãy đọc phần bên dưới để tìm hiểu cách thêm hoặc xóa nút khỏi menu 3D:

Để thêm một nút / tab mới trong menu, dán mã bên dưới bên dưới mã nút nơi bạn muốn hiển thị nút. Ví dụ: nếu bạn muốn thêm một nút có nút tiêu đề mới sau Trang chủ bây giờ bạn phải thêm mã bên dưới sau mã nút Home:

<li><a href="#" data-title="new button">new button</a></li>   

The overall code should look like below code:

<div id="cssmenu" class="dropdown">
<ul>
   <li class="active"><a href="#" data-title="Home">Home</a></li>
   <li><a href="#" data-title="new button">new button</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
   <li><a href="#" data-title="Company">Company</a></li>
   <li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>

Tương tự để loại bỏ một nút loại bỏ mã của nó. Ví dụ: để xóa nút mới, bạn phải xóa <li> <a href="#" data-title="new button"> nút mới </a> </ li> khỏi mã ở trên.
Thẻ tìm kiếm: Menu blogger, cách thêm menu 3D trong blogger, Menu blogger độc đáo, Menu cho blogger, menu dọc 3D cho blogger, menu dọc 3D cho blogger, hướng dẫn menu blogger.

Related Posts