ヘッダーのレイアウトを同じにしたいです。

サイトの模写コーディングをしています。ヘッダーを　http://demo.themegraphy.com/write-ja/　のようなサイトの挙動にしたいです。ヘッダーにある検索アイコンを押すと検索バーが広がるようにしたいのですが、ググっても挙動が違っていて困っています。近いものを拾ってきてコードを弄り検索バーが展開されるところまでは実現できました。しかし検索バーが広がると同時に検索アイコンの前に配置された要素を押し込んでしまい、レイアウトが崩壊してしまいます。理想は検索バーが他の要素の上に重なって要素を押し込まないようにしたいです。
html,css,jqueryを使用しています。
jqueryとcssを組み合わせるレイアウトは、まだ学習中で一部コピペになっているので不必要なコードが含まれているかもしれません。

検索アイコン画像

コード
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>Document</title>
  <link rel="stylesheet" href="sanitize.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/faf3ade458.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="write.js"></script>

</head>
<body>
    <!-- header -->
    <div class="container">
      <header>
        <div class="header-flex">
          <div class="header-left">
            <h1><a href="#" class="black">Write</a></h1>
            <p class="gray">書くためのテーマ</p>
          </div>
          <div class="flex-query-test">
            <div class="header-center">
              <nav class="header-nav">
                <ul class="globalnav"> 
                  <li class="dropdown-btn">
                    <a href="#" class="black">ホーム<i class="fas fa-angle-down"></i></a>
                    <!-- <ul class="dropdown">
                      <li><a href="#"> →カスタマイズ</a></li>
                    </ul> -->
                  </li>
                  <li>
                    <a href="#" class="black">ページ<i class="fas fa-angle-down"></i></a>
                  </li>
                  <li><a href="#" class="black">タイポグラフィー</a></li>
                  <li><a href="#" class="black">お問い合わせ</a></li>
                </ul>
              </nav>
              
            </div>
            <div class="header-right">
                <div class="icon-search-container" data-ic-class="search-trigger">
                    <img class="pointer" src="img/search-icon.png" alt="">
                  <input type="text" class="search-input" data-ic-class="search-input" placeholder="検索...">
                </div>
            </div>
          </div>
        </div>
      </header>
    </div>
</body>
</html>

コード
* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, p, ul, li{
  padding: 0;
  margin: 0;
}

li{
  list-style: none;
}

a{
  text-decoration: none;
}



body{
  font-family: Georgia, '游明朝', 'YuMincho', 'Hiragino Mincho ProN', 'Meiryo', serif;
  line-height: 1.8;
  margin: 60px 40px;
  padding: 0 60px;
}

.black{
  color: #111;
}

.black:hover{
  opacity: .8;
}

.gray{
  color: #777777;
}

.container{
  max-width: 1035px;
  margin: 0 auto;
}

.header-flex{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  padding-bottom: 10px;
}

.header-left{
  width: 30%;
}

.header-left p{
  font-size: .9rem;
}

.header-nav ul{
  display: flex;
}

.header-nav ul li{
  padding-right: 1.5rem;
}

.header-nav ul li a{
  font-size: .9rem;
}

.header-nav ul li a:hover{
  color: #c49029;
}

.flex-query-test{
  display: flex;
  width: 70%;
  justify-content: space-between;
}


.menu {
  position: relative;
  width: 100%;
  height: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.menu > li {
  float: left;
  width: 25%; /* グローバルナビ4つの場合 */
  height: 50px;
  line-height: 50px;
  background: rgb(29, 33, 19);
}

.menu > li a {
  display: block;
  color: #fff;
}

.menu > li a:hover {
  color: #999;
}

ul.menu__second-level {
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}

ul.menu__third-level {
  visibility: hidden;
  opacity: 0;
}

ul.menu__fourth-level {
  visibility: hidden;
  opacity: 0;
}

.menu > li:hover {
  background: #072A24;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.menu__second-level li {
  border-top: 1px solid #111;
}

.menu__third-level li {
  border-top: 1px solid #111;
}

.menu__second-level li a:hover {
  background: #111;
}

.menu__third-level li a:hover {
  background: #2a1f1f;
}

.menu__fourth-level li a:hover {
  background: #1d0f0f;
}

/* 下矢印 */
.init-bottom:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
  content: " ";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom: 1;
}

