Nhịp sống "MEN".: Tạo menu đa cấp cho blog với CSS và CSS3

Hôm nay mình giới thiệu cho mọi người một thanh menu đa cấp chỉ sử dụng CSS mà không cần hình ảnh. Giúp cho blog load nhanh hơn, chuyên nghiệp hơn.

Các bước thực hiện:

- Vào Mẫu >> Chỉnh sửa HTML

- Chèn code sau vào trước thẻ ]]></b:skin>

.CW-menu,

.CW-menu ul a:hover,

.CW-menu ul .current a, .CW-menu ul li:hover > a

{

background: #0B66BA !important;

background: -moz-linear-gradient(top, #77BAF7 0%, #2692F2 3%, #0B66BA 100%) !important;

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #77BAF7 ), color-stop(0.03, #2692F2), color-stop(1, #0B66BA)) !important;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2692F2', endColorstr='#0B66BA') !important;

color: #FFF !important;

border-radius: 6px !important;

border: solid 1px #0C65B6 !important;

-webkit-border-radius: 6px !important;

-moz-border-radius: 6px !important;

}

.CW-menu

{

font-size: 13px;

line-height: 100%;

padding: 8px 10px 2px;

margin: 0;

-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);

-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);

}

.CW-menu li

{

list-style: none;

padding: 5px 5px;

margin: 0 5px;

float: left;

position: relative;

}

.CW-menu a

{

font-weight: bold;

color: #FFF;

text-decoration: none;

outline: none !important;

display: block;

padding: 8px 10px;

margin: 0;

border: 1px solid transparent;

border-radius: 7px;

-webkit-border-radius: 7px;

-moz-border-radius: 7px;

text-shadow: 0 1px 1px rgba(0, 0, 0, .5);

}

.CW-menu li.hasSubNav a

{

border-radius: 0px;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-webkit-border-top-left-radius: 4px;

-webkit-border-top-right-radius: 4px;

-moz-border-radius-topleft: 4px;

-moz-border-radius-topright: 4px;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

.CW-menu li.hasArrow a { padding-right: 2.25em;

}

.CW-menu .current a, .CW-menu li:hover > a

{

background: #EEE;

background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));

background: -moz-linear-gradient(top, #FFF 0%, #EEEEEE 100%);

display: block;

color: #444;

cursor: pointer !important;

border: solid 1px #b4b4b4;

text-shadow: 0 1px 1px rgba(0, 0, 0, .1);

}

.CW-menu li:hover > ul { display: block !important; }

.CW-menu ul

{

background: #EEE;

background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DDDDDD));

background: -moz-linear-gradient(top, #eee, #ddd);

/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#DDDDDD'); */

width: 175px;

display: none;

padding: .5em 5px;

margin: 0;

position: absolute;

top: 42px;

left: 5px;

border: solid 1px #b4b4b4;

border-top: none;

-webkit-border-radius: 6px;

-webkit-border-top-left-radius: 0;

-moz-border-radius: 6px;

-moz-border-radius-topleft: 0;

border-radius: 4px;

border-top-left-radius: 0;

-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);

-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);

box-shadow: 2px 2px 2px rgba(0, 0, 0, .1);

}

.CW-menu ul li { padding: 0; margin: 0; float: none; }

.CW-menu ul a { color: #444 !important; font-weight: normal; text-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }

.CW-menu ul ul

{

border-top: solid 1px #b4b4b4;

left: 161px;

top: -10px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.CW-menu ul .arrow { z-index: 0 !important; top: 15px !important; }

.CW-menu:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

Lưu mẫu lại

-Tạo một Widget HTML/Javascript và dán code sau vào:

<li>

</li>

<li>

<a href="javascript:;">About</a>

<ul>

<li>

</li>

<li>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<a href="javascript:;">Contact</a>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<li>

</li>

</ul>

</div>

Lưu và thế là bạn đã có một menu tuyệt đẹp rồi!

Ngọc Tuấn sưu tầm

Trang

24 thg 3, 2013

Tạo menu đa cấp cho blog với CSS và CSS3

Xem nhiều