Đặc điểm: Sunrise Gloss Drop Down Menus không sử dụng các file javarscrip do vậy các bạn có thể yên tâm về tốc độ của nó.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> .@charset "utf-8"; /* CSS Document */ body{ padding: 25px; } /* ----Navigation Structure -------- */ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCG2PIZJmdtpjWYANq7EYKXg0Yh8konBqXv-U69ujpKMzayVcbTAGOkKa9SnHTtD-ytQYiykcOLw4RBiepT7-ebYxgHb2KCtDgYd-YWvcjksZXRHl5GnZ-d_mq4iirtitnUpDrqNkuxRIs/s1600/nav-bg-namkna-blogspot.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: #FFFFFF; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVc66UaOEYe2K0Rruk6NQuoz9le3-8BPMK4eoHEh_VRaSjlAlNjfk0AqWle5N-0eXlZjgKeeRnZcpNVMY9U5bDVQdUYvj4ddAeE8N1ylmWnGQxLZjR4g2XPBzXrMHXOttRvEmZbb83LFH/h120/item-primary-bg-namkna-blogspot.gif); background-repeat: no-repeat; background-position: top; } #nav-container a:hover{ color: #6C3600; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVc66UaOEYe2K0Rruk6NQuoz9le3-8BPMK4eoHEh_VRaSjlAlNjfk0AqWle5N-0eXlZjgKeeRnZcpNVMY9U5bDVQdUYvj4ddAeE8N1ylmWnGQxLZjR4g2XPBzXrMHXOttRvEmZbb83LFH/h120/item-primary-bg-namkna-blogspot.gif); background-repeat: no-repeat; background-position: center; } /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4S2kN1PcMmMD9TSu8B-2a8b5cLUEQ9HCq0mNNYWfSSJfM1o038KTevxBlEyPaHu7w58cRKUkNY_bGrJ10BfeOIspO6j0ZsYC0a0Y5V3bLsnoBTdHEBL5tXrUkuTxrZCUrfmjrSlllVIYV/h120/item-secondary-container-bg-namkna-blogspot.jpg); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500; } /* -------- Secondary Items------ */ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zoZmTRgR5mSDoX-Qf_QyI7TyB5KY0pT58WQaHx81pYz71NB2OiMS4oKoylsk5BCkNlTeVW-mrK-9Ga8dijtgvh-TehCd01FodXJ8WxDotDN_iClC9otP30OyYQFt3G3zLw5EdNg7Lpjo/h120/item-secondary-bg-namkna-blogspot.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; } /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zoZmTRgR5mSDoX-Qf_QyI7TyB5KY0pT58WQaHx81pYz71NB2OiMS4oKoylsk5BCkNlTeVW-mrK-9Ga8dijtgvh-TehCd01FodXJ8WxDotDN_iClC9otP30OyYQFt3G3zLw5EdNg7Lpjo/h120/item-secondary-bg-namkna-blogspot.jpg); background-repeat: no-repeat; color:#CC0000; } /* ---- Secondary Item Titles ---- */ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMfgw-DVV9C14t_O9IikS2LcFhAvyzCXlurcRlqWGVgeEEElbSTHzKe78LAdnhzL88VuYKgPTvIxORyUPQdkcmtgKOh4iPFsWoKG3R98RegbiZXwsWMSegGzNtfM4hRsI3O2oDE36C5smO/h120/item-secondary-title-bg-namkna-blogspot.jpg); */ background-repeat: no-repeat; font-weight:bold; } /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; } /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }
6- Lưu lại
7- Thêm đoạn code bên dưới vào trước thẻ </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)
<div class="nav-container-outer"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmTXTUQB8SsWnxaT_NR72TMBweWTVIAzYyFFmqGEBVtLfjcPpt_5Ujr1Lu86LQJZFzGLYEAA1_Ny3cEUi6xiFjwKfsjHWuNrfap6gTC_S-7XcIKbc3N5UKKD02FYnxxyq6rpdaPYC0qOG9/s1600/nav-bg-l.jpg" alt="" class="float-left" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtUeQ5Ob9xoX1mZ8TqUARmSJWNGScXTBVfr2ltU4877OmnAsCfLk0B_y73B1uyEXkaebIZ-zgFizYhlAF_a3j_hUAdAqpyO31_DBsAV37n8qPfsxOK8siovPxFd7ChYZlNCMqjlrRWuZkM/s1600/nav-bg-r.jpg" alt="" class="float-right" /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#">HOME</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Products</a> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Quality</a> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Services</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Very Long Item</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Fully Flexible</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li class="clear"> </li></ul> </div>Chúc thành công!
Nhận xét
Mình muốn xóa hết code menu cũ trong Technicians Blog của mình để sử dụng menu của NamKna nhưng không biết tất cả gồm các đoạn nào nên bạn giúp mình với. Cảm ơn bạn !
Trả lờiXóa@Việt Nam Mình sẽ trả lời bạn trong 3 lần replly vì số ký tự quá nhiều:
Trả lờiXóaĐoạn 1:
.menucontent{width:960px;background:url(http://2.bp.blogspot.com/-9jO0k83i5Is/TvBz4BoVRBI/AAAAAAAAAVQ/4YnnkZzEJAo/s1600/menurepeat.gif) repeat-x;height:64px;position:relative;margin-top:10px}
.mainmenu{width:950px;float:left}
.mainmenu .menu{font-size:12.5px}
.mainmenu li{float:left;line-height:38px;font-weight:bold;display:inline;padding:0 3px}
.mainmenu span,.active span{padding-right:8px}
.active a,.mainmenu li a:hover{background:url(http://3.bp.blogspot.com/-WL4rr0Ny2vY/TvB0F252_zI/AAAAAAAAAVc/oED76UTF4L8/s1600/menuhoverleft.gif) top left no-repeat;float:left}
.mainmenu li:hover ul{display:block}
.active span,.mainmenu li a:hover span{background:url(http://2.bp.blogspot.com/-2OGSKEIMm0k/TvB0GRM6QNI/AAAAAAAAAVk/sAWVbSY9oYQ/s1600/menuhoverright2.gif) no-repeat right;float:left;display:block}
.mainmenu .menu a{color:#fff;padding-left:12px;float:left;display:inline}
.bodermneu{background:url(http://1.bp.blogspot.com/-qqJvfEQ5PE4/TvB0FuLwSyI/AAAAAAAAAVY/2cqW1IK0lBk/s1600/bodermenu.gif) right no-repeat}
.bodermenu{background:none}
.bodermneu ul{list-style-type:none;float:left;position:absolute;top:36px;left:10px;width:750px}
.bodermneu ul li{display:block;line-height:18px;font:500 12px/28px Arial;color:#fff;background:url(http://1.bp.blogspot.com/-47eDaMJw-ko/TvB0SqQ0acI/AAAAAAAAAVw/gs0RsiLrw70/s1600/dot.gif) no-repeat scroll left transparent;margin-right:8px}
.bodermneu ul li a,.bodermneu ul li a:hover{color:#fff;padding-left:5px;float:left;background:none}
.menuleft{background:url(http://2.bp.blogspot.com/-UN89rmQKcaI/TvB0hRXr9dI/AAAAAAAAAV8/PI7ZhpLwU8E/s1600/menuleft.gif) left top no-repeat;width:4px;height:64px;display:block;float:left}
.menuright{background:url(http://1.bp.blogspot.com/-aG3WzJsxmUo/TvB0h6Myr3I/AAAAAAAAAWI/R659Eu010y0/s1600/menuright.gif) right top no-repeat;width:4px;height:64px;display:block;float:right}
.menufooter{background:url(http://4.bp.blogspot.com/-bkVX-Kp_DyI/TvB0ghTvx5I/AAAAAAAAAV4/xx_GyTXMyFU/s1600/menubgfooter.gif) no-repeat bottom;height:14px;margin-top:-1px}
.submenu{width:950px;float:left;color:#bcbcbc;z-index:100;margin-top:4px}
.submenu .hot{width:550px;float:left}
.submenu h4{float:left;width:90px;font:700 12px/18px Arial;color:#fff;text-transform:uppercase}
.submenu a{color:#BCBCBC}
.submenu .hotcnt{width:460px;float:left}
.submenu .hotcnt{}
.colorheader{color:#fff;font-weight:bold}
.submenu p{float:left}
@Việt Nam Đoạn 2 bắt đầu từ:
Trả lờiXóa<div id='menu'>
Tới trước thẻ:
<div id='wrap'>
Mình rất thích cái menu này nhưng mà khi hoàn thành thì nó ko hiện hình nền màu da cam và chỉ khi chỉ chuột vào nó mới xuất hiện, nên rất khó nhìn, có cách nào khắc phục không hả ban.
Trả lờiXóa