Menu đổ dọc xuống là dạng menu phổ biến được rất nhiều bloger cũng như các website chuyên nghiệp dùng, menu đổ xuống hoặc kéo ra có rất nhiều dạng như nằm ngang, nằm dọc vì nó đẹp mặt và có thể bao quát nhiều thông tin cũng như phân vùng tin tức nên chắc chắn sẽ giúp các bạn rất nhiều trong việc tạo sitemap. Dạo này trên mạng nhiều bloger share code cho dạng menu này nhưng nhiều bạn vẫn chưa làm được, hôm nay mình sẽ hướng dẫn các bạn tạo menu dọc có cửa sổ đổ xuống.
Bước 1: Các bạn chén code bên dưới vào ngay trên thẻ </head> trong mục quản lý html. Các bạn làm theo hình bên dưới :
Hình 1 : Chọn chỉnh sửa HTML như hình.
Hình 2 : Nhấn Ctrl + F -> /head -> chèn code như hình.
Đoạn code html :
<link href='https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>Bước 2 : Chèn code menu vào ngay trên thẻ </header>.
<link href='https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu-v.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu.js' type='text/javascript'>
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Bloggerized by Sameera http://www.bloggertricksandtoolz.com/
***********************************************/
</script>
<script type='text/javascript'>
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
Hình 3 : Nhấn Ctrl + F -> /header -> chèn code như hình.
Đoạn code html :
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://www.gomsucaocap.blogspot.com'>Home</a></li>
<li><a href='#'> menu chính 1</a>
<ul>
<li><a href=link a1 '> menu phụ a1</a></li>
<li><a href=' link a2 '> menu phụ a2 </a></li>
</ul>
</li>
<li><a href='#'> menu chính 2</a>
<ul>
<li><a href=link b1 '> menu phụ b1</a></li>
<li><a href=' link b2 '> menu phụ b2 </a></li>
<li><a href=' link b3 '> menu phụ b3 </a></li>
<li><a href=' link b4 '> menu phụ b4 </a></li>
</ul>
</li>
<li><a href='#'> menu chính 3</a>
<ul>
<li><a href=link c1 '> menu phụ c1</a></li>
<li><a href=' link c2 '> menu phụ c2 </a></li>
<li><a href=' link c3 '> menu phụ c3 </a></li>
<li><a href=' link c4 '> menu phụ c4 </a></li>
</ul>
</li>
<li><a href='#'> menu chính 4</a>
<ul>
<li><a href=link d1 '> menu phụ d1</a></li>
<li><a href=' link d2 '> menu phụ d2 </a></li>
<li><a href=' link d3 '> menu phụ d3 </a></li>
<li><a href=' link d4 '> menu phụ d4 </a></li>
</ul>
</li>
<li><a href='#'> menu chính 5</a>
<ul>
<li><a href=link e1 '> menu phụ e1</a></li>
<ul>
<li><a href=link ee1 '> menu phụ ee1</a></li>
</ul>
<li><a href=' link e2 '> menu phụ e2 </a></li>
<li><a href=' link e3 '> menu phụ e3 </a></li>
<li><a href=' link e4 '> menu phụ e4 </a></li>
</ul>
</li>
</ul>
<br style='clear: left'/>
</div>
Hướng dẫn :
Ở đoạn code trên, các code có cùng màu tức là có liên quan với nhau, cùng nằm trên 1 cột menu, menu chính tức là menu sẽ hiển thị trên trang chủ, menu phụ tức là khi rê chuột vào menu chính tương ứng sẽ đổ xuống 1 dọc các menu phụ cần chọn.
VD: Menu chính : Tin tức, menu phụ : thuế đường bộ 2012, link = http://gomsucaocap.blogspot.com/. Khi người dùng rê chuột vào cột tin tức sẽ xổ ra các menu phụ, click chọn thuế đường bộ 2012 lập tức trình duyệt chuyển sang đường link đã chọn
Writer : Saler Trung (0976.072.031) - Cửa hàng Sao Mai
Nguồn : Tổng hợp
Không có nhận xét nào:
Đăng nhận xét