[기능] 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
자동등록방지 숫자입력

웹개발

번호 제목 글쓴이 날짜 조회수
22 [리눅스] Apache Document Root 권한설정 최고관리자 09-04 1,896
21 [리눅스] CentOS Version 확인하기 최고관리자 09-04 1,713
20 [리눅스] MySQL 최초 접속 및 설정 최고관리자 09-03 2,000
19 [리눅스] MySQL 5.7 보안설정 최고관리자 09-03 1,785
18 [리눅스] RDate로 시간 동기화 하기. 최고관리자 09-03 1,701
17 [리눅스] 기본설치 (Apache , PHP , MySql) 최고관리자 09-03 2,261
16 [공부] 프로그래밍 공부 사이트 최고관리자 09-01 1,631
15 [기능] Mobile 메뉴 최고관리자 09-01 1,595
14 [기능] Mega Menu 최고관리자 09-01 1,638
13 [기능] 상단에서 메뉴높이가 높고 아래로 스크롤하면 메뉴높이가 줄어듦 최고관리자 09-01 1,648
12 [기능] 상단에 메뉴가 보이다가 아래로 스크롤하면 메뉴가 사라지고 상단으로 가면 메뉴가 보임. 최고관리자 09-01 1,580
11 [기능] 메뉴가 안 보이다가 아래로 스크롤하면 메뉴가 생김 최고관리자 09-01 1,683
10 [기능] Icon으로 구성된 수직/수평 메뉴 최고관리자 09-01 1,509
9 [JS] 자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당) 최고관리자 09-01 1,522
8 [기능] 상단의 높이가 큰 메뉴상태에서 아래로 스크롤하면 상단에 높이가 낮은 메뉴가 고정됨 최고관리자 09-01 1,530
7 [Font] Naversoftware 폰트 리스트 최고관리자 09-01 1,596
6 [Web Font] 직접입력해서 폰트를 확인할 수 있는 사이트 최고관리자 09-01 1,584
5 [CSS - font] unicode-range 최고관리자 08-31 1,814
4 [UI 참고] Oven - 회원가입 최고관리자 08-31 1,550
3 타자기체 - 가로 세로 비율이 고정되어 있는 글꼴로 표현 최고관리자 08-08 1,685