biettuot: Mega Dropdown Menu đẹp cho Webssite

Mega Dropdown Menu đẹp cho Webssite - Blogspot. Code CSS Mega Dropdown Menu đẹp cho Webssite - Blogspot. Tạo Mega Dropdown Menu đẹp cho Webssite - Blogspot

Mega Drop menu - Điểm đặc biệt của kiểu menu này là bạn có thể chèn cả một văn bản hay một tiện ích vào. Và kết hợp cả 2 đầu của thanh menu để tạo các sub menu. Thêm 1 điều là menu hoàn toàn bằng CSS do vậy các bạn yên tâm về tốc độ load của nó nha

Bạn xem Demo ngay tại Bít Tuốt luôn nhé vì hiện tại Bít Tuốt Blog đang sử dụng loại Mega Dropdown Menu
Download demo tại đây

Cách tạo Mega Dropdown Menu cho Webssite - Blogspot như sau

Bước 1: Vào phần sửa code của website hoặc Blogspot bạn thêm đoan code dưới đây vào trước thẻ </head>

Cách 1 thêm link trực tiếp tới file CSS

Cách 2 thêm css trực tiếp vào code

body, ul, li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}

#menu {
list-style:none;
width:938px;
height:43px;
padding:0px 20px 0px 20px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;

}

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 8px;
margin-right:30px;
margin-top:7px;
border:none;
}

#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
font-weight: bold;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
padding-right:21px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXxs8EpuBcfE5PvJ8I_Wpg0YDTFp4Gv4QIut-GQPthh4i_pzqceRG48Aq903uNLuc2PUBvT9pDoNQiYld-iOrdRrsaW6mpZztCqZV6P-VQWf3xVOs8SywOXnq4f0u8r-sq95wVxNu3vs/s1600/drop.gif") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGZipqJ9OwRdcxwAQMGlt4ywGaGK5g6-63z6azP0mZYeX2SpBWj8DQNmY7ypGgS41vGIlmMwWG5guSX7qaEYCUVOI1_lSpf0Zg4LDi9mWN7NQRkbT_ZW4RIx85khP3lRMvezkYAa7UCnI/s1600/drop.png") no-repeat right 7px;
}

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
z-index: 1000;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}

.col_1, .col_2, .col_3, .col_4, .col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}

#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}

.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}

.imgshadow { /* Better style on light background */
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
width:auto;
float:left;
margin:5px 15px 5px 5px;
}

#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}

#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

Bước 2: Thêm đoạn code dưới đây vào phần bạn muốn hiển thị

<ul id='menu'>

<li><a class='drop' href='/'>Home</a>

<div class='dropdown_2columns'>

<div class='col_2'>
<h2>Bít Tuốt Blog</h2>
</div>

<div class='col_2'>
<p>Chào mừng bạn đã ghé thăm <b>Bít Tuốt Blog</b>. Nơi chia sẻ lưu trữ các thông tin hữu ích nhất</p>
<p><b>Bít Tuốt</b> nơi chia sẻ các Thủ thuật Blog - Các mẹo Làm đẹp - Kỹ năng - Các tin giải trí - Download tổng hợp ...</p>
</div>

</div>

</li>

<li><a class='drop' href='#'>Chuyên Mục HOT</a>

<div class='dropdown_4columns'>

<div class='col_4'>
<h2>Chuyên mục Hot nhất tại Bít Tuốt</h2>
</div>

<div class='col_1'>

<h3>Thủ Thuật</h3>
<ul>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Tin Học'>Thủ Thuật Tin Học</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Office'>Thủ Thuật Office</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Game'>Thủ Thuật Game</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Blogspot - Wordpress - Joomla'>Thủ Thuật Blog</a></li>
</ul>

</div>

<div class='col_1'>

<h3>Download</h3>
<ul>
<li><a href='http://bittuot.blogspot.com/search/label/Download Game'>Download Game</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Download Phần Mềm - Crack'>Download Phần Mềm</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Download Phim'>Download Phim</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Phần Mềm Khác'>Phần Mềm Khác</a></li>
</ul>

</div>

<div class='col_1'>

<h3>Giải Trí</h3>
<ul>
<li><a href='http://bittuot.blogspot.com/search/label/Tin Tức Hot'>Tin Tức Hot</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Clip Hài - Video Hot'>Clip Hài - Video Hot</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Clip Shock'>Clip Shock</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Ảnh Vui'>Ảnh Hài</a></li>
</ul>

</div>

<div class='col_1'>

