先端開発の初歩的な結果

やっと最初の結果が出た.
フロントの知識が不足しているため、HTML/CSSを使ってフレームワークを作成するのは容易ではありません.
そのためコードが理解できず、めちゃくちゃになります!
モバイルやブラウザの最適化だけでなく、フレームワークも正しくなく、Javascriptを使って簡単にCSSと書くことができるため、長いところもあります
もちろん、結果を渡すとき、私はそれを意識して、すべてをひっくり返します(?)できる.でも「今の私はどれくらい成長したの?」比較も面白いと思いますので、置いておきます.
したがって,HTML/CSSやJavaScriptはどのように使うべきか,CSSにどのような欠点があるかなどを知ることができる.
詳しいことは全部終わってから残して、結果を確認しておきます.

0、全体構造

全体構造から、ヘッダー、コンテナ、フッターに大別されます.
ヘッダーはメニュー、タイトル、背景を担当します.
前述したようにcontainerはコンテンツの主な部分です.
フッターには著作権と関連リンクが含まれています.
(脚注は別に、省略)
まずタイトルを見てみましょう.

1.タイトル-メニュー

前述したように、メニューは、第3のクラスにリンクする機能を提供する.
また、スクロール内容をブロックしないように、メニューにスクロールアニメーション効果を追加しました.

第3類機能

カテゴリはご覧のようにドロップダウンできますが、スライド機能が追加されています.
そして、少しずつそんなにたくさんのカテゴリを押すのは嫌になるかもしれないので、サスペンションで展開できます.
コードが長すぎるので、メイン部分だけチェックします.

インプリメンテーション
レイアウト構造はul/liで構成されています.

<li class="nav_dropdown">
  // 메인 UI 요소
  <a class="item2" href="#">카테고리 V</a>
  
  // 펼쳐질 드롭다운 리스트
  <ul class="first_drop">
    <li class="thema">
      <a class="thema1" href="#">Thema1</a>
    </li>
    <li class="thema">
      <a class="thema2" href="#">Thema2</a>
    </li>
    <li class="thema">
      <a class="thema3" href="#">Thema3</a>
    </li>
  </ul>
</li>

「カテゴリV」という場所にマウスを置くと、次の「first drop」が展開される構造になります.
また,スライドイベント効果はCSSの不透明/hight属性がtransitionであることを示している.

// 숨겨진 드롭다운 리스트
.first_drop {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  
  opacity: 0;
  transition: opacity .25s ease .1s;
}
// hover 이벤트
.nav_dropdown:hover .first_drop {
  opacity: 1;
}

opcatiyを0から>1に徐々に変換し、Fade In/Outを与えます.

// 리스트 각각의 UI 요소들
.thema {
  height: 0;
  overflow: hidden;
  
  transition: height .25s ease .1s;
}
// hover 이벤트
.nav_dropdown:hover .thema {
  overflow: visible;
  height: 40px;
}

Heightも徐々に0->40 pxに変わり、ドロップダウンが現れた.2つの結果を合わせると、スライドのような効果が得られます.

2

アニメーション効果をスクロール

メニューが常に上部に固定されていると、内容が隠れてしまい、気に入らない.
したがって,Javascriptを用いてスクロール時にメニューが消える機能を実現した.
△この部分は他の人のブログのコードをコピーしています.
住所はhttps://webdir.tistory.com/481ここです.

2.HEADER-UI検索

(左から順に#search cat,#saerch,#search submit)
検索UIはFlexを使用して実装されています.

#searchbar {
  display: flex;
  ...
}
#search_cat {
  flex-grow: 3;
  ...
}
#search {
  flex-grow: 8;
  ...
}
#search_submit {
  flex-grow: 1;
  ...
}

flex-growを使用して適切な割合を決定すると、コンテンツの内部を自動的に埋め込むことができるので、非常に便利です.
また,左側のカテゴリ選択UIはタイトルのメニューとは異なり,Javascriptを用いて簡単に実現した.

// 클릭 이벤트
$(".select_cat").click(function() {
  $(".select_list").slideToggle();
});

// 드롭다운 이벤트
$(".select_list li").click(function() {
  var select_category = $(this).text();
  $(".select_cat").text(select_category+" V");
  $(".select_list").slideToggle();
});

クリックイベントに限り、SlideToggleでメニューを開き、折りたたみます.また、値をロードして選択ボックスの値に置き換えるドロップダウンイベントも追加されました.
(それを意識してショックを受けました…こんな簡単なこと、私は…)

3.CONTINNER—コンテンツ構成

トピック/カテゴリページの内容は、前述したようにグリッド形式で実現されます.
グリッドはグリッドほど大きくはありませんが、画面サイズに応じて行や列を柔軟に変更したいのでFlexを採用しました.

// 각 카테고리 버튼의 전체 리스트
.theme_list {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

flex-wrapのプロパティをwrapに設定すると、コンテナのサイズに応じて行を柔軟に配置できます.
align-contentはspace-androundとして,各行間の距離を開いた.

2つ目の結果は...

作られていますが、足りない点がたくさんあります.
補足すべき点は次のとおりです.

全面改訂と再包装

モバイルおよびブラウザ最適化

自動検出(Jquey AutoComplete)

を実現

ページング処理UI実装

独自のスクロールアニメーション

を実現
上記の事項を補足すると、2つの差が出た後の最終結果になる可能性があります.
特にスクロールアニメーションは私のコードではなく、残念です.その部分は書き直すつもりです.
また,サーバ側もあまり遅く,並列に計画することはできない.
(できるかどうかわからないけど、ふふ....)
ではまた頑張ります!