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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
学习jQuey中的return false
Dec 18 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
原生JS实现留言板功能
Feb 08 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
DOMXML函数笔记
2006/10/09 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
mysql+php分页类(已测)
2008/03/31 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
摘自启点的main.js
2008/04/20 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python实现机器人行走效果
2018/01/29 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
有模特经验的简历自我评价
2013/09/19 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
python实现过滤敏感词
2021/05/08 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电