Skip to content

Commit 36fbacf

Browse files
author
Joshua Baert
committed
Menu text working correctly
1 parent 059a41d commit 36fbacf

3 files changed

Lines changed: 126 additions & 65 deletions

File tree

‎src/components/directive.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,11 @@ angular.module('app').directive('animateDir', function () {
77
link: function (scope, elems, attrs) {
88
$(document).ready(function () {
99
$('.side-menu').on('mouseenter', function () {
10-
$('.side-menu').css('width', '215px');
11-
setTimeout(function(){
12-
$('.menu-items').css('display','flex');
13-
},200);
10+
$('.side-menu').css('width', '135px');
1411
});
1512
$('.side-menu').on('mouseleave', function () {
1613
$('.side-menu').css('width', '55px');
17-
$('.menu-items').css('display','none');
14+
// $('.menu-items').css('display','none');
1815
});
1916
$('.top-menu').on('mouseenter', function () {
2017
$('.top-menu').css('background-color', '#222222')

‎src/components/menus/menu.html‎

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,58 @@
11
<animate-dir settings='settings'></animate-dir>
22
<div class='view'>
3-
<div class='menu'>
4-
<div class="side-menu font16-reg">
5-
<ul>
6-
<li class='ul' ui-sref='menu.home'>
7-
<div class='icon-div'><img src='./assets/imgs/ST-R.png' class='main-icon li'></div><span class='menu-items li'>Home</span></li><br>
8-
<li class="ul" ui-sref='menu.kata_list'>
9-
<div class='icon-div'><img src='./assets/imgs/arrow_icon.png' class='side-menu-icon li' id='icon1'></div><span class='menu-items'>Kata</span></li><br>
10-
<li class="ul">
11-
<div class='icon-div'><img src='./assets/imgs/kumite_icon.png' class='side-menu-icon li' id='icon2'></div><span class='menu-items'>Kumite</span></li><br>
12-
<li class="ul">
13-
<div class='icon-div'><img src='./assets/imgs/blurb_icon.png' class='side-menu-icon li' id='icon3'></div><span class='menu-items'>Forum</span></li><br>
14-
<li class="ul" ui-sref='menu.docs'>
15-
<div class='icon-div'><img src='./assets/imgs/asset_23.png' class='side-menu-icon li' id='icon4'></div><span class='menu-items'>Docs</span></li><br>
16-
</ul>
17-
</div>
18-
<div class="top-menu">
19-
<ul class='ul-top'>
20-
<li><div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div></li>
21-
<li><div class='li65'><img src='./assets/imgs/asset_31.png'class='li65-img'></div></li>
22-
<li class='li170'><li>{{userPic}}</li><li>kyu</li><li>lvl</li></li>
23-
</ul>
24-
</div>
25-
<main>
26-
<ui-view class='main-div'></ui-view>
27-
</main>
28-
</div>
3+
<div class='menu'>
4+
<div class="side-menu font16-reg">
5+
<ul>
6+
<li class='ul' ui-sref='menu.home'>
7+
<div class='icon-div'>
8+
<img src='./assets/imgs/ST-R.png' class='main-icon li'>
9+
</div>
10+
<span class='menu-items li'>Home</span>
11+
</li>
12+
<br>
13+
<li class="ul" ui-sref='menu.kata_list'>
14+
<div class='icon-div'>
15+
<img src='./assets/imgs/arrow_icon.png' class='side-menu-icon li' id='icon1'>
16+
</div>
17+
<span class='menu-items'>Kata</span>
18+
</li>
19+
<br>
20+
<li class="ul">
21+
<div class='icon-div'>
22+
<img src='./assets/imgs/kumite_icon.png' class='side-menu-icon li' id='icon2'>
23+
</div>
24+
<span class='menu-items'>Kumite</span></li>
25+
<br>
26+
<li class="ul">
27+
<div class='icon-div'>
28+
<img src='./assets/imgs/blurb_icon.png' class='side-menu-icon li' id='icon3'>
29+
</div>
30+
<span class='menu-items'>Forum</span></li>
31+
<br>
32+
<li class="ul" ui-sref='menu.docs'>
33+
<div class='icon-div'>
34+
<img src='./assets/imgs/asset_23.png' class='side-menu-icon li' id='icon4'>
35+
</div>
36+
<span class='menu-items'>Docs</span></li>
37+
<br>
38+
</ul>
39+
</div>
40+
<div class="top-menu">
41+
<ul class='ul-top'>
42+
<li>
43+
<div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div>
44+
</li>
45+
<li>
46+
<div class='li65'><img src='./assets/imgs/asset_31.png' class='li65-img'></div>
47+
</li>
48+
<li class='li170'>
49+
<li>{{userPic}}</li>
50+
<li>kyu</li>
51+
<li>lvl</li>
52+
</li>
53+
</ul>
54+
</div>
55+
<main>
56+
<ui-view class='main-div'></ui-view>
57+
</main>
58+
</div>

‎src/components/menus/menu.scss‎

Lines changed: 68 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -20,57 +20,73 @@ $grey-color: #C0C0C0;
2020
flex-direction: row;
2121
}
2222

23+
24+
2325
.ul {
24-
display: flex;
25-
height:35px;
26-
cursor: pointer;
26+
display: flex;
27+
height: 35px;
28+
cursor: pointer;
2729
}
2830

31+
32+
2933
.li {
30-
flex-direction: row;
34+
flex-direction: row;
3135
}
3236

37+
38+
3339
.side-menu {
3440
background-color: $sidebar-color;
3541
height: 100vh;
3642
width: 55px;
37-
padding: 5px;
3843
float: left;
3944
position: fixed;
4045
left: 0;
4146
top: 0;
4247
transition: width 0.5s;
4348
z-index: 99;
49+
overflow: hidden;
4450
}
4551

52+
53+
4654
.icon-div {
47-
width: 55px;
48-
align-items: center;
49-
justify-content: center;
50-
display: flex;
51-
55+
width: 55px;
56+
height: 100%;
57+
align-items: center;
58+
justify-content: center;
59+
display: flex;
60+
5261
}
5362

63+
64+
5465
.main-icon {
55-
width:35px;
56-
height:35px;
57-
left:50px;
58-
cursor: pointer;
66+
width: 35px;
67+
height: 35px;
68+
left: 50px;
69+
cursor: pointer;
5970
}
71+
72+
73+
6074
.side-menu-icon {
61-
// width: 20px;
75+
// width: 20px;
6276
height: 22px;
6377
}
6478

79+
80+
6581
.menu-items {
66-
display: none;
67-
cursor: pointer;
68-
vertical-align: center;
69-
margin: auto 0;
70-
justify-content: left;
82+
position: absolute;
83+
left: 55px;
84+
margin: 7px 0 0 0;
85+
cursor: pointer;
7186
}
7287

7388

89+
7490
/**************TOP MENU**************/
7591

7692
.top-menu {
@@ -82,38 +98,56 @@ cursor: pointer;
8298
height: 50px;
8399
}
84100

101+
102+
85103
.ul-top {
86-
display: flex;
87-
flex-direction: row;
104+
display: flex;
105+
flex-direction: row;
88106
}
107+
108+
109+
89110
.li65 {
90-
width: 65px;
111+
width: 65px;
91112
}
113+
114+
115+
92116
.li65-img {
93-
margin:auto;
94-
vertical-align: center;
95-
height: 25px;
117+
margin: auto;
118+
vertical-align: center;
119+
height: 25px;
96120
}
97121

122+
123+
98124
.li170 {
99-
width: 170px;
100-
display: flex;
101-
flex-direction: row;
102-
justify-content: space-around;
125+
width: 170px;
126+
display: flex;
127+
flex-direction: row;
128+
justify-content: space-around;
103129
}
104130

131+
132+
105133
.li170-img {
106-
vertical-align: center;
134+
vertical-align: center;
107135
}
108136

109-
.li170-1 {
110137

138+
139+
.li170-1 {
140+
111141
}
112142

113-
.li170-2 {
114143

144+
145+
.li170-2 {
146+
115147
}
116148

117-
.li170-3 {
118149

150+
151+
.li170-3 {
152+
119153
}

0 commit comments

Comments
 (0)