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 xổ bằng CSS

min read
Tags: Html/Css

Nay mình xin hướng dẫn các bạn cách code một menu xổ bằng CSS và HTML, mà các bạn thường thấy ở những Website khác. Các bạn khi thực hiện được menu xổ này rồi các bạn có thể tuy biến để chỉnh sửa menu theo ý của các bạn!

Đầu tiên bạn chuẩn bị một thư mục:/demo-basic/menu-xo/index.html để chứa file cần viết

Các bạn cần chú ý các thuộc tính như: position:relative,position:absolute nhé

Code css

<style>
		*{margin:0px;padding:0px;}
		nav.box_menu_xo{
			width: 900px;
			margin: 100px auto;
		}
		ul.menu li{
			list-style: none;
			text-align: center;
			float: left;
			width: 200px;
			position: relative;
			background: rgba(0,145,234,1);
			padding: 10px 0;
			box-sizing: border-box;
			border-right: 1px solid rgba(225,225,225,0.5);
		}
		ul.menu li:last-child{
			border: none;
		}
		ul.menu li a{
			text-decoration: none;
			color: #fff;
			
		}
		ul.menu li:hover{
			background: rgba(0,0,0,0.8);
		}
		
		/*hover hiện submenu ra*/
		ul.menu li:hover ul.submenu{
			display: block;
		}

		/*submenu*/
		ul.menu li ul.submenu{
			position: absolute;
			top: 100%;
			display: none; /*ẩn submenu đi*/
		}
		ul.menu li ul.submenu li{
			border-bottom: 1px solid rgba(225,225,225,0.5);
			width: 100%;
		}
		ul.menu li ul.submenu li a{
			font-size: 13px;
		}
		ul.menu li ul.submenu li:hover{
			background: rgba(0,0,0,0.3);
			color: #fff;
		}
	</style>

Code html

<nav class="box_menu_xo">
		<ul class="menu">
			<li><a href="#">HOME</a></li>
			<li><a href="#">DOWNLOAD</a>
				<ul class="submenu">
					<li><a href="#">LARAVEL FRAMEWORK 5</a>
					<li><a href="#">CODEIGNITER 3.x</a>
					<li><a href="#">ANGULAR V2</a>
				</ul>
			</li>
			<li><a href="#">DOWCUMENT</a>
				<ul class="submenu">
					<li><a href="#">ANGULARJS</a>
					<li><a href="#">NODEJS</a>
					<li><a href="#">ANDROIDD</a>
				</ul>
			</li>
			<li><a href="#">FACEBOOK</a></li>
		</ul>
	</nav>

Các bạn copy các source bên trên và dán vào file index.html của bạn nhé, nhơ để dúng vị trí nhé!

Các bạn có thể xem video của mình trên website https://hoanguyenit.com/

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!)