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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
ES6基础之默认参数值
Feb 21 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
JS document对象简单用法完整示例
Jan 14 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
php项目打包方法
2008/02/18 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python中四舍五入的正确打开方式
2021/01/18 Python
软件测试工程师面试问题精选
2016/10/28 面试题
消防安全责任书
2014/04/14 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2014年副班长工作总结
2014/12/10 职场文书
出国留学英文自荐信
2015/03/25 职场文书
初中家长意见
2015/06/03 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
mysql中between的边界,范围说明
2021/06/08 MySQL
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js