forgame
[Code] Thanh navbar đẹp
on 29/12/2012forgame
loading...
Chèn vào css
- Code:
#toolbar { background: #fff url(http://demo.dzinerstudio.com/smf2/Themes/citiez_20/images/custom/toolbar.png) 50% -144px repeat-x; width: 100%;}
#toolbar_l { background: url(http://demo.dzinerstudio.com/smf2/Themes/citiez_20/images/custom/toolbar.png) 0 0 no-repeat; margin-left: -8px;}
#toolbar_r { background: url(http://demo.dzinerstudio.com/smf2/Themes/citiez_20/images/custom/toolbar.png) 100% -72px no-repeat; margin-right: -8px; height: 67px;}
#toolbar ul { margin: 0; padding: 0; z-index: 999; float: right; position: relative; right: 50%;}
#topnav li { float: left; margin: 0; padding: 0; list-style: none; position: relative; left: 50%;}
#topnav li a { display: block; line-height: 60px; padding: 0 12px; color: #949494; text-shadow: 0 -1px 0 #000; text-decoration: none;}
#topnav .daddy { font-family: 'Yanone Kaffeesatz', arial, serif; font-size: 20px; text-transform: uppercase;}
#topnav li a.active { background: url(../images/custom/active.png) 50% 100% no-repeat;}
#topnav li a.active, #topnav li a:hover { color: #ddd;}
#topnav li:hover > a { color: #ddd;}
#topnav li ul { position: absolute; width: 200px; top: -999em; left: 0; right: auto; padding: 5px 0; background: #3b3b3b; border: 1px solid #333; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.6);}
#topnav li ul ul { margin: 0;}
#topnav li li { width: 200px; height: auto; padding: 0; margin: 0; left: auto;}
#topnav li li a { display: block; width: 170px; margin: 0 5px; padding: 0 10px; height: auto; float: none; line-height: 30px; font-size: 90%;}
#topnav li li a:hover, #topnav ul li:hover > a { background: #333; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none;}
#topnav li:hover ul { left: 0; top: 60px;}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul { top: -999em; left: auto;}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul { left: 200px; top: 0;}
#button_login, #button_logout, #button_register { display: none;}
Chèn vào head
- Code:
<a id="top" name="top" accesskey="t"></a>
<div class="minwidth_IE">
<div id="wrapper1">
<div id="main_border_l">
<div id="main_border_r">
<div id="modnav">
</div>
<div id="border_top"></div>
<div id="topbar">
<div id="userbox">
<ul>
<!-- BEGIN switch_user_logged_out -->
<div id="container12">
<div id="topnav1" class="topnav"> Have an account? <a href="login" class="signin" style=""><span>Login</span></a>
<a href="/register" class="register1" style=""><span>Register</span></a> </div>
<fieldset id="signin_menu" style="display: none; ">
<form action="/login?redirect=/" method="post" name="form_login" id="signin">
<label for="username">Tên Đăng Nhập</label>
<input class="field" id="log" type="text" size="10" name="username">
<label for="password">Mật Khẩu</label>
<input class="field" id="pwd" type="password" size="10" name="password">
<input id="signin_submit" class="bt_login" type="submit" name="login" value="Đăng nhập">
<label>
<input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever"> Nhớ tôi</label>
<p class="forgot"> <a href="profile?mode=sendpassword">Quên mật khẩu</a> </p>
<div class="clear"></div>
</form>
<script type="text/javascript">//<![CDATA[
$(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script>
</fieldset>
</div>
<!-- END switch_user_logged_out -->
</ul></div>
<div id="search">
<form action="/search?" method="get">
<input class="search_input" type="text" name="search_keywords" value="">
<input class="search_button" type="submit" name="submit" value=""title="Search">
</form>
</div>
<div id="toplinks">
<ul>
<li class="time">{CURRENT_TIME}</li>
<li><a href="http://www.cntt-k3.biz/">Cntt-k3</a></li>
<li><a class="social_icon facebook" href="http://www.facebook.com/groups/242881079118729/" title="Facebook"></a></li>
<li><a class="social_icon twitter" href="###" title="Twitter"></a></li>
<li><a class="social_icon rss" href="/rss" title="Rss"></a></li>
</ul>
</div>
</div>
<div id="toolbar">
<div id="toolbar_l">
<div id="toolbar_r">
<ul id="topnav">
<li id="button_home">
<a class="active daddy" href="/forum">
<span class="last firstlevel">Forum</span>
</a>
</li>
<li id="button_help">
<a class="daddy" href="/faq">
<span class="firstlevel">Trợ giúp</span>
</a>
</li>
<li id="button_help">
<a class="daddy" href="/memberlist">
<span class="firstlevel">Thành viên</span>
</a>
</li>
<!-- BEGIN switch_user_logged_out -->
<li id="button_calendar">
<a class="daddy" href="/register">
<span class="firstlevel">Đăng ký</span>
</a>
</li>
<li id="button_help">
<a class="daddy" href="/login">
<span class="firstlevel">Đăng nhập</span>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<li id="button_demo">
<a class="daddy" href="/profile?mode=editprofile">
<span class="firstlevel">Lí lịch <img src="http://www.skinbox.net/community/public/style_images/skinbox32/top_bar_arrow.png" alt=""></span>
</a>
<ul>
<li>
<a href="/profile?mode=editprofile">
<span>Thay đổi thông tin</span>
</a>
</li>
<li>
<a href="/profile?mode=editprofile&page_profil=avatars">
<span>Đổi hình đại diện</span>
</a>
</li>
<li>
<a href="/profile?mode=editprofile&page_profil=signature">
<span>Sửa chữ ký</span>
</a>
</li>
<li>
<a href="/profile?mode=editprofile&page_profil=preferences">
<span>Cài đặt tài khoản</span>
</a>
</li>
<li>
<a href="/profile?mode=editprofile&page_profil=friendsfoes">
<span>Bạn bè</span>
</a>
</li>
</ul>
</li>
<li id="button_help">
<a class="daddy" href="{U_PRIVATEMSGS}" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">{PRIVATE_MESSAGE_INFO}
</a>
</li>
<li id="button_calendar">
<a class="daddy" href="/login?logout=1">
<span class="firstlevel">Thoát</span>
</a>
</li>
<!-- END switch_user_logged_in -->
</ul>
</div>
</div>
</div>
Tiện thể
pro nào giúp mình kéo
cái navbar ở bên trái dài ra như ở bên phải hem