.menu > li.menu__single {
  position: relative;
}

li.menu__single ul.menu__second-level {
  position: absolute;
  top: 40px;
  width: 100%;
  background: #072A24;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 1;
}

/* 検索ボタンcss */


.icon-search-container {
  display: inline-block;
  height: 20px;
  width: 20px;
  position: relative;
  transition:  0.2s ease-out;
  line-height: 0px;
  
}

.pointer{
  position: absolute;
  z-index: 1000;
}

.pointer:hover{
  cursor: pointer;
}

.icon-search-container.active {
  width: 285px;
  height: 30px;
  border: 1px solid #000;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  position: absolute;
}

.icon-search-container.active .search-input {
  width: 200px;
}

.icon-search-container .fa-search {
  color: #2980b9;
  font-size: 30px;
  position: absolute;
  top: 7px;
  left: 8px;
  cursor: pointer;
}
.icon-search-container .fa-times-circle {
  opacity: 0;
  color: #d9d9d9;
  font-size: 20px;
  position: absolute;
  top: 12px;
  right: 8px;
  transition: 0.2s ease-out;
  cursor: pointer;
}
.icon-search-container .search-input {
  position: absolute;
  cursor: default;
  left: 35px;
  top: 5px;
  width: 0;
  border: none;
  outline: none;
  font-size: 18px;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 0);
  transition: 0.2s ease-out;
}

コード
// ドロップダウンメニュー
$('.dropdown-btn').hover(
  function() {
    //カーソルが重なった時
    $(this).children('.dropdown').addClass('open');
  }, function() {
    //カーソルが離れた時
    $(this).children('.dropdown').removeClass('open');
  }
);

// グローバルナビの開閉
$(function() {
  $('.nav-button-wrap').on('click', function() {
    if ($(this).hasClass('active')) {
      // スマホ用メニューが表示されていたとき
      $(this).removeClass('active');
      $('.globalnav').addClass('close');
      $('.globalnav-wrap , body').removeClass('open');
    } else {
      // スマホ用メニューが非表示の時
      $(this).addClass('active');
      $('.globalnav').removeClass('close');
      $('.globalnav-wrap , body').addClass('open');
    }
  });
});



$(document).ready(function(){
  
  var $searchTrigger = $('[data-ic-class="search-trigger"]'),
      $searchInput = $('[data-ic-class="search-input"]'),
      $searchClear = $('[data-ic-class="search-clear"]');
  
  $searchTrigger.click(function(){
    
    var $this = $('[data-ic-class="search-trigger"]');
    $this.addClass('active');
    $searchInput.focus();
    
  });
  
  $searchInput.blur(function(){
    
    if($searchInput.val().length > 0){
      
      return false;
      
    } else {
      
      $searchTrigger.removeClass('active');
      
    }
    
  });
  
  $searchClear.click(function(){
    $searchInput.val('');
  });
  
  $searchInput.focus(function(){
    $searchTrigger.addClass('active');
  });
  
});

m.ts10806

2020/04/16 12:05

調べるべきは実際のお手本にしているWebサイトのコードであって「同じような挙動を実現してそうな何か」ではないと思うのですが、そういう制約があるのでしょうか。 https://ascii.jp/elem/000/000/999/999122/

Nodoame0716

2020/04/17 03:13

回答ありがとうございます。私は模写コーディング自体が初めての経験なので、模写をするときに前提としてググっても本当にわからないときにお手本のサイトのコードを見るというルールを決めていました。コーディングのスキルを身につけたいのと同時にググって自己解決する力も養いたいと思っていましたから。しかし、結局ググってもわからなかったので、質問する前に一度自分で作ったコードは、無視して元のサイトのコード確認してもよかったなと反省しました。

m.ts10806

