Tạo menu ngang với CSS Tab Designer

Cascading Style Sheets (CSS) – là môt phần mềm tạo menu đơn giản nhưng đẹp phù hợp cho những blog không có menu con, được trình bày bằng ngôn ngữ HTML. Kiểu menu nầy rất đơn giản có thể áp dụng cho nhiều trang web. Bài viết nầy được trình ra từ phần mềm tạo menu đượtc chinh sửa chút ít cho phù hợp với blog (đặt biệt là các bạn mới tập làm quen với blog), trong bài nay minh trình bài các kiểu menu dạng mằm ngang.

1 . Menu ngang bằng CSS 1.

Bước 1: Vào Blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) >> click vào Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head>.

<style type="text/css"><br /> #navcontainer {<br /> background: #369; <!-- Mau nen thanh ngang --><br /> border-top: 1px solid #9CC; <!-- Mau nen bong mo --><br /> font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> }<br /> <br /> #navlist {<br /> list-style: none outside none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> @media all {<br /> #navlist {<br /> text-align: center<br /> }<br /> }<br /> <br /> #navlist li {<br /> bottom: 11px;<br /> display: inline;<br /> line-height: 1.2em;<br /> margin: 0;<br /> padding: 0;<br /> position: relative;<br /> }<br /> <br /> html>body #navlist li {<br /> background: #000; <!-- Mau nen bong mo nut button --><br /> margin: 0 3px 0 0;<br /> padding: 4px 0px 4px 0;<br /> }<br /> <br /> #navlist a, #navlist a:link, #navlist a:visited {<br /> background: #900; <!-- Mau nen nut button --><br /> border: 1px solid #FFF; <!-- Mau duong vien nut button --><br /> bottom: 2px;<br /> color: #FFF;<br /> cursor: pointer;<br /> display: inline;<br /> height: 1em;<br /> margin: 0;<br /> padding: 3px 5px 3px 5px;<br /> position: relative;<br /> right: 2px;<br /> text-decoration: none;<br /> }<br /> <br /> #navlist a:hover {<br /> background: #C00;<br /> bottom: 1px;<br /> color: #FFF;<br /> position: relative;<br /> right: 1px;<br /> }<br /> <br /> #navlist a:active {<br /> background: #999;<br /> bottom: 0px;<br /> color: #FFF;<br /> position: relative;<br /> right: 0px;<br /> }<br /> <br /> #navlist li#active {<br /> background: #369;<br /> bottom: 13px;<br /> display: inline;<br /> margin: 0 3px 0 0;<br /> padding: 0;<br /> position: relative;<br /> }<br /> <br /> html>body #navlist li#active {<br /> background: #000;<br /> margin: 0 4px 0 4px;<br /> }<br /> <br /> #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {<br /> background: #369; <!-- Mau duong vien nut button trang chu --><br /> border-bottom: none;<br /> border-left: 1px solid #9CC;<br /> border-right: 1px solid #9CC;<br /> border-top: 1px solid #9CC;<br /> bottom: 0;<br /> color: #FFF;<br /> cursor: text;<br /> margin: 0;<br /> padding: 2px 5px 0 5px;<br /> position: relative;<br /> right: 0;<br /> }<br /> </style>

Với đọan code trên bạn có thể điều chỉnh lại màu sắc, chiều cao...để tạo nét riêng cho menu. Minh đã chú thích một số màu trên đoạn code trên.

Bước 2: Dán đoạn code sau vào trên thẻ đóng </body> hoặc vào Thiết kế >> chọn Thêm tiện ích >> chọn HTML/Javascript . Đặt vào vị trí muốn hiển thị menu trên Blog.

<div id="navcontainer"><br /> <ul id="navlist"><br /> <!-- CSS Tabs --><br /> <li id="active"><a id="current" href="http://www.kynangso.com/">Trang chủ</a></li><br /> <li><a href="http://www.kynangso.com/search/label/Phan%20mem">Phần mềm</a></li><br /> <li><a href="http://www.kynangso.com/search/label/Thu%20thuat">Thủ thuật</a></li><br /> <li><a href="http://www.kynangso.com/search/label/Games">Games</a></li><br /> <li><a href="http://www.kynangso.com/search/label/Kiem%20tien">Kiếm tiền</a></li><br /> <li><a href="http://www.kynangso.com/search/label/Chuyen%20la">Vui lạ</a></li><br /> <li><a href="#">Về đầu trang</a></li><br /> <br /> </ul><br /> </div>

Bạn tùy chỉnh đường dẩn và nội dung hiển thị trên menu cho phù hợp.



2 . Menu ngang bằng CSS 2.

Tương tự như menu ngang CSS 1.

Bước 1: Vào Blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) >> click vào Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head>

<style type="text/css"><br /> <!--<br /> .container {<br /> width: 500px;<br /> padding: 15px;<br /> margin: 3px 0 20px 0;<br /> border: 1px solid #ccc;<br /> background: #fff;<br /> }<br /> <br /> /* circle */<br /> <br /> #navCircle {<br /> margin: 0;<br /> padding: 0 0 20px 10px;<br /> border-bottom: 1px solid #9FB1BC;<br /> }<br /> <br /> #navCircle li {<br /> margin: 0;<br /> padding: 0;<br /> display: inline;<br /> list-style-type: none;<br /> }<br /> <br /> #navCircle a:link, #navCircle a:visited {<br /> float: left;<br /> font-size: 10px;<br /> line-height: 14px;<br /> font-weight: bold;<br /> padding: 0 12px 6px 12px;<br /> text-decoration: none;<br /> color: #708491;<br /> }<br /> <br /> #navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {<br /> padding-bottom: 6px;<br /> color: #000;<br /> background: url(circle.gif) no-repeat bottom center;<br /> }<br /> --><br /> </style><br /> <style type="text/css"><br /> <!--<br /> /* code for presentation purpose (CSS preview) */<br /> body {<br /> font-family: verdana, sans-serif;<br /> font-size: 11px;<br /> background: #eeeeee;<br /> }<br /> <br /> h4 {<br /> font-size: 100%;<br /> color: #999;<br /> margin: 0;<br /> }<br /> --><br /> </style>

Bước 2: Dán đoạn code sau vào trên thẻ đóng </body> hoặc vào Thiết kế >> chọn Thêm tiện ích >> chọn HTML/Javascript . Đặt vào vị trí muốn hiển thị menu trên Blog và tùy chỉnh cho phù hợp.

<div class="container"><br /> <ul id="navCircle"><br /> <!-- CSS Tabs --><br /> <li><a class="active" href="Home.html">Home</a></li><br /> <li><a href="Products.html">Products</a></li><br /> <li><a href="Services.html">Services</a></li><br /> <li><a href="Support.html">Support</a></li><br /> <li><a href="Order.html">Order</a></li><br /> <li><a href="News.html">News</a></li><br /> <li><a href="About.html">About</a></li><br /> <br /> </ul><br /> </div>

3 . Menu ngang bằng CSS 3.

Bước 1: Dán đoạn code sau vào trên thẻ đóng </head><style type="text/css"><br /> <!--<br /> /* CSS Tabs */<br /> #navlist {<br /> padding: 3px 0;<br /> margin-left: 0;<br /> border-bottom: 1px solid #778;<br /> font: bold 12px Verdana, sans-serif;<br /> }<br /> <br /> #navlist li {<br /> list-style: none;<br /> margin: 0;<br /> display: inline;<br /> }<br /> <br /> #navlist li a {<br /> padding: 3px 0.5em;<br /> margin-left: 3px;<br /> border: 1px solid #778;<br /> border-bottom: none;<br /> background: #DDE;<br /> text-decoration: none;<br /> }<br /> <br /> #navlist li a:link { color: #448; }<br /> #navlist li a:visited { color: #667; }<br /> <br /> #navlist li a:hover {<br /> color: #000;<br /> background: #AAE;<br /> border-color: #227;<br /> }<br /> <br /> #navlist li a#current {<br /> background: white;<br /> border-bottom: 1px solid white;<br /> }<br /> --><br /> </style><br /> </style>

Bước 2: Dán đoạn code sau vào vị trí muốn hiển thị menu trên Blog và tùy chỉnh cho phù hợp.

<div id="navcontainer"><br /> <ul id="navlist"><br /> <!-- CSS Tabs --><br /> <li><a id="current" href="Home.html">Home</a></li><br /> <li><a href="Products.html">Products</a></li><br /> <li><a href="Services.html">Services</a></li><br /> <li><a href="Support.html">Support</a></li><br /> <li><a href="Order.html">Order</a></li><br /> <li><a href="News.html">News</a></li><br /> <li><a href="About.html">About</a></li><br /> <br /> </ul><br /> </div>

4 . Menu ngang bằng CSS 4.

Bước 1: Dán đoạn code sau vào trên thẻ đóng </head>

<style type="text/css"><br /> <!--<br /> .container {<br /> width: 500px;<br /> padding: 15px;<br /> margin: 3px 0 20px 0;<br /> border: 1px solid #ccc;<br /> background: #fff;<br /> }<br /> <br /> /* rounded */<br /> <br /> #nav {<br /> margin: 0;<br /> padding: 0 0 20px 10px;<br /> border-bottom: 1px solid #9FB1BC;<br /> }<br /> <br /> #nav li {<br /> margin: 0;<br /> padding: 0;<br /> display: inline;<br /> list-style-type: none;<br /> }<br /> <br /> #nav a:link, #nav a:visited {<br /> float: left;<br /> font-size: 10px;<br /> line-height: 14px;<br /> font-weight: bold;<br /> padding: 0 12px 6px 12px;<br /> text-decoration: none;<br /> color: #708491;<br /> }<br /> <br /> #nav a:link.active, #nav a:visited.active, #nav a:hover {<br /> color: #000;<br /> background: url(rounded.gif) no-repeat bottom center;<br /> }<br /> --><br /> </style><br /> <style type="text/css"><br /> <!--<br /> /* code for presentation purpose (CSS preview) */<br /> body {<br /> font-family: verdana, sans-serif;<br /> font-size: 11px;<br /> background: #eeeeee;<br /> }<br /> <br /> h4 {<br /> font-size: 100%;<br /> color: #999;<br /> margin: 0;<br /> }<br /> --><br /> </style>

Bước 2: Dán đoạn code sau vào vị trí muốn hiển thị menu trên Blog và tùy chỉnh cho phù hợp.

<div class="container"><br /> <ul id="nav"><br /> <!-- CSS Tabs --><br /> <li><a class="active" href="Home.html">Home</a></li><br /> <li><a href="Products.html">Products</a></li><br /> <li><a href="Services.html">Services</a></li><br /> <li><a href="Support.html">Support</a></li><br /> <li><a href="Order.html">Order</a></li><br /> <li><a href="News.html">News</a></li><br /> <li><a href="About.html">About</a></li><br /> <br /> </ul><br /> </div>

5 . Menu ngang bằng CSS 5.

Bước 1: Dán đoạn code sau vào trên thẻ đóng </head>

<style type="text/css"><br /> <!--<br /> /* CSS Tabs */<br /> #navcontainer {<br /> background: #f0e7d7;<br /> margin: 0 auto;<br /> padding: 1em 0 0 0;<br /> font-family: georgia, serif;<br /> text-transform: lowercase;<br /> }<br /> <br /> /* to stretch the container div to contain floated list */<br /> #navcontainer:after {<br /> content: ".";<br /> display: block;<br /> line-height: 1px;<br /> font-size: 1px;<br /> clear: both;<br /> }<br /> <br /> ul#navlist {<br /> list-style: none;<br /> padding: 0;<br /> margin: 0 auto;<br /> width: 80%;<br /> font-size: 0.8em;<br /> }<br /> <br /> ul#navlist li {<br /> display: block;<br /> float: left;<br /> width: 15%;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> ul#navlist li a {<br /> display: block;<br /> width: 100%;<br /> padding: 0.5em;<br /> border-width: 1px;<br /> border-color: #ffe #aaab9c #ccc #fff;<br /> border-style: solid;<br /> color: #777;<br /> text-decoration: none;<br /> background: #f7f2ea;<br /> }<br /> <br /> #navcontainer>ul#navlist li a { width: auto; }<br /> <br /> ul#navlist li#active a {<br /> background: #f0e7d7;<br /> color: #800000;<br /> }<br /> <br /> ul#navlist li a:hover, ul#navlist li#active a:hover {<br /> color: #800000;<br /> background: transparent;<br /> border-color: #aaab9c #fff #fff #ccc;<br /> }<br /> --><br /> </style>

Bước 2: Dán đoạn code sau vào vị trí muốn hiển thị menu trên Blog và tùy chỉnh cho phù hợp.

<div id="navcontainer"><br /> <ul id="navlist"><br /> <!-- CSS Tabs --><br /> <li id="active"><a id="current" href="Home.html">Home</a></li><br /> <li><a href="Products.html">Products</a></li><br /> <li><a href="Services.html">Services</a></li><br /> <li><a href="Support.html">Support</a></li><br /> <li><a href="Order.html">Order</a></li><br /> <li><a href="News.html">News</a></li><br /> <li><a href="About.html">About</a></li><br /> <br /> </ul><br /> </div>

6 . Menu ngang bằng CSS 6.

Bước 1: Dán đoạn code sau vào trên thẻ đóng </head>

<style type="text/css"><br /> <!--<br /> body {<br /> margin:0;<br /> padding:0;<br /> font: bold 11px/1.5em Verdana;<br /> }<br /> <br /> h2 {<br /> font: bold 14px Verdana, Arial, Helvetica, sans-serif;<br /> color: #000;<br /> margin: 0px;<br /> padding: 0px 0px 0px 15px;<br /> }<br /> <br /> img {<br /> border: none;<br /> }<br /> <br /> /*- Menu Tabs --------------------------- */<br /> <br /> #tabs10 {<br /> float:left;<br /> width:100%;<br /> font-size:93%;<br /> border-bottom:1px solid #2763A5;<br /> line-height:normal;<br /> }<br /> #tabs10 ul {<br /> margin:0;<br /> padding:10px 10px 0 50px;<br /> list-style:none;<br /> }<br /> #tabs10 li {<br /> display:inline;<br /> margin:0;<br /> padding:0;<br /> }<br /> #tabs10 a {<br /> float:left;<br /> background:url("tableft10.gif") no-repeat left top;<br /> margin:0;<br /> padding:0 0 0 4px;<br /> text-decoration:none;<br /> }<br /> #tabs10 a span {<br /> float:left;<br /> display:block;<br /> background:url("tabright10.gif") no-repeat right top;<br /> padding:5px 15px 4px 6px;<br /> color:#FFF;<br /> }<br /> /* Commented Backslash Hack hides rule from IE5-Mac \*/<br /> #tabs10 a span {float:none;}<br /> /* End IE5-Mac hack */<br /> #tabs9 a:hover span {<br /> color:#FFF;<br /> }<br /> #tabs10 a:hover {<br /> background-position:0% -42px;<br /> }<br /> #tabs10 a:hover span {<br /> background-position:100% -42px;<br /> }<br /> <br /> #tabs10 #current a {<br /> background-position:0% -42px;<br /> }<br /> #tabs10 #current a span {<br /> background-position:100% -42px;<br /> }<br /> --><br /> </style>

Bước 2: Dán đoạn code sau vào vị trí muốn hiển thị menu trên Blog và tùy chỉnh cho phù hợp.

<div id="tabs10"><br /> <ul><br /> <!-- CSS Tabs --><br /> <li id="current"><a href="Home.html"><span>Home</span></a></li><br /> <li><a href="Products.html"><span>Products</span></a></li><br /> <li><a href="Services.html"><span>Services</span></a></li><br /> <li><a href="Support.html"><span>Support</span></a></li><br /> <li><a href="Order.html"><span>Order</span></a></li><br /> <li><a href="News.html"><span>News</span></a></li><br /> <li><a href="About.html"><span>About</span></a></li><br /> <br /> </ul><br /> </div>

7 . Menu ngang bằng CSS 7.

Bước 1: Dán đoạn code sau vào trên thẻ đóng </head>

<style type="text/css"><br /> <!--<br /> body {<br /> margin:0;<br /> padding:0;<br /> font: bold 11px/1.5em Verdana;<br /> }<br /> <br /> h2 {<br /> font: bold 14px Verdana, Arial, Helvetica, sans-serif;<br /> color: #000;<br /> margin: 0px;<br /> padding: 0px 0px 0px 15px;<br /> }<br /> <br /> img {<br /> border: none;<br /> }<br /> <br /> /*- Menu Tabs 12--------------------------- */<br /> <br /> #tabs12 {<br /> float:left;<br /> width:100%;<br /> background:#F9F7F3;<br /> font-size:93%;<br /> line-height:normal;<br /> border-bottom:1px solid #C2BDAE;<br /> }<br /> #tabs12 ul {<br /> margin:0;<br /> padding:10px 10px 0 50px;<br /> list-style:none;<br /> }<br /> #tabs12 li {<br /> display:inline;<br /> margin:0;<br /> padding:0;<br /> }<br /> #tabs12 a {<br /> float:left;<br /> background:url("tableft12.gif") no-repeat left top;<br /> margin:0;<br /> padding:0 0 0 4px;<br /> text-decoration:none;<br /> }<br /> #tabs12 a span {<br /> float:left;<br /> display:block;<br /> background:url("tabright12.gif") no-repeat right top;<br /> padding:5px 15px 4px 6px;<br /> color:#E4D6CD;<br /> }<br /> /* Commented Backslash Hack hides rule from IE5-Mac \*/<br /> #tabs12 a span {float:none;}<br /> /* End IE5-Mac hack */<br /> #tabs12 a:hover span {<br /> color:#FFF;<br /> }<br /> #tabs12 a:hover {<br /> background-position:0% -42px;<br /> }<br /> #tabs12 a:hover span {<br /> background-position:100% -42px;<br /> }<br /> <br /> #tabs12 #current a {<br /> background-position:0% -42px;<br /> }<br /> #tabs12 #current a span {<br /> background-position:100% -42px;<br /> }<br /> --><br /> </style>

Bước 2: Dán đoạn code sau vào vị trí muốn hiển thị menu trên Blog và tùy chỉnh cho phù hợp.

<div id="tabs12"><br /> <ul><br /> <!-- CSS Tabs --><br /> <li id="current"><a href="Home.html"><span>Home</span></a></li><br /> <li><a href="Products.html"><span>Products</span></a></li><br /> <li><a href="Services.html"><span>Services</span></a></li><br /> <li><a href="Support.html"><span>Support</span></a></li><br /> <li><a href="Order.html"><span>Order</span></a></li><br /> <li><a href="News.html"><span>News</span></a></li><br /> <li><a href="About.html"><span>About</span></a></li><br /> <br /> </ul><br /> </div>

Chúc các bạn thành công. Mình sẽ cập nhật các mẩu khác trong thời gian tới.