» 
Giới tính
demo:http://a1tinhgia3.co.cc/html-h46.htm
* Trước hết mang cả code sau về dán vô một trang html rồi xem thử nó ra cái gì
* Tiếp theo cho mình hỏi : Giả sử bạn đã rất thành thạo trong việc sử dụng thanh menu này thì bạn sẽ đặt những lệnh gì trên đó, nghỉa là bạn sẽ thay các link trong đó bằng link gì của bạn ? Xác định điều này rất quan trọng đấy. Xác định là cần rồi thì bạn bắt đầu sửa code của nó nhé:
Đọc thêm bài viết tại : http://www.vn-xiteen.tk/t2894-topic#ixzz1V5BgwvIh
* Phần <style> là để định dạng cho nền, font chử, kích thước , khoảng cách... nếu không thạo thì giữa nguyên vậy đẹp rồi.
* Thay các link bằng link của form bạn Bạn tự nghiên cứu. Mình cho ví dụ thôi:
Đây là menu Add-ons
Ví dụ mình đã sửa menu này lại thành menu Open như sau
* Trước hết mang cả code sau về dán vô một trang html rồi xem thử nó ra cái gì
* Tiếp theo cho mình hỏi : Giả sử bạn đã rất thành thạo trong việc sử dụng thanh menu này thì bạn sẽ đặt những lệnh gì trên đó, nghỉa là bạn sẽ thay các link trong đó bằng link gì của bạn ? Xác định điều này rất quan trọng đấy. Xác định là cần rồi thì bạn bắt đầu sửa code của nó nhé:
Đọc thêm bài viết tại : http://www.vn-xiteen.tk/t2894-topic#ixzz1V5BgwvIh
- Code:
<style type="text/css">
/* top menu */
#nav ul#mainmenu {list-style:none inside none;padding:0 274px 0 26px;margin:0 -2px 16px -2px;background:url('http://www.opera.com/bitmaps/mainmenu/menu.png') no-repeat 100% 100%;height:72px;min-height:72px;height:auto !important;position:relative;z-index:998;}
#nav ul#mainmenu li a {max-height:33px;}
#nav li {color:#fff;position:relative;float:left;margin-top:32px;list-style-image:none;}
#nav li span {background-color:#2c2c2c;background-color:rgba(44,44,44,0.5);}
#nav li.dl span {background-color:transparent;text-decoration:underline;}
#nav li a {display:block;padding:0 18px;height:33px;color:#fff;text-decoration:none;white-space:nowrap;}
#nav li.on, #nav li:hover, #nav li:focus {background:transparent url('http://www.opera.com/bitmaps/mainmenu/over.png') no-repeat 50% 100%;}
#nav li.support {text-indent:-999em;width:17px;float:right;}
#nav li.support a {background:url('http://www.opera.com/bitmaps/mainmenu/support_01.png') no-repeat 0 0;padding:0;}
#nav li.support a:hover, #nav li.support a:focus {background-position:-17px 0;}
/* Top menu dropdowns */
#nav li ul {
position:absolute;
z-index:999;
min-width:150px;
background-color:#CC0F16;
color:#fff;
top:33px;
list-style:none;
margin:0 0 0 -999em;
padding:5px 0;
background-image:none;
opacity:0;
transition:opacity 0.25s ease-out;
-o-transition:opacity 0.25s ease-out;
display:none;
}
#nav li:hover ul, #nav li:active ul, #nav li:focus ul, #nav li.sfhover ul {
margin-left:0;
opacity:1;
display:block;
}
#nav li ul li,#nav li ul li:hover,#nav li ul li:focus {
min-width:180px;
font-size:11px;
float:none;
margin:0;
padding:0;
background:transparent none;
}
#nav li ul li + li {
border-top:1px dotted #FF473F;
border-collapse:collapse;
}
#nav li ul a, #nav li.on ul a {
padding:1em 3em 1em 1.5em;
margin:0;
height:auto;
color:#fff;
line-height:1em;
display:block;
background-image:none;
}
#nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {
color:#fff;
background-color:#900;
background-image:none;
}
#nav li ul li.dl {
border:0;
background-color:#333;
}
#nav li ul li.dl a {
background:#444 url('http://www.opera.com/bitmaps/mainmenu/dlcircle.png') no-repeat 97% 12px;
}
#nav li ul li.dl {
border-top:1px dotted #666;
}
#nav li ul li.dl:hover, #nav li ul li.dl:hover a {
background-color:#900;
background-position:97% -28px;
}
#nav li ul li.dl b {
display:block;
}
#operamenu {width:968px;margin:0 auto; padding-top: 3px;font: normal 12px Tahoma;}
</style>
<div id="operamenu"><div id="nav"><ul id="mainmenu"><li class="home"><a href="/" accesskey="1"><span>Home</span></a> </li><li class="products"><a href="/products/" accesskey="2"><span>Browsers</span></a><ul class="hide-mobile">
<li><a href="/browser/">Opera for PC, Mac & Linux</a></li>
<li><a href="/mobile/">Opera for phones</a></li>
<li><a href="/devices/">Opera for devices</a></li>
<li class="dl"><a href="/browser/download/">
<b>Opera 10.62</b>
Download Opera</a></li>
<li class="dl mobile"><a href="/mobile/download/">
<b>Mobile phones</b>
visit <span>m.opera.com</span> with your phone</a></li>
</ul> </li><li class="addons"><a href="/addons/" accesskey="3"><span>Add-ons</span></a><ul class="hide-mobile">
<li><a href="http://unite.opera.com/applications">Opera Unite</a></li>
<li><a href="/widgets/">Opera Widgets</a></li>
<li><a href="/link/">Opera Link</a></li>
<li><a href="/mail/">Opera Mail</a></li>
<li><a href="/turbo/">Opera Turbo</a></li>
</ul> </li><li class="community"><a href="/community/" accesskey="4"><span>Community</span></a><ul class="hide-mobile">
<li><a href="http://my.opera.com/community/">My Opera</a></li>
<li><a href="http://my.opera.com/chooseopera/blog/">Opera news blog</a></li>
<li><a href="/company/education/">Education</a></li>
<li><a href="http://my.opera.com/community/forums/">Forums</a></li>
</ul> </li><li class="developer"><a href="/developer/" accesskey="5"><span>Developer</span></a><ul class="hide-mobile">
<li><a href="/developer/tools/">Developer tools</a></li>
<li><a href="/developer/events/">Events</a></li>
<li><a href="/dragonfly/">Opera Dragonfly</a></li>
<li><a href="/developer/wsc/">Web Standards Curriculum</a></li>
<li><a href="/docs/specs/">Web specifications support in Opera</a></li>
<li><a href="http://dev.opera.com/">Dev Opera</a></li>
</ul> </li><li class="company"><a href="/company/" accesskey="6"><span>Company</span></a><ul class="hide-mobile">
<li><a href="/company/">About Opera</a></li>
<li><a href="/press/">Press</a></li>
<li><a href="/business/">Business</a></li>
<li><a href="/company/jobs/">Jobs</a></li>
<li><a href="/company/investors/">Investors</a></li>
<li><a href="/smw/">State of the Mobile Web</a></li>
<li><a href="/company/events/">Events</a></li>
<li><a href="/company/contact/">Contact</a></li>
</ul> </li><li class="support"><a href="/support/" title="Support">Support</a></li></ul></div>
- Code:
http://www.opera.com/bitmaps/mainmenu/menu.png
* Phần <style> là để định dạng cho nền, font chử, kích thước , khoảng cách... nếu không thạo thì giữa nguyên vậy đẹp rồi.
* Thay các link bằng link của form bạn Bạn tự nghiên cứu. Mình cho ví dụ thôi:
Đây là menu Add-ons
- Code:
<li class="addons"><a href="/addons/" accesskey="3"><span>Add-ons</span></a>
<ul class="hide-mobile">
<li><a href="http://unite.opera.com/applications">Opera Unite</a></li>
<li><a href="/widgets/">Opera Widgets</a></li>
<li><a href="/link/">Opera Link</a></li>
<li><a href="/mail/">Opera Mail</a></li>
<li><a href="/turbo/">Opera Turbo</a></li>
</ul> </li>
Ví dụ mình đã sửa menu này lại thành menu Open như sau
- Code:
<li class="community"><a href="/community/" accesskey="4"><span>Open</span></a>
<ul class="hide-mobile">
<li> <a href="http://trekhuyettat.org/forum-f35/">Giao lưu-Kết bạn</a></li>
<li> <a href="http://trekhuyettat.org/forum-f57/">Chúc mừng</a></li>
<li> <a href="http://trekhuyettat.org/forum-f58/">Tán gẫu</a></li>
<li> <a href="http://trekhuyettat.org/forum-f14/"> Blog thành viên</a></li>
<li> <a href="http://trekhuyettat.org/forum-f23/">Những mảnh đời bất hạnh</a></li>
<li> <a href="http://trekhuyettat.org/forum-f12/">Những mái ấm TÌNH THƯƠNG</a></li>
<li> <a href="http://trekhuyettat.org/forum-f45/">Những túp lều lý tưởng</a></li>
<li><a href="http://trekhuyettat.org/forum-f44/">Gương sáng soi chung</a></li>
<li><a href="http://trekhuyettat.org/forum-f64/">Chủ đề khác</a></li>
</ul>
</li>
- Code:
<tr><td>
CHO VÀO ĐÂY
</td></tr>
- Code:
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP} bgcolor="#5ECBFE" height="35" width="100%" background="http://i36.servimg.com/u/f36/14/26/60/46/hailan10.gif"><font size="4"><b>{GENERATED_NAV_BAR}</b></font>
</td></tr>