2020/04/17 03:19

「ゴール」をどこに置くかだと思います。実装の手法は違っても同じように動けばいいのか、コードまで同じにしなければならないのか。実務では「これいいな」でそのまま持ってくることもありますし、近そうなものを抜き出してカスタマイズすることもありますし、動きだけを参考に自力で組むこともありますが、要件次第ゴール次第なところはあります。「機能」はあくまで「ちいさな部品の集合体」ですので、その機能に必要な部品をなるべく細分化していければ、それぞれの部品を作る際に調べるキーワードもハッキリしてきますし、自作するにしても何をするにしてもやりやすくなると思います。

Nodoame0716

2020/04/19 08:51

なるほどゴール次第でコードの厳密さが変わるわけですね。その辺については、漠然としながらコーディングしていたので考えてなかったのですが、今回の模写では動きと大部分のレイアウトが同じであれば合格としたいと思います。実務でのことを知ることが出来たのはありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptを使わず、実装してみました。
CodePenでご確認ください。

position: absolute;など、不要な箇所はコメントアウトしています。

ホバー、フォーカス時の挙動については
末尾の.search-input:hover, .search-input:focusあたりをご参照ください。

CSS
1/* 検索ボタンcss */
2.icon-search-container {
3  /* display: inline-block; */
4  height: 20px;
5  width: 20px;
6  position: relative;
7  transition: 0.2s ease-out;
8  line-height: 0px;
9  
10  /* 追加 */
11  display: flex;
12  align-items: center;
13  justify-content: flex-end;
14}
15
16.pointer {
17  /* position: absolute; */
18  /* z-index: 1000; */
19  
20  /* 追加 */
21  display: block;
22  width: 20px; /* 好きなサイズにしてください */
23  height: 20px; /* 好きなサイズにしてください */
24}
25
26.pointer:hover {
27  cursor: pointer;
28}
29/* 不要そうなのでコメントアウト */
30/*
31.icon-search-container.active {
32  width: 285px;
33  height: 30px;
34  border: 1px solid #000;
35  padding-top: 5px;
36  padding-bottom: 10px;
37  padding-left: 10px;
38  position: absolute;
39}
40
41.icon-search-container.active .search-input {
42  width: 200px;
43}
44.icon-search-container .fa-search {
45  color: #2980b9;
46  font-size: 30px;
47  position: absolute;
48  top: 7px;
49  left: 8px;
50  cursor: pointer;
51}
52.icon-search-container .fa-times-circle {
53  opacity: 0;
54  color: #d9d9d9;
55  font-size: 20px;
56  position: absolute;
57  top: 12px;
58  right: 8px;
59  transition: 0.2s ease-out;
60  cursor: pointer;
61}
62*/
63.icon-search-container .search-input {
64  /* position: absolute; */
65  cursor: default;
66  /* left: 35px; */
67  /* top: 5px; */
68  width: 0;
69  border: none;
70  outline: none;
71  font-size: 18px;
72  line-height: 20px;
73  background-color: rgba(255, 255, 255, 0);
74  transition: 0.2s ease-out;
75  
76  /* 追加 */
77  position: relative;
78  z-index: 1000;
79}
80
81/* 追加 */
82.search-input {
83  margin-left: -24px; /* 調整してください */
84  padding: 10px; /* 調整してください */
85  padding-left: 24px; /* 調整してください */
86  background: rgba(255, 0, 0, 0.5);
87}
88.search-input:hover,
89.search-input:focus {
90  width: 200px; /* 調整してください */
91  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
92}

投稿2020/04/16 22:24

new1ro

総合スコア4528

Nodoame0716

2020/04/17 03:33

回答ありがとうございます。アドバイス通りにコーディングしたらヘッダー完成しました！！不要なコードもコメントアウトして下さったのでコードの整理の手間も省けて非常にわかりやすかったです。ヘッダーのこの部分だけは、勉強不足でさっぱりわからなかったので悩んでましたが、おかげでレスポンシブ化の工程までいけます。ありがとうございました。