내비게이션 바 만들기

오늘은 css를 이용하여 상향 및 수평 내비게이션 바를 만드는 방법을 배웠습니다. 곧 만들게 될 신문 사이트나 일반 웹 개발에 도움이 될 것 같아서 배워보기로 했습니다. 여기에서는 하나를 만드는 방법을 설명하지만 개선 사항이 있으면 내 Github page에 문제를 제기하고 싶습니다. 내 웹사이트를 직접 보려면 내 replt으로 이동하세요!

HTML

HTML의 경우 탐색 요소를 만든 본문 요소 내에서 시작했습니다. 탐색 내부에는 5개의 목록 항목이 있는 정렬되지 않은 목록이 있습니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <nav onclick="colorize()" ondblclick="reedem()">
    <ul>
      <li onclick="change()" id="first">Code</li>
      <li>Games</li>
      <li >Watch</li>
      <li >100</li>
      <li >Lensco</li>
    </ul>
  </nav>
  <br>
  <div id="output">

  </div>
  <script src="script.js"></script>

</body>

CSS

탐색 모음을 만드는 기본은 inline-block 및 li 요소 모두에 nav을 추가하는 것입니다. 위쪽으로 만들기 위해 display: flex;을 추가했습니다(탐색 막대를 수평으로 배치하려면 목록 요소에 플렉스 없이 모든 단계를 수행하세요! 수평 li 요소의 간격을 두려면 padding을 사용합니다)을 li 요소에 사용합니다. 위쪽 탐색 모음을 완전히 만들었으므로 경계선과 막대를 그림자와 함께 위로 이동시키는 호버 애니메이션을 추가하여 좀 더 스타일을 지정했습니다. 목록 요소 위로 마우스를 가져가면 16진수 색상으로 변경됩니다.

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D3EFBD;
}

ul {
  border: solid 2px black;
  transition: 0.8s ease;
}

/* THis is just to create some extra detail*/
ul:hover {
  margin-bottom: 50px;
  box-shadow: 12px 8px black;
}

/*This is what mainly makes the nav bar */
nav,
li {
  display: inline-block;
  transition: 0.8 ease;
}

/* With flex we can make the bar go upward, if not it would be horizontal*/
li {
  cursor: pointer;
  display: flex;

자바스크립트

막대를 스타일화하는 데 사용한 또 다른 사항은 탐색 상자를 클릭하면 배경이 빨간색으로 바뀌지만 두 번 클릭하면 색상이 보라색이 된다는 것입니다. onclick 및 ondbclick 속성의 도움으로 함수를 사용하여 이를 유발했습니다.

function colorize() {
  document.body.style.background = "#D9B8C4";
}

function reedem() {
  document.body.style.background = "#FF1654";
}

이 코드는 리플릿에서 작성되었습니다.

이 코드는 인라인 블록을 사용하는 데 도움이 되는 방법일 뿐이지만 다른 사람들도 알 수 있도록 여기에 게시했습니다!

Reference

이 문제에 관하여(내비게이션 바 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lensco825/making-nav-bars-2a70

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다