.jpg)
.jpg)
Chắc hẳn bạn chưa nghe đến mẫu menu này bao giờ phải không. Bài viết này được namknaviết theo yêu cầu của bạn Luân Hồ trong bài viết này Các bạn có thể xem hình ảnh demo của menu này như hình ảnh bên dưới hoặc là xem trên blog demo nha:
☼ Cách tạo Menu xổ dọc từ dưới lên trên cho blogspot
1- Đăng nhập vào Blog2- Vào Phần tử trang
3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)
4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.
<style type='text/css'>
body{padding: 3em; }
#menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;}
#menu {
margin-top: 300px;
float: left;
line-height: 10px;
left: 200px;}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;}
#menu li{
position:relative;
float:left;}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 140px;}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
bottom:100%;
}
</style>
<div id="menu">
<ul>
<li><center><a href="/">Home</a></center>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Disclaimer</a></li>
</ul>
</li>
<li><center><a href="#">Practice Areas</a></center>
<ul>
<li><a href="#">Civil Law</a></li>
<li><a href="#">Criminal Law ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</li></ul>
<li><a href="#">Family Law ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</li></ul>
<li><a href="#">Personal Injury ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</li></ul>
<li><a href="#">Traffic Offenses ›</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Wordpress</a></li>
</li> </ul>
<li><a href="#">FAQ</a> </li>
</ul>
</li>
<li><center><a href="#">Attorney</a></center>
<ul>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
<li><a href="#">X</a></li>
</ul>
</li>
<li><center><a href="#">Contact Us</a></center>
<ul>
<li><a href="#">Locations ›</a>
<ul>
<li><a href="#">Rockville Office</a></li>
<li><a href="#">Frederick Office</a></li>
<li><a href="#">Greenbelt Office</a></li>
</li></ul>
<li><a href="#">Phone Directory</a></li>
<li><a href="#">Mailing Address</a></li>
</ul>
</li>
<li><center><a href="#">Resources</a></center>
<ul>
<li><a href="#">Helpful Links</a></li>
<li><a href="#">Affiliates ›</a>
<ul>
<li><a href="#">Healthcare Providers</a></li>
<li><a href="#">Insurance Companies</a></li>
</li></ul>
</li></ul>
<li><center><a href="#">News & Events</a></center>
<ul>
<li><a href="#">Press Articles</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</li></ul>
<li><center><a href="#">Espanol</a></center>
<ul>
<li><a href="#">Mamkna menu</a></li>
</li></ul>
</ul>
</div>» Tùy chỉnh:
- Thay thế các dấu thăng thành liên kết của trang bài viết hoặc trang blog mà bạn muốn.
- Thay các tiêu đề bài viết tương ứng màu xanh ngay sau menu của bạn nha,
Các bạn hãy đón đọc các style tiếp theo được mình giới thiệu cho kiểu menu này nha,
Lưu ý nhỏ: Vì menu này xổ dọc từ dưới lên trên nên các bạn nên đặt nó giữa trang hoặc đặt dưới chân blog như vậy nó sẽ không bị che khuất bởi trình duyệt khi bạn đặt nó ở trên đầu.Và tất nhiên nếu có bất kỳ thắc mắc hay khó khăn nào khi áp dụng nó hãy comment ở bên dưới mình sẽ trả lời, và hãy like bài viết này để chia sẻ nó đến với nhiều người hơn và để ủng hộ namkna nha.
Nguồn: Namkna
Comments[ 0 ]