[기능] Mega Menu

https://www.w3schools.com/howto/howto_css_mega_menu.asp 



<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

* {

  box-sizing: border-box;

}


body {

  margin: 0;

}


.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}


.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}


.dropdown {

  float: left;

  overflow: hidden;

}


.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font: inherit;

  margin: 0;

}


.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}


.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  width: 100%;

  left: 0;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}


.dropdown-content .header {

  background: red;

  padding: 16px;

  color: white;

}


.dropdown:hover .dropdown-content {

  display: block;

}


/* Create three equal columns that floats next to each other */

.column {

  float: left;

  width: 33.33%;

  padding: 10px;

  background-color: #ccc;

  height: 250px;

}


.column a {

  float: none;

  color: black;

  padding: 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}


.column a:hover {

  background-color: #ddd;

}


/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

    height: auto;

  }

}

</style>

</head>

<body>


<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Dropdown 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <div class="header">

        <h2>Mega Menu</h2>

      </div>   

      <div class="row">

        <div class="column">

          <h3>Category 1</h3>

          <a href="#">Link 1</a>

          <a href="#">Link 2</a>

          <a href="#">Link 3</a>

        </div>

        <div class="column">

          <h3>Category 2</h3>

          <a href="#">Link 1</a>

          <a href="#">Link 2</a>

          <a href="#">Link 3</a>

        </div>

        <div class="column">

          <h3>Category 3</h3>

          <a href="#">Link 1</a>

          <a href="#">Link 2</a>

          <a href="#">Link 3</a>

        </div>

      </div>

    </div>

  </div> 

</div>


<div style="padding:16px">

  <h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>

  <p>Hover over the "Dropdown" link to see the mega menu.</p>

  <p>Resize the browser window to see the responsive effect.</p>

</div>


</body>

</html>


0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

웹개발

번호 제목 글쓴이 날짜 조회수
42 [MySQL] user Table 권한설명 최고관리자 10-13 2,055
41 [NginX] Codeigniter를 위한 server config 최고관리자 09-09 2,765
40 [Nginx] 역할 최고관리자 09-09 2,718
39 [MySQL] Replace를 이용하여 데이타 내용 치환하기 최고관리자 09-08 1,723
38 [리눅스] Mysql Database 이름을 www.telepasi.com처럼 하면 안됨 최고관리자 09-08 1,679
37 [리눅스] CentOS vsftpd 설치 최고관리자 09-08 1,746
36 [리눅스] 사용자 목록 확인 (Linux User List) 최고관리자 09-08 13,876
35 [NginX] 리버스 프록시(Reverse Proxy)란 최고관리자 09-08 5,120
34 [리눅스] go lang - REST API를 위한 Gin 설치 최고관리자 09-07 1,767
33 [리눅스] go 환경설정 최고관리자 09-07 1,756
32 [리눅스] CentOS7 에서 go Lang 설치하기 최고관리자 09-07 1,721
31 [리눅스] Mysql 원격접속 허용하기 최고관리자 09-07 1,804
30 [서버설치] How to Install PHP 7, NGINX, MySQL on CentOS/RHEL 7.6 최고관리자 09-06 1,787
29 [서버 설치] mysql_secure_installation 최고관리자 09-06 1,724
28 [서버 설치] CentOS7 방화벽 설치 최고관리자 09-06 1,653
27 [DNS] abc.com www.abc.com 레코드 설정 최고관리자 09-05 1,685
26 [리눅스] httpd conf 위치 확인 및 conf 문법검사 명령 최고관리자 09-05 2,404
25 [리눅스] Apache 권한에 대한 참고 사항 최고관리자 09-04 4,400
24 [리눅스] CentOS Apache 주요 디렉토리 최고관리자 09-04 1,853
23 [리눅스] CentOS 6 vs CentOS 7 명령어 대응 최고관리자 09-04 1,923