집 > 기사 > 웹 프론트엔드 > JavaScript+css로 멋진 탐색 모음을 구현하는 방법은 무엇입니까?

JavaScript+css로 멋진 탐색 모음을 구현하는 방법은 무엇입니까?

黄舟원래의: 2017-07-25 09:27:065131검색

멋진 네비게이션 바를 작성하는 방법을 차근차근 가르쳐주세요. JS+CSS는 검정색 클래식 네비게이션 바를 구현합니다. 관심 있는 친구는 이를 참조할 수 있습니다. 자세한 내용은 기사 마지막 부분에서 설명하겠습니다. 구체적인 내용은 다음과 같습니다

첫 번째는 매우 간단한 HTML 코드입니다. ul+li는 메뉴를 구현합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏一</title>
</head>
<body>
  <header class="header">
    <p class="nva">
      <ul class="list">
        <li><a href="Android.html">Android</a></li>
        <li><a href="C++.html">C++</a></li>
        <li><a href="IOS.html">IOS</a></li>
        <li><a href="Java.html">Java</a></li>
        <li><a href="Ruby.html">Ruby</a></li>
      </ul>
    </p>
  </header>
<h1>首页</h1>
</body>
</html>

기본 효과:

다음으로 CSS 속성을 설정합니다. 여기서 라벨 a는 라인입니다. level 요소이므로 표시를 사용하여 블록 수준 요소로 변환해야 합니다. 이는 매우 일반적으로 사용되며

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

의 일반적인 사용법이 있습니다. 달성된 효과:

마지막으로 JS는 동적으로 위치 지정 효과를 추가합니다. js에서는 이를 고려하면 페이지 이동 시 링크가 생기고 링크의 접미사에 따라 속성이 일치하게 됩니다. 그런 다음 원하는 효과를 얻기 위해 스타일을 변경해야 합니다. to는 URL을 얻는 방법과 URL에서 href 정보를 찾는 방법입니다. Article

1을 기준으로 HTMLa 태그의 내용을 수정한 다음 CSS를 통해 애니메이션 효과를 설정합니다

$(function(){
  //当前链接以/分割后最后一个元素索引
  var index = window.location.href.split("/").length-1;
  //最后一个元素前四个字母,防止后面带参数
  var href = window.location.href.split("/")[index].substr(0,4);
 
  if(href.length>0){
    //如果匹配开头成功则更改样式
    $(".list li a[href^=&#39;"+href+"&#39;]").addClass("on");
    //[attribute^=value]：匹配给定的属性是以某些值开始的元素。
  }else {
    //默认主页高亮
    $(".list li a[href^=&#39;index&#39;]").addClass("on");
  }
});

CSS를 사용하여 애니메이션 효과를 얻으려면 먼저 b 및 i 태그를 블록 수준 요소로 설정하여 수직으로 배포할 수 있도록 한 다음 a에 대한 전환을 설정합니다. 소위 애니메이션은 안으로 밀어 넣은 후 위로 이동하는 것입니다. 그런 다음 쉽게 관찰할 수 있도록 a에 테두리를 추가하세요. 아래 그림을 참조하세요

마지막으로 효과를 얻으려면 포장하면 됩니다. 메뉴의 p에 오버플로 숨겨진 속성을 설정하기만 하면 됩니다

<ul class="list">
        <li><a href="index01.html">
        <b>首页</b>
        <i>Index</i>
        </a></li>
        <li><a href="Android.html">
          <b>Android</b>
          <i>安卓</i>
        </a></li>
        <li><a href="C++.html">
          <b>C++</b>
          <i>谁加加</i>
        </a></li>
        <li><a href="IOS.html">
          <b>IOS</b>
          <i>苹果</i>
        </a></li>
        <li><a href="Java.html">
          <b>Java</b>
          <i>爪哇</i>
        </a></li>
        <li><a href="Ruby.html">
          <b>Ruby</b>
          <i>如八一</i>
        </a></li>
      </ul>

JQ로도 구현 가능하며 코드는 다음과 같습니다

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
              .list b,.list i{ display: block; }
.list li a:hover{ margin-top: -40px; background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

3. 유연한 하위 메뉴 구현

먼저 하위 메뉴는 모두 태그인 p로 래핑됩니다.

$(function () {
  $(".list a").hover(function () {
    //stop是当执行其他动画的时候停止当前的
    $(this).stop().animate({
      "margin-top": -40
    }, 300);
  }, function () {
    $(this).stop().animate({
      "margin-top": 0
    }, 300);
  });
});

다음으로 스타일을 설정합니다. 하위 메뉴이므로 문서 페이지와 분리되어야 하므로 이 속성을 사용할 경우 상위 컨테이너는 상대적이어야 합니다.

<li><a href="Android.html">
  <b>Android</b>
</a>
  <p class="down">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
    <a href="#">子菜单4</a>
  </p>
</li>

다음 효과:

다음으로 JQ 및 easing 플러그인을 사용하여 애니메이션을 제어합니다.
find 메소드는 일반적으로 조작 요소의 하위 요소를 찾는 데 사용됩니다.

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
.list b{ display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/ }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
h1{ margin: 20px auto; text-align: center; }

효과 사진 녹화에는 그다지 좋지 않습니다. 사실 모두 탄력적으로 애니메이션됩니다.

위 내용은 JavaScript+css로 멋진 탐색 모음을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript를 사용하여 탐색 모음 샘플 코드 공유를 구현하는 방법다음 기사：JavaScript를 사용하여 탐색 모음 샘플 코드 공유를 구현하는 방법