angularjs+bootstrap菜单的使用示例代码


Posted in Javascript onMarch 07, 2017

需求背景:

使用yo angular生成的项目默认主页是这样的:

angularjs+bootstrap菜单的使用示例代码

body部分涉及具体的业务内容,后续研究。这里主要研究菜单项、页眉的处理。

页脚处理:

自动生成的项目中,菜单和页脚设置都是在index.html文件中实现的。

# index.html
  <div class="footer">
   <div class="container">
    <p><span class="glyphicon glyphicon-heart"></span> 京东金融·杭州研发中心</p>
   </div>
  </div>

设置css格式:

/* Custom page footer */
.footer {
 padding-top: 20px;
 color: rgba(204, 3, 8, 0.91);
 border-top: 1px solid #e5e5e5;
 text-align: center;
}
 .container {
  max-width: 730px;
  margin-left: auto;
  margin-right: auto;
 }

上述截图还可见页面格式问题,是因为创建工程时,没有依赖bootstrap还有compass,项目根目录下安装相关依赖即可:

bower install compass --save
bower install bootstrap --save

菜单处理:

菜单功能主要在index.html文件中的header代码段实现。

<div class="header">
   <div class="menu">
    <nav class="navbar navbar-default" role="navigation">
     <div class="navbar-header">
      <!--![](images/jdjr.jpg)-->
     </div>

     <div class="collapse navbar-collapse" id="">
      <ul class="nav navbar-nav">
       <li class="active dropdown">
        <a class="dropdown-toggle" href="#" rel="external nofollow" data-toggle="dropdown">网关信息</a>
        <ul class="dropdown-menu">
         <li><a href="">NAT网关</a></li>
         <li><a href="">ROUTER网关</a></li>
        </ul>
       </li>
      </ul>
     </div>
    </nav>
   </div>
  </div>

这些class设置了默认属性,所以能够呈现出较为友好的样式,所以如果使用自定义类名,那样式需要自己设置。如果需要鼠标移动到菜单上就能够显示子菜单,则需要设置css属性。

.dropdown:hover .dropdown-menu {
 display: block;
}

菜单增加跳转:

菜单的跳转主要通过href实现,如下代码就是操作日志菜单跳转到/oplog页面:

<li><a href="#!/oplog" rel="external nofollow" >操作日志</a></li>

然后需要在app.js中增加相关控制代码:

.when('/oplog', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl',
    controllerAs: 'about'
   })

由于这里我重用了项目初始化时就生成的about.html代码,所以,不需要开发相关html文件,实际开发中这个跳转后的网页是需要自己在views目录下创建并开发页面的,同时需要在controllers目录下开发相关控制(此处就为AboutCtrl.js)代码。

菜单效果:

angularjs+bootstrap菜单的使用示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
JQuery中Ajax的操作完整例子
Mar 07 #Javascript
js判断手机系统是android还是ios
Mar 07 #Javascript
jQuery设计思想
Mar 07 #Javascript
Node.js读取文件内容示例
Mar 07 #Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 #Javascript
AngularJS的Filter的示例详解
Mar 07 #Javascript
js上下视差滚动简单实现代码
Mar 07 #Javascript
You might like
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
js 学习笔记(三)
2009/12/29 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
打架检讨书800字
2014/01/10 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
Nginx配置之禁止指定IP访问
2022/05/02 Servers