Chỉ là một khái niệm menu thả xuống

Tôi tìm thấy cú đánh Dribbble hai năm tuổi này của Ignacio Giri. Đừng hỏi tôi làm thế nào, tôi chỉ không nhớ mình đã vấp phải nó như thế nào nhưng có một điều rõ ràng: Tôi đánh dấu khái niệm menu thả xuống này, nhìn chằm chằm vào nó một chút và rồi tôi nghĩ về việc tạo ra thứ gì đó tương tự với CSS.

Xem bản demo

Đánh dấu

Mã dưới đây không cần bất kỳ lời giải thích nào, vì vậy tôi sẽ chỉ dán vào đây phiên bản thô để bạn có thể xem nhanh mã này. Lớp HTML submenuở đây để tránh sử dụng .menu ulsau này. Đối với các bộ chọn CSS tốt hơn và ngắn hơn.

<ul class="menu cf">
	<li><a href="">Menu item</a></li>
	<li>
		<a href="">Menu item</a>
		<ul class="submenu">
			<li><a href="">Submenu item</a></li>
			<li><a href="">Submenu item</a></li>
			<li><a href="">Submenu item</a></li>
			<li><a href="">Submenu item</a></li>
		</ul>			
	</li>
	<li><a href="">Menu item</a></li>
	<li><a href="">Menu item</a></li>
	<li><a href="">Menu item</a></li>
</ul>

Ngoài ra, cfchính xác những gì bạn đã nghĩ nó sẽ làm: nó xóa trôi nổi.

CSS

Bởi vì chúng ta cần xóa phao:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

Càng và chúng tôi không cần bất kỳ trình duyệt mặc định nào cho bất kỳ trường hợp nào dưới đây:

.menu,
.submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

Kiểm tra các dòng sau cho phần còn lại của các kiểu, thử nghiệm width: fit-contentcó thể quen thuộc với bạn nếu bạn đọc các bài viết cuối cùng của tôi.

/* Main level */
.menu {			
	margin: 50px auto;
	width: 800px;
	width: fit-content;	
}

.menu > li {
	background: #34495e;
	float: left;
	position: relative;
	transform: skewX(25deg);
}

.menu a {
	display: block;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	font-family: Arial, Helvetica;
	font-size: 14px;
}		

.menu li:hover {
	background: #e74c3c;
}		

.menu > li > a {
	transform: skewX(-25deg);
	padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
	position: absolute;
	width: 200px;
	left: 50%; margin-left: -100px;
	transform: skewX(-25deg);
	transform-origin: left top;
}

.submenu li {
	background-color: #34495e;
	position: relative;
	overflow: hidden;		
}						

.submenu > li > a {
	padding: 1em 2em;			
}

.submenu > li::after {
	content: '';
	position: absolute;
	top: -125%;
	height: 100%;
	width: 100%;			
	box-shadow: 0 0 50px rgba(0, 0, 0, .9);			
}		

/* Odd stuff */
.submenu > li:nth-child(odd){
	transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
	transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
	right: -50%;
	transform: skewX(-25deg) rotate(3deg);
}				

/* Even stuff */
.submenu > li:nth-child(even){
	transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
	transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
	left: -50%;
	transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
	opacity: 0;
	visibility: hidden;			
}

.submenu li {
	transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
	opacity: 1;
	visibility: visible;
}		

.menu > li:hover .submenu li:nth-child(even){
	transform: skewX(25deg) translateX(15px);			
}

.menu > li:hover .submenu li:nth-child(odd){
	transform: skewX(-25deg) translateX(-15px);			
}

Trên RWD

Đừng cố thay đổi kích thước cửa sổ, bản trình diễn menu này không phản hồi vì đó không phải là điểm chính của bài viết này và tôi không muốn làm hỏng CSS cho điều đó. Nhưng tôi đã thực hiện một menu thả xuống phản ứng nhanh trong quá khứ, vì vậy hãy kiểm tra nó.

Lỗi nhỏ

Tôi đã cố gắng thêm backface-visibility: hiddenvào các yếu tố được chuyển đổi để ngăn chặn hiệu ứng nhấp nháy hiện có nhưng tôi không hài lòng với kết quả này. Có lẽ bởi vì có rất nhiều yếu tố với các phép biến đổi được áp dụng cho?

Xem bản demo

Đó là tất cả!

Đó sẽ là tất cả mọi người, hãy kiểm tra bản demo ở trên và cho tôi biết suy nghĩ và phản hồi của bạn về cách cải thiện điều này. Cảm ơn vì đã đọc!