<h3>Danh Mục Hot</h3>
<ul>
<li><a href='http://bittuot.blogspot.com/search/label/Góc Làm Đẹp'>Góc Làm Đẹp</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Tình Yêu Giới Tính'>Tình Yêu Giới Tính</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Địa Điểm Hot'>Địa Điểm Hot</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Sức Khỏe - Đời Sống'>Sức Khỏe - Đời Sống</a></li>
</ul>

</div>

</div>

</li>

<li><a class='drop' href='#'>Nổi Bật</a>

<div class='dropdown_5columns'>

<div class='col_5'>
<h2>Danh mục nổi bật tại Bít Tuốt</h2>
</div>

<div class='col_1'>
<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Tin Học'>Thủ Thuật Tin Học</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Office'>Thủ Thuật Office</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Game'>Thủ Thuật Game</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thủ Thuật Blogspot - Wordpress - Joomla'>Thủ Thuật Blog</a></li>
</ul>
</div>
<div class='col_1'>
<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Download Game'>Download Game</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Download Phần Mềm - Crack'>Down Phần Mềm</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Download Phim'>Download Phim</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Bảng Giá'>Bảng Giá</a></li>
</ul>

</div>
<div class='col_1'>

<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Mẹ Và Bé'>Mẹ và Bé</a></li>
<li><a class='drop' href='http://bittuot.blogspot.com/search/label/Góc Kỹ Năng'>Góc Kỹ Năng</a></li>
<li><a href='Tư Vấn Tiêu Dùng'>Tư Vấn Tiêu Dùng</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Luật Pháp'>Tìm Hiểu Luật</a></li>
</ul>

</div>

<div class='col_1'>

<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Học Nấu Ăn'>Học Nấu Ăn</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Hợp Tác Kinh Doanh'>Hợp Tác Kinh Doanh</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Tuyển Dụng'>Tin Tuyển Dụng</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Góc Sinh Viên'>Góc Sinh Viên</a></li>
</ul>

</div>

<div class='col_1'>

<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Mẹo Vặt'>Mẹo Vặt</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Ảnh Vui'>Ảnh Hài</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Truyện Hay'>Truyện Hay</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thơ Vui'>Thơ Vui</a></li>

</ul>

</div>

<div class='col_5'>
<h2>Bài quảng cáo - Tin Nổi Bật tại Bít Tuốt</h2>
</div>

<div class='col_3'>

<img alt='Vieskin Collagen' class='img_left imgshadow' height='70' src='http://collagenvh.com/wp-content/uploads/2013/06/vieskin-collagen1.jpg' width='70'/>
<p><b>Tinh Chất Vieskin Collagen S</b> - Dược mỹ phẩm cao cấp làm mờ nếp nhăn, vết sẹo trứng cá sau mụn,vết nám,vết thâm,vết tàn nhang ...Liên hệ Hotline: 0912 351 166 để được tư vấn chi tiết..<a href='http://goo.gl/Lw6uBt'>Xem chi tiết...</a></p>

<img alt='' class='img_left imgshadow' height='70' src='http://root.vn/up/download-idm-full-crack-2013.jpg' width='70'/>
<p><b>Key IDM - Crack IDM mới nhất cập nhật liên tục dùng vĩnh viễn cho mọi phiên bản</b> - Click ngay để biết thêm chi tiết về : Key IDM,Crack IDM - Dùng vĩnh viễn cho mọi phiên bản tại <a href='http://bittuot.blogspot.com/2013/05/key-idm-crack-idm-dung-vinh-vien-cho-moi-phien-ban.html'>Read more...</a></p>

</div>

<div class='col_2'>

<p class='black_box'>Mục đích ra đời của Blog Bít Tuốt là để Bít Tuốt ghi lại những gì mình đã tìm hiểu được,những gì Bít Tuốt biết để chia sẻ cho mọi người cùng biết.<br/><br/><b> Bít Tuốt Blog trang thông tin tổng hợp</b>.Nơi chia sẻ những kinh nghiệm hot - Thủ thuật hay. Blog Bít tuốt nơi chia sẻ lưu trữ các thông tin hữu ích nhất</p>

</div>

</div>

</li>

<li class='drop'><a class='drop' href='http://bittuot.blogspot.com/search/label/Góc Làm Đẹp'>Góc Làm Đẹp</a>

<div class='dropdown_1column align_right'>

<div class='col_1'>

<ul class='simple'>
<li><a href='http://bittuot.blogspot.com/search/label/Làm Đẹp Da'>Làm đẹp da</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Trang Điểm'>Trang Điểm</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Làm Đẹp Tóc'>Làm Đẹp Tóc</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Mặc Đẹp'>Mặc Đẹp</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Mẹo Làm Đẹp'>Mẹo Làm Đẹp</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Video Làm Đẹp'>Video làm đẹp</a></li>
</ul>

