Skip to content

Commit 18dd5d9

Browse files
author
Jon Myrick
authored
Merge pull request CodewarsClone#90 from CodewarsClone/MenuEtc
Menu working correctly
2 parents 059a41d + d45cf51 commit 18dd5d9

3 files changed

Lines changed: 127 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: 69 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/**************SIDE MENU**************/
22

3+
34
$sidebar-color: #222222;
45
$main-background: #303133;
56
$container1: #262729;
@@ -20,57 +21,73 @@ $grey-color: #C0C0C0;
2021
flex-direction: row;
2122
}
2223

24+
25+
2326
.ul {
24-
display: flex;
25-
height:35px;
26-
cursor: pointer;
27+
display: flex;
28+
height: 35px;
29+
cursor: pointer;
2730
}
2831

32+
33+
2934
.li {
30-
flex-direction: row;
35+
flex-direction: row;
3136
}
3237

38+
39+
3340
.side-menu {
3441
background-color: $sidebar-color;
3542
height: 100vh;
3643
width: 55px;
37-
padding: 5px;
3844
float: left;
3945
position: fixed;
4046
left: 0;
4147
top: 0;
4248
transition: width 0.5s;
4349
z-index: 99;
50+
overflow: hidden;
4451
}
4552

53+
54+
4655
.icon-div {
47-
width: 55px;
48-
align-items: center;
49-
justify-content: center;
50-
display: flex;
51-
56+
width: 55px;
57+
height: 100%;
58+
align-items: center;
59+
justify-content: center;
60+
display: flex;
61+
5262
}
5363

64+
65+
5466
.main-icon {
55-
width:35px;
56-
height:35px;
57-
left:50px;
58-
cursor: pointer;
67+
width: 35px;
68+
height: 35px;
69+
left: 50px;
70+
cursor: pointer;
5971
}
72+
73+
74+
6075
.side-menu-icon {
61-
// width: 20px;
76+
// width: 20px;
6277
height: 22px;
6378
}
6479

80+
81+
6582
.menu-items {
66-
display: none;
67-
cursor: pointer;
68-
vertical-align: center;
69-
margin: auto 0;
70-
justify-content: left;
83+
position: absolute;
84+
left: 55px;
85+
margin: 7px 0 0 0;
86+
cursor: pointer;
7187
}
7288

7389

90+
7491
/**************TOP MENU**************/
7592

7693
.top-menu {
@@ -82,38 +99,56 @@ cursor: pointer;
8299
height: 50px;
83100
}
84101

102+
103+
85104
.ul-top {
86-
display: flex;
87-
flex-direction: row;
105+
display: flex;
106+
flex-direction: row;
88107
}
108+
109+
110+
89111
.li65 {
90-
width: 65px;
112+
width: 65px;
91113
}
114+
115+
116+
92117
.li65-img {
93-
margin:auto;
94-
vertical-align: center;
95-
height: 25px;
118+
margin: auto;
119+
vertical-align: center;
120+
height: 25px;
96121
}
97122

123+
124+
98125
.li170 {
99-
width: 170px;
100-
display: flex;
101-
flex-direction: row;
102-
justify-content: space-around;
126+
width: 170px;
127+
display: flex;
128+
flex-direction: row;
129+
justify-content: space-around;
103130
}
104131

132+
133+
105134
.li170-img {
106-
vertical-align: center;
135+
vertical-align: center;
107136
}
108137

109-
.li170-1 {
110138

139+
140+
.li170-1 {
141+
111142
}
112143

113-
.li170-2 {
114144

145+
146+
.li170-2 {
147+
115148
}
116149

117-
.li170-3 {
118150

151+
152+
.li170-3 {
153+
119154
}

0 commit comments

Comments
 (0)