Menu CSS3 Navigation đơn giản, đẹp cho blogspot, Web

Làm thế nào để thêm được menu ngang cho Website, blog. Thủ thuật hôm nay mình giới thiệu tới các bạn là làm 1 menu ngang Menu CSS3 Navigation đơn giản mà đẹp và cần thiết cho blog, website có nhiều mục con.

/* The CSS3 Code for the menu starts here itviet360.com */
#btrixsimplemenu{
clear:both;
margin:5px auto;
border:0px solid #000;
font-size:12px;
font-family: verdana;
height: 236px;
}

ul#li{color:black;}
ul#level-one{
width:700px;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjifC74h3vFDe4xS35NbNj0qConCEJmdnwS9StovFtbtchszDUs12vlY0SJrR0BMmT3axq-KxOnzkibPiowpJ4FL4aaIAoLvrX1rM9iBbqMKb8x13aVJmDP4b-Ky4z_rHHi0SjZf3Ga-BE/s1600/btrix_menu-back.png") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0); /* for firefox 3.6+ */
border:solid 1px #4d4d4d;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li{
width:80px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
border:solid 0px #000000;-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;
-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover{
background:#FFA500;
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-two,ul#level-three,ul#level-four{
list-style: none;
background:#FFA500 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYabmEcGQY6MVQvbQ52xQuizCdG9zdkMjDClnEU6_Km_QJGEJ4x5xqV7P4zXh6tJuJAoSY3mJ1sz73nom-9Ejwo0D3q-HGg9pzVf-ZWU_5J5fYHiQPgaQB7teWFPp5s6LxPktRnTbgtN4/s1600/btrix_menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:240px;
border:0px solid red;
}
ul#level-two li,ul#level-three li,ul#level-four li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnXNUhBH5I-o0uD6Zpn6YbFOR3optmztPWtPP1TUE_QrpzKWPYj0Oxx4BLjtG-tRj03MgmdQ7Nbk5WxzIidFlkCB8lJsHC5BPfPHCoU2PbSJ2_NvDruhqRTXMoezKKRVwx9onhdep494/s1600/btrix_menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #c0c0c0); /* for firefox 3.6+ */
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}
ul#level-one li:hover > ul#level-two,ul#level-one li:hover > ul#level-three,ul#level-one li:hover > ul#level-four {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}
ul#level-three li:hover{
background: #00BFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3SWxwUuJBc3jLI_Lo3QQr-BdshgsQmdpIwfoQBvCWIkqnl4IXZ0QY663TwFMUy2mZVXG25eCZYlXejeJbAbKdCuJyqmcNqvxKeFNlqsM5dMehZDEiLvakw-qVNg-2R2N91O1MYfn-q4/s1600/btrix_menu-li-blue.png) repeat-x bottom left;
background: -webkit-gradient(linear, left top, left bottom, from(#00BFFF), to(#1E90FF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #00BFFF, #1E90FF); /* for firefox 3.6+ */
border:solid 0px #000000;
-moz-border-radius-topleft: 11px;-moz-border-radius-topright:11px;-moz-border-radius-bottomleft:11px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:11px;-webkit-border-top-right-radius:11px;-webkit-border-bottom-left-radius:11px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:11px;
border-top-right-radius:11px;
border-bottom-left-radius:11px;
border-bottom-right-radius:10px;
}

Lưu mẫu (Save Template) lại.
3. Vào Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript (Tiện ích này nên thêm ở trên tiệc ích POST)
4. Dán code dưới đây vào tiện ích vừa thêm:

<div id="btrixsimplemenu">
<ul id="level-one">
<li><a href="#">Home</a></li>
<li>Campaign
<ul id="level-two">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>Download
<ul id="level-three">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li>List
<ul id="level-four">
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
<li><a href="#">sub-Second</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Demo</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Lưu lại và xem kết quả nhé. :) Tags: html-css , Thu thuat , Thu thuat blogspot