質問編集履歴

2

画像添付

2020/04/16 09:05

投稿

Nodoame0716
Nodoame0716

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,9 +1,17 @@
1
- writeというサイトの模写コーディングをしています。ヘッダーを http://demo.themegraphy.com/write-ja/ のようなサイトの挙動にしたいです。ヘッダーにある検索アイコンを押すと検索バーが広がるようにしたいのですが、ググっても挙動が違っていて困っています。近いものを拾ってきてコードを弄り検索バーが展開されるところまでは実現できました。しかし検索バーが広がると同時に検索アイコンの前に配置された要素を押し込んでしまい、レイアウトが崩壊してしまいます。理想は検索バーが他の要素の上に重なって要素を押し込まないようにしたいです。
1
+ サイトの模写コーディングをしています。ヘッダーを http://demo.themegraphy.com/write-ja/ のようなサイトの挙動にしたいです。ヘッダーにある検索アイコンを押すと検索バーが広がるようにしたいのですが、ググっても挙動が違っていて困っています。近いものを拾ってきてコードを弄り検索バーが展開されるところまでは実現できました。しかし検索バーが広がると同時に検索アイコンの前に配置された要素を押し込んでしまい、レイアウトが崩壊してしまいます。理想は検索バーが他の要素の上に重なって要素を押し込まないようにしたいです。
2
2
 
3
3
  html,css,jqueryを使用しています。
4
4
 
5
5
  jqueryとcssを組み合わせるレイアウトは、まだ学習中で一部コピペになっているので不必要なコードが含まれているかもしれません。
6
6
 
7
+
8
+
9
+ 検索アイコン画像
10
+
11
+ ![イメージ説明](26e75b29434ccd0c14d08a0edfc18453.png)
12
+
13
+
14
+
7
15
  ```ここに言語を入力
8
16
 
9
17
  コード

1

内容の注意点を記述

2020/04/16 09:05

投稿

Nodoame0716
Nodoame0716

スコア8

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  html,css,jqueryを使用しています。
4
4
 
5
-
5
+ jqueryとcssを組み合わせるレイアウトは、まだ学習中で一部コピペになっているので不必要なコードが含まれているかもしれません。
6
6
 
7
7
  ```ここに言語を入力
8
8