</div>

</div>

</li>

<li class='drop'><a class='drop' href='http://bittuot.blogspot.com/search/label/Góc Kỹ Năng'>Góc Kỹ Năng</a>

<div class='dropdown_1column align_right'>

<div class='col_1'>

<ul class='simple'>
<li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Bán Hàng'>Kỹ năng bán hàng</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Xin Việc'>Kỹ năng xin việc</a></li>
<li><a href='Kỹ Năng Giao Tiếp'>Kỹ năng giao tiếp</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Làm Việc Nhóm'>Kỹ năng làm việc nhóm</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Kỹ Năng Thuyết Trình'>Kỹ năng thuyết trình</a></li>
<li><a href='Kiếm Tiền Qua Mạng'>Kiếm tiền qua mạng</a></li>
</ul>

</div>

</div>

</li>

<li class='drop'><a class='drop' href='#'>Chuyên Mục Khác</a>

<div class='dropdown_3columns align_right'>

<div class='col_3'>
<h2>Danh sách các danh mục</h2>
</div>

<div class='col_1'>

<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Mẹ Và Bé'>Mẹ và Bé</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Tin Khuyến Mãi'>Tin Khuyến Mãi</a></li>
<li><a href='Tư Vấn Tiêu Dùng'>Tư Vấn Tiêu Dùng</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Luật Pháp'>Tìm Hiểu Luật</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Bảng Giá'>Bảng Giá</a></li>
<li><a href='http://bittuot.blogspot.com/'>Thủ Thuật Blogger</a></li>
</ul>

</div>

<div class='col_1'>

<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Học Nấu Ăn'>Học Nấu Ăn</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Hợp Tác Kinh Doanh'>Hợp Tác Kinh Doanh</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Tuyển Dụng'>Tin Tuyển Dụng</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Góc Sinh Viên'>Góc Sinh Viên</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Góc Phụ Nữ'>Góc Phụ Nữ</a></li>
<li><a href='http://bittuot.blogspot.com/'>Thủ Thuật Blog</a></li>
</ul>

</div>

<div class='col_1'>

<ul class='greybox'>
<li><a href='http://bittuot.blogspot.com/search/label/Mẹo Vặt'>Mẹo Vặt</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Giải Trí'>Giải Trí</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Widget Blogspot'>Widget Blogspot</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Truyện Hay'>Truyện Hay</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Thơ Vui'>Thơ Vui</a></li>
<li><a href='http://bittuot.blogspot.com/search/label/Dịch Vụ Hot'>Dịch Vụ Hot</a></li>

</ul>

</div>

<div class='col_3'>
<h2>Bài viết nổi bật</h2>
</div>

<div class='col_3'>
<img alt='' class='img_left imgshadow' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjHzJySl-j0030zM8JivM75UOvnigaw18XnGrPsF8Wqx_DGypQq-RGn5sg94rS8qPr4XJu0VovmJ44xJNuXc4hAec3bkY9uc5ltIvmxi_n_qNABx8Xds_xDBfbu8NE4PN6bId7TuAOPU/s640/template+01.png' width='70'/>
<p><b>Tổng hợp Các trang web cung cấp Theme Blogspot miễn phí</b>. Website cung cấp Theme Blogspot - Template Blogspot Free cho những ai cần tìm 1 theme blogspot đẹp<a href='http://bittuot.blogspot.com/2013/08/theme-blogspot-free-web-cung-cap-template-blogspot.html'>Read more...</a></p>

<img alt='' class='img_left imgshadow' height='70' src='http://doctruyenhay.vn/uploads/news/images/truyen-cuoi2.jpg' width='70'/>
<p><b>Ảnh bìa Facebook siêu độc - siêu đẹp và hài hước nhất</b> cho các bạn cần trang trí cho Timeline Facebook do Bít Tuốt sưu tầm và chia sẻ<a href='http://bittuot.blogspot.com/2013/06/anh-bia-facebook-doc-dep-hai-huoc-nhat.html'>Read more...</a></p>
</div>

</div>

</li>

</ul>

Các bạn sửa theo ý thích của các bạn nhé. Lời Khuyên : Các bạn nên down demo về để xem chi tiết hơn
Chúc các bạn thành công !

biettuot

Chủ Nhật, 22 tháng 9, 2013

Mega Dropdown Menu đẹp cho Webssite - Blogspot

Không có nhận xét nào:

Đăng nhận xét