CSS3 및 Js를 사용하여 반응형 탐색 모음을 만드는 방법-CSS 튜토리얼-php.cn

CSS3 및 Js를 사용하여 반응형 탐색 모음을 만드는 방법

PHP中文网

풀어 주다： 2018-10-30 10:08:54

앞으로

2857명이 탐색했습니다.

오늘은 다양한 화면 해상도나 브라우저 창 크기에 따라 탐색 모음의 스타일을 자동으로 변경할 수 있는 반응형 탐색 모음을 만들었습니다. 여기서 주로 사용되는 것은 CSS3 미디어 쿼리입니다. 자세한 내용은 반응형 레이아웃에 대한 간략한 설명 기사를 참조하세요. 여기서는 이 탐색 표시줄을 만드는 방법을 주로 설명하겠습니다.

또 언급할 점은 ie6-ie8은 CSS3 미디어 쿼리를 지원하지 않으므로 ie6-ie8에 대한 특별한 처리가 필요하며 레이아웃과 스타일 모두에 중요한 기본 스타일을 유지하도록 해야 합니다. 고려.

우선 레이아웃을 보면 html 코드는 다음과 같습니다.

코드는 다음과 같습니다.

<p class="navBar">
    <p class="nav">
        <ul id="menu">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">电视剧</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">综艺</a></li>
            <li><a href="#">纪录片</a></li>
            <li><a href="#">公开课</a></li>
        </ul>
        <p class="hot">
            <a href="#">钢铁侠3</a>
            <a href="#">中国合伙人</a>
            <a href="#">盛夏晚晴天</a>
            <a href="#">陆贞传奇</a>
        </p>
        <!--判断浏览器是否是IE9,IE10或者是非IE浏览器-->
        <!--[if (gt IE 8) | !(IE)]><!-->
        <h1 class="title" id="title">
            <a href="#">风驰网</a>
            <span class="btn" id="btn"></span>
        </h1>
        <!--<![endif]-->
    </p>
</p>

로그인 후 복사

html 부분에도 조건문이 있습니다. comment, 브라우징 시 서버가 ie6-8인 경우 html 태그에 "ie6-8" 클래스를 마운트하면 스타일 시트에서 처리가 용이해집니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<!--[if lt IE 9]><html class="ie6-8"><![endif]-->
<html>
...

로그인 후 복사

다음은 스타일 제어입니다. 먼저 전체 스타일을 처리하고 ie6-ie8을 처리합니다.

코드는 다음과 같습니다.

* {margin: 0; padding: 0;}
body {font: 14px/22px "宋体", arial, serif;}
.navBar {margin-top: 80px; width: 100%; height: 38px; background: #333;}
.nav {margin: 0 auto; border: 0px solid #ccc;}
.nav ul {list-style: none; width: auto;}
.nav ul li {height: 38px; text-align: center;}
.nav ul li a {display: block; font-size: 16px; color: #fff; text-decoration: none; line-height: 39px;}
.ie6-8 .nav {width: 1000px; height: 38px;}
.ie6-8 .nav ul li {float: left;}
.ie6-8 .nav ul li a {padding: 0 30px 0 30px;}
.ie6-8 .nav ul li.current {background: #f60;}
.ie6-8 .nav ul li:hover a {color: #f60;}
.ie6-8 .nav ul li a:hover {_color: #f60;}/*IE6 Hack*/
.ie6-8 .nav ul li.current:hover a {color: #fff;}
.ie6-8 .nav .hot {float: left; margin-left: 20px; padding-top: 8px;}
.ie6-8 .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
.ie6-8 .nav .hot a:hover {color: #f60; text-decoration: underline;}
.ie6-8 .nav .title {display: none;}

로그인 후 복사

자, 아래에서는 Media Query를 사용하겠습니다.

화면 너비가 1000px보다 큰 경우:

코드는 다음과 같습니다.

@media screen and (min-width: 1000px) {
    .nav {width: 1000px; height: 38px;}
    .nav ul li {float: left; width: auto;}
    .nav ul li a {padding: 0 30px 0 30px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}
    .nav .hot {margin-left: 20px; padding-top: 8px;}
    .nav .hot a {padding: 0 5px 0 5px; font-size: 12px; color: #fff; text-decoration: none;}
    .nav .hot a:hover {color: #f60; text-decoration: underline;}
    .nav .title {display: none;}
}

로그인 후 복사

화면 너비가 640px에서 1000px 사이인 경우:

코드는 다음과 같습니다.

@media screen and (min-width: 640px) and (max-width: 1000px) {
    .nav {width: auto; height: 38px;}
    .nav ul li {float: left; width: 14%; min-width: 50px;}
    .nav ul li.current {background: #f60;}
    .nav ul li:hover a {color: #f60;}
    .nav ul li.current:hover a {color: #fff;}
    .nav .hot {display:none;}
    .nav .title {display: none;}
}

로그인 후 복사

화면 너비가 640px 미만인 경우:

코드는 다음과 같습니다.

@media screen and (max-width: 640px) {
    .navBar {margin-top: 0; height: auto; background: #444;}
    .nav {width: auto; height: auto;}
    .nav ul li {margin-top: 1px; width: 100%; min-width: 100px;background: #333;}
    .nav ul li a:active {background: #f60;}
    .nav .hot {display:none;}
    .nav .title {position: relative; width: 100%; height: 38px; border-top: 1px solid #444; background: #333; text-align: center; font:normal 20px/35px "Microsoft YaHei", arial, serif; letter-spacing: 2px;}
    .nav .title a {color: #f60; text-decoration: none;}
    .nav .title .btn {position: absolute; right: 10px; top: 0; width: 34px; height: 34px; padding: 2px; background: url(btn.png) center center no-repeat; cursor: pointer;}
}

로그인 후 복사

ok, the 레이아웃 및 스타일 제어가 완료되었으며, 3가지 상태의 효과는 다음과 같습니다.

CSS3 및 Js를 사용하여 반응형 탐색 모음을 만드는 방법

그런데 세 번째 사진에는 오른쪽 하단 아이콘을 클릭하면 메뉴가 접힐 수 있는 효과도 주고 싶은데 어떻게 해야 할까요? 메뉴가 축소된 상태에서는 그림 메뉴를 클릭하여 확장하고, 메뉴가 확장된 상태에서는 아이콘 메뉴를 클릭하여 축소하며 애니메이션 효과도 필요합니다. 자, js를 살펴보겠습니다. 하지만 js에 대해 자세히 설명하지는 않겠습니다. 핵심 코드를 게시해 보겠습니다.

코드의 이 부분은 애니메이션 효과를 생성하는 데 사용됩니다.

코드는 다음과 같습니다.

var move = function (obj, target) {
    var timer;
    clearInterval(timer);
    timer = setInterval(function () {
        var speed = (target - obj.offsetTop)/3;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (Math.abs(obj.offsetTop - target) < 4) {
            clearInterval(timer);
            obj.style.marginTop = target + "px";
        } else {
            obj.style.marginTop = obj.offsetTop + speed + "px";
        }
    }, 30);
}

로그인 후 복사

이 반응형 탐색 모음은 기본적으로 다음과 같습니다.

【관련 추천 튜토리얼】

1. CSS 동영상 튜토리얼
2. CSS 온라인 매뉴얼
3. 부트스트랩 튜토리얼