ဒီေန႔ေတာ့ ဘေလာ့ဂါေတြအတြက္ menu အလန္းေလး မွ်ေဝခ်င္ပါတယ္ 3dစတိုင္ေလးေတြပါ
Adding Horizontal 3D menu in blogger:
Step 1: Go to blogger dashboard.
Step 2: Select layout in menu on left side.
Step 3: Click on add a gadget and scroll down to Html/javascript.
Step 4: Copy below code and paste it into Html/javascript window:
အဆင္ေျပပါတယ္ေနာ္ ပံုမွန္ေလးပဲဆက္သြားရေအာင္
ေအာက္ကဟာေလးပါပဲ
<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>
Adding Vertical 3D menu in blogger:
ဒါကေတာ့ေဒါင္လိုက္ေလးပါ
သူ႔အတြက္ ေအာက္ကကုဒ္
<nav class="mainNav">
<ul>
<li><a href="#" data-title="Home">Home</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Clients">Clients</a></li>
<li><a href="#" data-title="Contact Us">Contact</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
<li><a href="#" data-title="Feedback">Feedback</a></li>
</ul>
</nav>
<style>
.mainNav {
float: left;
transform: perspective(500px);
transform-style: preserve-3d;
}
.mainNav li{
padding:0px;
}
.mainNav ul {
list-style: none;
padding: 0px;
}
.mainNav a {
background-color: #fafafa;
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
backface-visibility: hidden;
box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
inset 0 0 1.5em hsla(0,0%,0%,.25);
color: #322;
display: block;
font: bold 1em/3 sans-serif;
padding: 0 1.5em;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
transition: .5s;
transform-origin: 50% 0;
transform-style: preserve-3d;
width: 6em;
}
.mainNav a:after {
background-color: inherit;
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
inset 0 0 1.5em hsla(0,0%,0%,.4);
bottom: 0;
color: #fff;
content: attr(data-title);
left: 100%;
line-height: 3;
position: absolute;
top: 0;
transform: rotateY(90deg);
transform-origin: 0 0;
width: 100%;
}
.mainNav a:before {
background-color: inherit;
background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
bottom: 0;
content: '';
height: 9em;
left: 100%;
position: absolute;
top: 0;
transform-origin: 0 0;
width: 100%;
}
.mainNav li:nth-child(-n+2) a:before {
transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.mainNav li:nth-child(n+3) a:before {
transform: rotateX(-90deg) translateX(-9em);
}
.mainNav li:hover a {
transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
z-index: 10;
}
</style>
သို႔မဟုတ္ 
