반응형 드롭다운 메뉴를 구현하는 CSS 코드

不言
풀어 주다: 2018-07-24 10:36:12
원래의
1813명이 탐색했습니다.

이 글에서 공유한 내용은 반응형 드롭다운 메뉴를 구현하는 CSS 코드에 관한 것입니다. 이 내용은 훌륭한 참고 자료이며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

1. 소개

반응형 드롭다운 메뉴는 다양한 효과로 여러 모바일 단말기에 표시될 수 있습니다.

2. 코드는 다음과 같습니다

nbsp;html>

    
        <meta>
        <meta>
        <title>响应式下拉菜单</title>
        <link>
        <link>
        <link>
    
    
        <p>
            </p><p>
                <img  alt="반응형 드롭다운 메뉴를 구현하는 CSS 코드" >
                <i></i>
            </p>    
            <p></p>
            
로그인 후 복사
                    
  • First
  •                 
  • Second
  •                 
  • Third
  •                 
  • Fourth
  •                 
  • Fifth
  •             
                 <script> var btn=document.getElementById("btn"); var menu=document.getElementById("menu"); btn.onclick=function(){ //alert(1); if(menu.style.display=="none"){ menu.style.display="block"; }else{ menu.style.display="none"; } } window.onresize=function(){ var vw=document.documentElement.clienWidth; if(vw>640){ menu.style.display="block"; } } </script>     

body{

margin:0;
로그인 후 복사

}
.nav {#🎜 🎜#

width:100%;
background-color:#00316b;
position:relative;
로그인 후 복사
}

ul{

padding:0px;
margin:0px;
width:80%;
margin:0 auto;
background:#00316b;
로그인 후 복사
}

ul>li{

list-style:none;
float:left;
로그인 후 복사
}

ul> ;li>a{

color:#fff;
text-decoration:none;
display:block;
padding:20px 30px;
로그인 후 복사
}

ul>li:hover{

background-color:red;
로그인 후 복사
}

.clearfix:after{

display:block;
content:"";
height:0px;
visibility:hidden;
clear:both;
로그인 후 복사
# 🎜🎜# }.clearfix{

zoom:1;
로그인 후 복사

}.toggle{

text-align:right;
color:#fff;
padding:20px;
font-size:20px;
background:black;
/* background-color:#001r44; */
display:none;
overflow:hidden;
로그인 후 복사

}.tu{

float:left;
로그인 후 복사
#🎜🎜 #}
.bb{
position:absolute;
background-image:url(shitu2.png);
background-repeat:no-repeat;
background-size:100px;
width:100px;
height:40px;
left:20px;
top:10px;
로그인 후 복사

}

----------
body{
    margin:0;
}
.nav{
    width:100%;
    background-color:#00316b;

}
ul{
    padding:0px;
    margin:0px;
    width:100%;
    margin:0 auto;
    background:#00316b;
}
ul>li{
    text-align:center;
    list-style:none;
    /* float:left; */
}
ul>li>a{
    color:#fff;
    text-decoration:none;
    display:block;
    padding:20px 30px;
}
ul>li:hover{
    background-color:red;
}
.clearfix:after{
    display:block;
    content:"";
    height:0px;
    visibility:hidden;
    clear:both;
}
.clearfix{
    zoom:1;
}
.toggle{
    text-align:right;
    color:#fff;
    padding:20px;
    background:yellow;
    font-size:20px;
    overflow:hidden;
    display:block;
}

.tu{
    float:left;
    width:100px;
}
로그인 후 복사
셋째, 렌더링은 다음과 같습니다


반응형 드롭다운 메뉴를 구현하는 CSS 코드뷰포트가 1024px 이상일 때 표시되는 내용입니다min- width: 1024px


반응형 드롭다운 메뉴를 구현하는 CSS 코드뷰포트가 1024px보다 작을 때 표시되는 내용입니다 max-width:1024px

휴대폰 및 iPad에서의 렌더링입니다



관련 추천 :# 🎜🎜#반응형 드롭다운 메뉴를 구현하는 CSS 코드

CSS와 js로 반응형 탐색 메뉴 구현 방법

css 스크롤 막대 맞춤 설정 방법(코드)#🎜🎜 #

위 내용은 반응형 드롭다운 메뉴를 구현하는 CSS 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!