[chia sẻ]thanh navbar của OPERA

[thuan007]

vừa chôm chỉa được thanh navbar của opera (nhìn khá đẹp nên chôm về )

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 &amp; 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>

demo: http://a1tinhgia3.co.cc/html-h46.htm

[TrungHieu]

url('/bitmaps/mainmenu/over.png')

[thuan007]

url('/bitmaps/mainmenu/over.png')

rồi đấy anh, là cái support thui mà 8-x

[TrungHieu]

Buồn buồn kiếm chuyện chơi ấy mà

[baivong]

Sao ko thấy chia sẽ cái thành lv cho thú nuôi nhỉ?

[night_angel_236]

Cái này thì Paste vào đâu được vậy Anh Gì ơi. Em con gà

[nguyenvanty]

cái nava bar này copy vào html rồi làm gì nữa để nó hiện ra vậy bạn

[blogkien]

Cái này để làm gì thế...

[hunghsmn]

Cái này để làm gì thế...

Đây là một trong những thanh menu rất chuyên nghiệp đấy bạn ạ. Để sử dụng được nó bạn phải biết sửa nó thành của bạn, sau đó dán vào overal header. Cụ thể dán chỗ nào thì mình chỉ sau. Bạn có thể vẫn để thanh menu mặc định tồn tại song với thanh này hay thay bằng thanh này cũng được.

Mà chủ topic này sao lâu nay biến đi đâu rồi không thấy vào nữa nhỉ ?

[DeGea]

à ! Navbar dùng thay thế toolbar của forum như home , group gì ấy mà !

[blogkien]

UH cụ thể làm thế nào thì chưa ai bày.

[hunghsmn]

UH cụ thể làm thế nào thì chưa ai bày.

* Trước hết mang cả code này 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é:

* Thay tấm ảnh này http://www.opera.com/bitmaps/mainmenu/menu.png bằng ảnh của bạn ( Nếu không biết sửa phần <style> thì ảnh nên giữ nguyên kích thước giống như vậy. Tốt nhất là đem về rồi dùng một trình sửa ảnh xóa mấy chữ Opera kia rồi thay bằng tên forum bạn)

* 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 (Xin phép cho mình bỏ ngoài thẻ code để dễ minh họa)

<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>
Phần in đậm bạn giữ nguyên, chỉ thay ở giũa thôi, sửa chữ màu đỏ lại thành tên menu của bạn
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>

* Cho toàn bộ code vào trong một thẻ >tr>. Cụ thể là
<tr><td>
CHO VÀO ĐÂY
</td></tr>

* Xong rồi, bây giờ mang vào overall_header chèn vào ngay bên dưới đoạn này :

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>


Bây giờ xem mình làm thử nhé:

Code:

http://tinhthuong.123.st/forum

(Đây là forum thử nghiệm của mình)
Trong này có 3 thanh menu: Thanh trên cùng là thanh menu mặc định, thanh màu đen ở giữa là thant menu Opera mình mới sửa menu Add on thành menu Open như đẫ hướng dẫn.
Thanh màu vàng bên dưới là thanh menu mình làm để sử dụng lâu nay,hiện vẫn đang dùn. Nó cũng tương tự , cũng sử dụng các thẻ <ul><li> để tạo ra, nhưng nó hiện đại hơn của Opera một chút, ở đây mình có tạo các menu con, menu cháu, menu chắc.... Các bạn có thể rê chuột vào 2 button bên trái để tham khảo.

Chúc bạn thành công.
XIn lỗi là đã múa rìu qua mắt ... chủ topic À mà thuan007 lâu nay đâu rồi không thấy nữa nhờ?

[blogkien]

Có cách tắt hết Menu mặc định của forum không, rồi sao đó đưa menu mặc định vào menu opera này.

[hunghsmn]

Có cách tắt hết Menu mặc định của forum không, rồi sao đó đưa menu mặc định vào menu opera này.

Có , tuy nhiên có một menu mình chưa làm được đó là "Có thư" và "không có thư" . Mặc định nó tự động hoàn toàn, . Còn mình làm thì chỉ dù có thư hay không nó cũng chỉ hiển thị môtx chữ thiôi. Đây là lý do mình có cái kia mà vẫn tồn tại cái nọ. Từ lâu nhình đã 2 lần hỏi Cp nhưng hình như chuyện này rất khó.

[Sponsored content]