TẠO MENU NGANG CÓ MENU CON XỔ DỌC XUỐNG MỘT CẤP (KIỂU 1)

Trước đây, tôi có chia sẻ cho các bạn cách làm menu ngang có menu con xổ dọc xuống nhiều cấp, nay tôi xin chia sẻ tiếp cho các bạn menu ngang có menu con xổ dọc xuống một cấp.

Đầu tiên, bạn đăng nhập vào Blog

 > chọn Thiết kế > chọn
chỉnh sửa HTML.

Sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào ô lệnh ]]></b:skin>

Và dán đoạn code dưới đây vào trên nó

#jsddm {<br /> margin: 0;<br /> padding: 15px;<br /> z-index:1000000000;<br /> position:relative;<br /> }<br /> <br /> #jsddm li {<br /> float: left;<br /> list-style: none;<br /> font: 12px Tahoma, Arial;<br /> }<br /> <br /> #jsddm li a {<br /> display: block;<br /> white-space: nowrap;<br /> margin:1px 3px;<br /> border: 1px solid #AAAAAA;<br /> background: #cccccc;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));<br /> background: -moz-linear-gradient(top, #ebebeb, #cccccc);<br /> padding: 5px 10px;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> text-shadow: #ffffff 0 1px 0;<br /> color: #363636;<br /> font-size: 15px;<br /> font-family: Helvetica, Arial, Sans-Serif;<br /> text-decoration: none;<br /> vertical-align: middle;<br /> }<br /> <br /> #jsddm li a:hover {<br /> background: #C8C8C8;<br /> }<br /> <br /> #jsddm li ul {<br /> margin: 0;<br /> padding: 0;<br /> position: absolute;<br /> visibility: hidden;<br /> border-top: 1px solid white;<br /> }<br /> <br /> #jsddm li ul li {<br /> float: none;<br /> display: inline;<br /> }<br /> <br /> #jsddm li ul li a {<br /> width: auto;<br /> background: #CAE8FA;<br /> }<br /> <br /> #jsddm li ul li a:hover {<br /> background: #A3CEE5;<br /> }<br />

Cũng tương tự như trên, bạn gõ vào ô tìm kiếm lệnh </head> và dán đoạn code dưới đây trước </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; //]]> </script><br />

Bước kế tiếp cũng làm tương tự như hai cách trên, bạn dán đoạn code dưới đây vào trước lệnh </header>

(hoặc thêm tiện ích HTML/javacript rồi dán nó vào)

<ul id="jsddm">

  <li><a href="#">Home</a>

  <li><a href="#">Menu 1</a>

  <ul>

  <li><a href="#"> tên menu</a></li>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  </ul>

  </li>

 <li><a href="#"> tên menu </a>

  <ul>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  </ul>

  </li>

 <li><a href="#">Menu 3</a>

  <ul>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  </ul>

  </li>

 <li><a href="#">Menu 4</a></li>

  <li><a href="#">Menu 5</a></li>

    </li></ul>

Bây giờ, bạn thay đổi các code màu đỏ và màu xanh cho phù hợp với blog bạn (màu xanh là URL của trang, màu đỏ là tên hiển thị)

Cuối cùng bấm Lưu mẫu và trở vào Blog xem kết quả

Chúc các bạn thành công