motecaca Admin
Tham gia ngày : 04/12/2010 Điểm : 11050 Cảm ơn : 15 Sinh nhật : 29/12/1995 Đến từ : Hà Nội
| Tiêu đề: Thanh navbar của Opera Tue Jun 07, 2011 3:55 pm | |
| Hi~!! ^^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 & 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: [You must be registered and logged in to see this link.] | |
|