« »

Hiệu ứng JavaScript này sử dụng hình ảnh cho việc trang trí nền của trình đơn.

Nhãn: Trình đơn màu đen-đỏ

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
Files
CSS
HTML
In

Copy All x2

<style type="text/css">
div.ormnav {width:100%; margin:0; padding:0; font-family:Verdana,sans-serif; font-size:11px; color:#222; }
#nav, #subnav, #footer {width:100%; }
#nav {background:#000 url(bg_nav.gif) repeat-x 0 0; margin:0; padding:0; }
#nav ul, #subnav ul {list-style:none; margin:0; padding:0; overflow:auto; }
#nav ul li {float:left; display:inline-table; list-style:none; padding: 0; margin: 0; }
#nav ul li a {display:block; line-height:30px; padding:0 1em; text-decoration:none; font-size:12px; color:#fff; float:left; border-right:1px solid #000; margin:2px 0; }
#nav ul li a {float:none; }
#nav ul li a:hover {      background:#000 url(bg_nav_hover.gif) repeat-x 0 0; color:#bbb; }
#nav .nav_selected a, #nav .nav_selected a:hover {line-height:34px; margin:0; background: #990000; background-image:none; }
#subnav {background-color:#990000; padding:4px 0 4px 0; border-bottom:1px solid #990000; }
#subnav ul li {float:left; display:inline-table; list-style:none; color: #FFF; }
#subnav ul li a, #subnav p a {padding:0 1em; text-decoration:none; color:#fff; white-space: nowrap; }
#subnav p a:hover {    text-decoration: underline; }
#subnav .logintext {width: 180px; display: block; height: 1%; float: right; }
#subnav .logintext p {padding: 0; font-size: 11px; }
#subnav ul li + li a {border-left:1px solid #fff; }
#subnav ul li a:hover {      text-decoration:underline; }
#subnav .nav_selected a, #subnav .nav_selected a:hover {      color:#cc9999; }
#subnav p {margin:0; padding:0 1em; color:#fff; white-space: nowrap; }
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div class="ormnav" id="nav">
		<ul>
			<li><a href="http://www.javascriptbank.com/">Home</a></li>
			<li class="nav_selected"><a href="http://www.javascriptbank.com/javascript/">JavaScript</a></li>
			<li><a href="http://javascriptbank.com/4rum/">Forum</a></li>
			<li><a href="http://www.javascriptbank.com/service/">Services</a></li>
			<li><a href="http://javascriptbank.com/javascript/aboutus-javascript-bank.html">About</a></li>
		</ul>
	</div>
	<div class="ormnav" id="subnav">
		<div class="logintext">
			<p><a href="http://javascriptbank.com/4rum/login.php" title="Login">Sign In</a></p>
        </div>
        <ul>
        	<li><a href="http://javascriptbank.com/javascript/">3D</a></li>
        	<li><a href="http://javascriptbank.com/javascript/">AJAX</a></li>
        	<li><a href="http://javascriptbank.com/javascript/">Menu</a></li>
        </ul>
        <div class="clear"></div>
    </div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->