teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

直うち部分

2016/08/09 10:10

投稿

Nyoki
Nyoki

スコア10

title CHANGED
File without changes
body CHANGED
@@ -10,9 +10,9 @@
10
10
  cssのposition部分であったり90の数値であったりを書き換えています。
11
11
  JavaScriptは書き方が全くわからないため、至らない質問ですみません。![イメージ説明](a7704642178941665eeadba11da269f0.png)
12
12
 
13
- (※ 画像が入れられなかったため、直打ちです。)
14
13
  90、-90のところを逆に記載(>矢印の向きが逆だったため)、top: 50%; right: 10px;の数値を場所を移動させたかったためposition: relative;を他で指定し、ここを書き換えました。
15
14
 
15
+ ```CSS
16
16
  .menu:after {
17
17
  position: absolute;
18
18
  top: 50%;
@@ -40,4 +40,5 @@
40
40
  -ms-transform: rotate(-90deg);
41
41
  -webkit-transform: rotate(-90deg);
42
42
  transform: rotate(-90deg);
43
- }
43
+ }
44
+ ```

1

cssの部分を追加しました。

2016/08/09 10:10

投稿

Nyoki
Nyoki

スコア10

title CHANGED
@@ -1,1 +1,1 @@
1
- アコーディオンを閉じたまま初期表示するには…
1
+ アコーディオンを閉じたまま初期表示するには…
body CHANGED
@@ -8,4 +8,36 @@
8
8
  という記述などはないものでしょうか?
9
9
 
10
10
  cssのposition部分であったり90の数値であったりを書き換えています。
11
- JavaScriptは書き方が全くわからないため、至らない質問ですみません。![イメージ説明](a7704642178941665eeadba11da269f0.png)
11
+ JavaScriptは書き方が全くわからないため、至らない質問ですみません。![イメージ説明](a7704642178941665eeadba11da269f0.png)
12
+
13
+ (※ 画像が入れられなかったため、直打ちです。)
14
+ 90、-90のところを逆に記載(>矢印の向きが逆だったため)、top: 50%; right: 10px;の数値を場所を移動させたかったためposition: relative;を他で指定し、ここを書き換えました。
15
+
16
+ .menu:after {
17
+ position: absolute;
18
+ top: 50%;
19
+ right: 10px;
20
+ margin-top: -14px;
21
+ content: '>';
22
+ font-size: 14px;
23
+ font-weight: bold;
24
+ -moz-transform: rotate(90deg);
25
+ -ms-transform: rotate(90deg);
26
+ -webkit-transform: rotate(90deg);
27
+ transform: rotate(90deg);
28
+ -moz-transition: all, 0.25s, linear;
29
+ -o-transition: all, 0.25s, linear;
30
+ -webkit-transition: all, 0.25s, linear;
31
+ transition: all, 0.25s, linear;
32
+ }
33
+
34
+ .menu.active:after {
35
+ -moz-transform: translate(0, 50%);
36
+ -ms-transform: translate(0, 50%);
37
+ -webkit-transform: translate(0, 50%);
38
+ transform: translate(0, 50%);
39
+ -moz-transform: rotate(-90deg);
40
+ -ms-transform: rotate(-90deg);
41
+ -webkit-transform: rotate(-90deg);
42
+ transform: rotate(-90deg);
43
+ }