Thứ Ba, 2 tháng 10, 2012

Một vài kiểu Menu ngang đơn giản

17:09  , , , , ,  No comments


Một trong những thành phần dường như không thể thiếu được trong mỗi Website đó là hệ thống Menu ngang, đây là một trong những hệ thống danh mục thế hiện những nội dung chính của Website, từ đó giúp cho người duyệt Web dễ dàng lựa chọn những chuyên mục mà mình quan tâm. Để giúp các bạn mới nghiên cứu CSS và HTML có định hướng đúng đắn ngay từ đầu trong việc tạo các thành phần trong Website, trong bài viết này tôi xin hướng dẫn các bạn style cho một số kiểu menu ngang ở dạng đơn giản.

Việc đầu tiên mà chúng ta cần thực hiện đó là tạo ra một file HTML và thực hiện viết định dạng cho Menu ngang mà chúng ta định thực hiện.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css"
  href="/hozmenu.css" media="all" />
  <title>Menu ngang</title>
  </head>
  <body>

  <div id="mainnav">
  <ul>
    <li><a href="#" class="active" title="Trang chủ">Trang chủ</a>
    </li>
    <li><a href="#" title="Giới thiệu">Giới thiệu</a></li>
    <li><a href="#" title="Sản phẩm">Sản phẩm</a></li>
    <li><a href="#" title="Tin tức">Tin tức</a></li>
    <li><a href="#" title="Hỏi đáp">Hỏi đáp</a></li>
    <li><a href="#" title="Liên hệ">Liên hệ</a></li>
  </ul>
  </div>
    
  </body>
</html>
Trong phần định dạng này chúng ta sẽ dùng thẻ <ul> ( Underlist ) để chứa các thành phần của menu, để tìm hiểu kỹ hơn vì sao lại dùng thẻ Underlist để chứa các thành phần của menu bạn có thể tìm hiểu thêm trong bài viết "Định dạng HTML nào phù hợp với menu?".
Khi một mục nào đó trong hệ thống Menu được kích hoạt thì chúng ta sẽ đặt vào trong thẻ <a> bao thành phần đó một class = "active" và chúng ta sẽ định dạng cho thành phần này một màu riêng sao cho nổi bật hơn so với các thành phần Menu khác.
Sau khi tạo ra được file HTML xong chúng ta tiến hành định dạng cho hệ thống Menu này bằng CSS
Để tạo khung viền cũng như màu sắc cho thanh Menu chúng ta bắt đầu Style cho thẻ <div id="mainnav">. Trong Menu mẫu này chúng ta sẽ lấy màu xanh làm màu chủ đạo, màu nền của thanh Menu là #F1F8FC và màu của đường viền: #A2D2EA.
#mainnav {
  background: #F1F8FC;
  height: 30px;
  line-height: 30px;
  width: 950px;
  margin: 0 auto 30px auto; /* Căn giữa màn hình */
  border: 1px solid #A2D2EA;
  text-align: left; /* Fix cho IE */
}
Tiếp theo chúng ta sẽ định dạng cho thẻ <ul> và các thành phần bên trong của Menu.
#mainnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainnav ul li {
  margin: 0;
  padding: 0;
  display: inline; /* Các phần tử li sẽ ở trên một dòng*/
}

#mainnav li a {
  color: #333333;
  font-weight: bold;
  padding: 0 10px;
  border-right: 1px solid #A2D2EA;
  text-transform: uppercase;
  text-decoration: none;
}

#mainnav li a:hover,
#mainnav li a:active,
#mainnav li a:focus {
  color: #CC0000;
}

#mainnav li a.active {
  color: #CC0000;
}
Nguồn: cssyeah
>>> Tham khảo thêm một số menu ngang với hiệu ứng từ jQuery trong blogger (forum sosanhtinhnang)
Hình ảnh
- Để đơn giản, bạn tạo một widget HTML/Javascript và dán tất cả code bên dưới vào:
MÃ: CHỌN TẤT CẢ
//Code Javascript
<script src="http://data.fandung.com/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/menu-jQuery/jquery.bgpos.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>

// Code CSS
<style type="text/css">

h2 {
clear:both;
padding-top:20px;
}

ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
li a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg2.jpg) repeat 0 0;
}
li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
#a a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg.jpg) repeat -20px 35px;
}
#b a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg2.jpg) repeat 0 0;
}
#c a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg3.jpg) repeat 0 0;
}
#d a {
background:url(http://data.fandung.com/blog/demo/menu-jQuery/img/bg4.jpg) repeat 0 0;
}

</style>

//Code HTML
<ul id="a"[/color]>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

- Chú ý: ở code HTML, bạn hãy thay đổi dòng code màu cam (id="a") tương ứng với style của menu mà bạn chọn trong 4 lọai (a, b, c, d) mà mình có đưa ra trong hình minh họa.
- Sau đó save widget lại, và chi chuyển widget tới vị trí mà bạn muốn hiển thị.
Nguồn snook

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)