bootstrap响应式导航

所属分类:UI,导航-布局,其他导航

 29680  188  查看评论 (2)
分享到微信朋友圈
X
bootstrap响应式导航 ie兼容10

引入文件

<!-- 引入这些文件至 <head> 中 --><link rel="stylesheet" href="responsive-nav.css"><script src="responsive-nav.js"></script>

添加标签

<div id="nav">
  <ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Projects</a></li><li><a href="#">Contact</a></li>
  </ul></div>

启动此插件

<!-- 将下面这段代码放置在 </body> 之前 --><script>
  var navigation = responsiveNav("#nav");</script>

调整参数

var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
  animate: true, // Boolean: 是否启动CSS过渡效果(transitions), true 或 false
  transition: 400, // Integer: 过渡效果的执行速度,以毫秒(millisecond)为单位
  label: "Menu", // String: Label for the navigation toggle
  insert: "after", // String: Insert the toggle before or after the navigation
  customToggle: "", // Selector: Specify the ID of a custom toggle
  openPos: "relative", // String: Position of the opened nav, relative or static
  jsClass: "js", // String: 'JS enabled' class which is added to <html> el
  debug: false, // Boolean: Log debug messages to console, true 或 false
  init: function(){}, // Function: Init callback
  open: function(){}, // Function: Open callback
  close: function(){} // Function: Close callback});

可调用的方法

// 销毁插件navigation.destroy();// Togglenavigation.toggle();
相关插件-布局,其他导航

HTML5九宫格布局的网格菜单

九宫格布局展示效果
  布局
 28179  327

白色简洁html5响应式模板(推荐)

简洁大气的html5响应式模板
  布局
 46569  629

jQuery响应式app网站模板

jQuery响应式app网站模板,点击下载按钮即可跳转到本页面的指定的位置
  布局
 30781  407

Bootstrap4官方模板Hyper - Responsive Bootstrap 4 Admin Dashboard v1.5.0

Bootstrap4官方模板Hyper的默认主题v1.5.0版本,响应式后台管理模板
  布局
 31458  362

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    new一new 0
    2018/11/10 13:40:26
    下载的东西显示页面和例子的不一样 回复
    汉斯 3
    2016/4/1 15:04:49
    用于下载的文件  404了!
        西瓜0
        2016/4/5 16:04:58
        感谢,修改好啦!
    回复
    相信自己 0
    2016/2/18 15:02:32
取消回复