JQuery 响应移动菜单插件。(Responsive Mobile Menu Plugin for jQuery.)
JQuery 响应移动菜单插件。 SlickNav将默认使用jQuery的动画。 如果您希望使用Velocity.js进行动画制作，请务必在包含SlickNav之前将该库包含在代码中。
.slicknav_menu {
display:none;}@media screen and (max-width: 40em) {
/* #menu is the original menu */ .js #menu { display:none; } .js .slicknav_menu {
display:block; }}特性：
| 名稱與所有者 | ComputerWolf/SlickNav |
|---|---|
| 主編程語言 | JavaScript |
| 編程語言 | JavaScript (語言數: 2) |
| 平台 | |
| 許可證 | MIT License |
| 發布數 | 12 |
| 最新版本名稱 | 1.0.10 (發布於 ) |
| 第一版名稱 | 1.0.0 (發布於 ) |
| 創建於 | 2013-09-26 17:40:56 |
| 推送於 | 2021-03-18 11:08:20 |
| 最后一次提交 | 2021-01-12 16:06:23 |
| 星數 | 0.9k |
| 關注者數 | 67 |
| 派生數 | 316 |
| 提交數 | 114 |
| 已啟用問題? | |
| 問題數 | 172 |
| 打開的問題數 | 73 |
| 拉請求數 | 14 |
| 打開的拉請求數 | 5 |
| 關閉的拉請求數 | 8 |
| 已啟用Wiki? | |
| 已存檔? | |
| 是復刻? | |
| 已鎖定? | |
| 是鏡像? | |
| 是私有? |
slicknav.css can be modified to fit website design
<link rel="stylesheet" href="SlickNav/dist/slicknav.min.css" />
<script src="SlickNav/dist/jquery.slicknav.min.js"></script>
<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
<script>
$(function(){
$('#menu').slicknav();
});
</script>
'label' : 'MENU', // Label for menu button. Use an empty string for no label.
'duplicate': true, // If true, the mobile menu is a copy of the original.
'duration': true, // The duration of the sliding animation.
'easingOpen': 'swing', // Easing used for open animations.
'easingClose': 'swing' // Easing used for close animations.
'closedSymbol': '►', // Character after collapsed parents.
'openedSymbol': '▼', // Character after expanded parents.
'prependTo': 'body', // Element, jQuery object, or jQuery selector string to prepend the mobile menu to.
'appendTo': '', // Element, jQuery object, or jQuery selector string to append the mobile menu to. Takes precedence over prependTo.
'parentTag': 'a', // Element type for parent menu items.
'closeOnClick': false, // Close menu when a link is clicked.
'allowParentLinks': false // Allow clickable links as parent elements.
'nestedParentLinks': true // If false, parent links will be separated from the sub-menu toggle.
'showChildren': false // Show children of parent links by default.
'removeIds': true // Remove IDs from all menu elements. Defaults to false if duplicate set to false.
'removeClasses': false // Remove classes from all menu elements.
'brand': '' // Add branding to menu bar.
'animations': 'jquery' // Animation library. Currently supports "jquery" and "velocity".
'init': function(){}, // Called after SlickNav creation
'beforeOpen': function(trigger){}, // Called before menu or sub-menu opened.
'beforeClose': function(trigger){} // Called before menu or sub-menu closed.
'afterOpen': function(trigger){} // Called after menu or sub-menu opened.
'afterClose': function(trigger){} // Called after menu or sub-menu closed.
$('.menu').slicknav('toggle'); // Method to toggle the menu
$('.menu').slicknav('open'); // Method to open the menu
$('.menu').slicknav('close'); // Method to close the menu
SlickNav will use jQuery for animations by default. If you wish to use Velocity.js for animating, be sure to include the library in your code before including SlickNav.
Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation.
For example:
.slicknav_menu {
display:none;
}
@media screen and (max-width: 40em) {
/* #menu is the original menu */
.js #menu {
display:none;
}
.js .slicknav_menu {
display:block;
}
}
More examples at SlickNav.io
