1. Hướng dẫn tạo jQuery right click context menu
  2. Create CSS Transition Sidebar Nav
  3. Hướng dẫn sử dụng Div bằng HTML với CSS
  4. Hướng dẫn tạo Form Hổ trợ trực tuyến phần 1
  5. Hướng dẫn tạo Form đăng ký thành viên
  6. Hướng dẫn tạo Form đăng nhập hệ thống kết hợp với CSDL
  7. Hướng dẫn tạo Menu Ngang bằng CSS
  8. Hướng dẫn tạo Menu xổ bằng code CSS đơn giản
  9. Hướng dẫn tạo menu xổ bằng CSS
  10. Hướng dẫn tạo Menu xổ bằng Jquery đơn giãn
  11. JQuery CSS Image Slider
  12. Tìm kiếm bằng Ajax
  13. Sự sắp xếp chiều dọc của thẻ block trong HTML
  14. Tạo Layout đơn giản với DIV và CSS

Hướng dẫn tạo Menu Ngang bằng CSS

min read
Tags: Html/Css

Hôm nay mình xin hướng dẫn các bạn cách tạo Menu Ngang, sử dụng Css để code. Cách làm này cũng rất đơn gian.

chỉ cần vài đoạn code css là bạn sẽ được một menu ngang. Nhưng điều quan trọng tôi muốn chỉ cho các bạn làm

thế nào khi các menu của các bạn không bị biến dạng nhảy lên, nhảy xuống, để làm cho trang web các bạn thấy đẹp hơn.

và dưới đây là toàn bộ code Menu Ngang các bạn có thể kham khảo và làm theo. Để có thể tích hợp vào website của

các bạn.

Source CSS

<style>
body{background-color:#333300;

    text-align:center;

    }

    p{ color:#FFCC66;

    font-size:50px;

    }

    #menu ul li{

    margin:0;

    padding:0;

    text-align:center;

    display:inline;    }

    #menu li a{

    font-size:20px;

    font-weight:bold;

    color:#CC0033;

    padding: 0 15px;

    border-right:1px solid #00FF333;

    text-transform:uppercase;

    text-decoration:none;

    }

    #menu ul li:hover{background:white;}
</style>

Code HTML

<html>
<head>
<title>MENU NGANG BANG CSS</title>
</head>
<body>
<p> THIET KE WEB</p>
<div id=menu>
<ul>
    <li><a href="#">TRANG CHU</a></li>
    <li><a href="#">PHAN CUNG</a></li>
    <li><a href="#">PHAN MEM</a></li>
    <li><a href="#">HE DIEU HANH</a></li>
    <li><a href="#">DANG KY</a></li>
    <li><a href="#">KINH NGHIEM</a></li>
</ul>
</div>
</body>
</html>

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

Tags: Html/Css
x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)