Hiệu ứng menu đẹp cho danh sách thả xuống

383 Views 11 Likes Comment
Drop-Down Lists

Một plugin jQuery để chuyển đổi các đầu vào được chọn thành danh sách thả xuống với một số hiệu ứng mở rộng đơn giản.

Hôm nay tôi muốn chia sẻ một số hiệu ứng danh sách thả xuống đơn giản với bạn. Ý tưởng là để chuyển đổi một đầu vào chọn bình thường thành một cái gì đó hấp dẫn hơn với một plugin jQuery. Việc mở rộng các tùy chọn sẽ diễn ra với một chuyển đổi và các tham số có thể được cấu hình theo cách để đạt được các hiệu ứng độc đáo.

Sau các kiểu danh sách thả xuống tùy chỉnh tuyệt vời do Hugo tạo ra trong hướng dẫn Tạo kiểu danh sách thả xuống tùy chỉnh của mình , Tôi muốn làm cho nó đơn giản để tạo cấu trúc tùy chỉnh từ đầu vào chọn bình thường (không có nhiều lựa chọn tùy chọn). Vì vậy, Tôi đã đưa ra plugin nhỏ này sẽ cho phép một số kiểu tùy chỉnh của danh sách thả xuống. Với cấu trúc được tạo, thật dễ dàng để áp dụng một số hiệu ứng đơn giản để thêm gia vị.

Drop-Down Lists

DOWLOAD

Phông chữ biểu tượng được tạo bằng IcoMoon .

Vì vậy, chúng tôi bắt đầu với một đầu vào được chọn, ví dụ:

<select id="cd-dropdown" class="cd-select">
	<option value="-1" selected>Choose an animal</option>
	<option value="1" class="icon-monkey">Monkey</option>
	<option value="2" class="icon-bear">Bear</option>
	<option value="3" class="icon-squirrel">Squirrel</option>
	<option value="4" class="icon-elephant">Elephant</option>
</select>

Một plugin thả xuống có thể được áp dụng như sau:

$( '#cd-dropdown' ).dropdown();

Lựa chọn và các tùy chọn được chuyển đổi thành cấu trúc sau:

<div class="cd-dropdown">
	<span>Choose an animal</span>
	<input type="hidden" name="cd-dropdown">
	<ul>
		<li data-value="1"><span class="icon-monkey">Monkey</span></li>
		<li data-value="2"><span class="icon-bear">Bear</span></li>
		<li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
		<li data-value="4"><span class="icon-elephant">Elephant</span></li>
	</ul>
</div>

Khi nhấp vào nhịp đầu tiên, chúng tôi sẽ áp dụng lớp cd cd active active cho lớp cha của nó, phân chia với lớp cd-dropdown, lớp. Khi chọn một tùy chọn, nhịp tương ứng sẽ được chèn vào cái đầu tiên.

Tùy chọn

Các tùy chọn mặc định sau đây khả dụng:

speed : 300,
easing : 'ease',
gutter : 0,

// initial stack effect
stack : true,

// delay between each option animation
delay : 0,

// random angle and positions for the options
random : false,

// rotated [right || left || false]: the options will be rotated to the right side or left side
// make sure to set the transform-origin in the style sheet
rotated : false,

// effect to slide in the options
// value is the margin to start with
slidingIn : false

Kiểu phổ biến cơ bản được xác định trong tệp common.css và bạn có thể thấy các kiểu riêng lẻ trong biểu định kiểu styleN.css.

No votes yet.
Please wait...

Bạn có thể thích

Hãy bình luận chém gió đi nào. HAHA Thank!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *