AngularJS - 用Angular JS写个NavBar
程序员文章站
2022-05-25 18:34:03
...
HTML;
<ul class="stats-sidebar-nav">
<li class="item" ng-class="{'selected-1':statsView=='overview', 'item-hover': hover}" ng-mouseenter="hover1 = true" ng-mouseleave="hover1 = false"><a href="#/overview">课程总览</a></li>
<li class="item" ng-class="{'selected':statsView=='satisfaction', 'item-hover': hover2}" ng-mouseenter="hover2 = true" ng-mouseleave="hover2 = false"><a href="#/satisfaction">课程满意度</a></li>
<li class="item" ng-class="{'selected':statsView=='proactivity', 'item-hover': hover3}" ng-mouseenter="hover3 = true" ng-mouseleave="hover3 = false"><a href="#/proactivity">课程活跃度</a></li>
<li class="item" ng-class="{'selected':statsView=='understanding', 'item-hover': hover4}" ng-mouseenter="hover4 = true" ng-mouseleave="hover4 = false"><a class="" href="#/understanding">授课消化度</a></li>
</ul>
less:
@light-blue-bg: #1387C0;
a:hover{
text-decoration: none;
}
.hide {
display: hidden;
}
.border-fix {
border-top: 1px solid @light-blue-bg; // pixel perfect
}
.stats-sidebar-nav {
float: left;
width: 200px;
height: 700px; // actuall 500px
background-color: #324056;
.item {
&.selected{
background-color: @light-blue-bg;
font-weight: bold;
}
&.selected-1{
background-color: @light-blue-bg;
font-weight: bold;
.border-fix;
}
cursor: pointer;
width: 200px;
height: 40px;
border-top: 1px solid #3D4A5D;
padding-left: 18px;
a {
line-height: 40px;
height: 100%;
width: 100%;
display: block;
text-decoration: none;
color: white;
}
}
.item-hover {
background-color: @light-blue-bg;
// .border-fix;
}
}
javascript: 无
解释:
在html中,ng-mouseenter 与 ng-mouseleave 给每个块定义了一个hover[i]变量,这个变量控制了ng-class中得item-hover。
css中,.stats-sidebar-nav .item a 定义了a的:
1. line-height 使得文字居中
2. height width 均为100%, display为block 使得a的大小与div相重合。(所以实现hover的另外一个思路就是用a:hover)
<ul class="stats-sidebar-nav">
<li class="item" ng-class="{'selected-1':statsView=='overview', 'item-hover': hover}" ng-mouseenter="hover1 = true" ng-mouseleave="hover1 = false"><a href="#/overview">课程总览</a></li>
<li class="item" ng-class="{'selected':statsView=='satisfaction', 'item-hover': hover2}" ng-mouseenter="hover2 = true" ng-mouseleave="hover2 = false"><a href="#/satisfaction">课程满意度</a></li>
<li class="item" ng-class="{'selected':statsView=='proactivity', 'item-hover': hover3}" ng-mouseenter="hover3 = true" ng-mouseleave="hover3 = false"><a href="#/proactivity">课程活跃度</a></li>
<li class="item" ng-class="{'selected':statsView=='understanding', 'item-hover': hover4}" ng-mouseenter="hover4 = true" ng-mouseleave="hover4 = false"><a class="" href="#/understanding">授课消化度</a></li>
</ul>
less:
@light-blue-bg: #1387C0;
a:hover{
text-decoration: none;
}
.hide {
display: hidden;
}
.border-fix {
border-top: 1px solid @light-blue-bg; // pixel perfect
}
.stats-sidebar-nav {
float: left;
width: 200px;
height: 700px; // actuall 500px
background-color: #324056;
.item {
&.selected{
background-color: @light-blue-bg;
font-weight: bold;
}
&.selected-1{
background-color: @light-blue-bg;
font-weight: bold;
.border-fix;
}
cursor: pointer;
width: 200px;
height: 40px;
border-top: 1px solid #3D4A5D;
padding-left: 18px;
a {
line-height: 40px;
height: 100%;
width: 100%;
display: block;
text-decoration: none;
color: white;
}
}
.item-hover {
background-color: @light-blue-bg;
// .border-fix;
}
}
javascript: 无
解释:
在html中,ng-mouseenter 与 ng-mouseleave 给每个块定义了一个hover[i]变量,这个变量控制了ng-class中得item-hover。
css中,.stats-sidebar-nav .item a 定义了a的:
1. line-height 使得文字居中
2. height width 均为100%, display为block 使得a的大小与div相重合。(所以实现hover的另外一个思路就是用a:hover)
上一篇: Mysql 数据导入和导出
下一篇: 类与in_array
推荐阅读
-
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)
-
【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)...
-
教你用AngularJS框架一行JS代码实现控件验证效果
-
Angular.js与node.js项目里用cookie校验账户登录详解
-
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)
-
AngularJS - 用Angular JS写个NavBar