search

반응형 드롭다운 메뉴 소스 - ban-eunghyeong deulobdaun menyu soseu

1 년도s ~ 전에
코멘트: 0
견해: 198

간단한 드롭 다운 메뉴

  인터넷에 샘플을 찾아보니 95%의 샘플 소스가 다 반응형이어서, 반응형이 아닌 것을 구현한다면 아래 소스 참고하면 된다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.dropbtn {

  background-color: #04AA6D;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

}

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f1f1f1;

  min-width: 160px;

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

  z-index: 1;

}

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

</style>

</head>

<body>

<h2>Hoverable Dropdown</h2>

<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">

<button class="dropbtn">Dropdown</button>

<div class="dropdown-content">

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

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

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

</div>

</div>

</body>

</html>

cs

See the Pen Untitled by bfh3000 (@bfh3000) on CodePen.

'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글

[HTML, CSS, JavaScript] 웹 폰트 설정 (오프라인 O, 서버에 설치)  (0)2021.10.20
[HTML, CSS, JavaScript] JSON 가공, 파싱 (+Java)  (0)2021.09.13
[HTML, CSS, JavaScript] input type="text" 숫자만 입력하게  (0)2021.08.23
[HTML, CSS, JavaScript] Arrow function - 화살표 함수 ( => )  (0)2021.08.05
[JavaScript] checkbox 전체 체크하기  (0)2021.06.29
[CSS] Tool Tip 툴팁 Sample  (0)2021.05.11
[JavaScript - (35) ] backslash(\, 빽슬래쉬) escape 처리  (0)2021.02.22

반응형 메뉴바 자바스크립트 드롭다운 리스트 자바스크립트 드롭다운 메뉴 드롭다운 메뉴 만들기

관련 게시물

갤럭시 노트10 메뉴 버튼 - gaelleogsi noteu10 menyu beoteun
갤럭시 노트10 메뉴 버튼 - gaelleogsi noteu10 menyu beoteun

오토캐드 메뉴바 설정 - otokaedeu menyuba seoljeong
오토캐드 메뉴바 설정 - otokaedeu menyuba seoljeong

HTML 탭 만들기 - HTML taeb mandeulgi
HTML 탭 만들기 - HTML taeb mandeulgi

반응 형 웹 메뉴 예제 - ban-eung hyeong web menyu yeje
반응 형 웹 메뉴 예제 - ban-eung hyeong web menyu yeje

광고하는

최근 소식

디젤 엔진오일 감소 - dijel enjin-oil gamso
1 년도s ~ 전에 . ~에 의해 AssociateCanonization
마비노기 밀 인형 - mabinogi mil inhyeong
1 년도s ~ 전에 . ~에 의해 NeedyInterpretation
을 보니 grammar - eul boni grammar
1 년도s ~ 전에 . ~에 의해 DauntingFastball
젤다 드래곤 안나옴 - jelda deulaegon annaom
1 년도s ~ 전에 . ~에 의해 HillyBones
전자담배 간접흡연 디시 - jeonjadambae ganjeobheub-yeon disi
1 년도s ~ 전에 . ~에 의해 CoolingGenesis
파이썬 입력값이 정수가 아니면 에러 출력하고 다시 입력받기 - paisseon iblyeoggabs-i jeongsuga animyeon eleo chullyeoghago dasi iblyeogbadgi
1 년도s ~ 전에 . ~에 의해 IdioticQuorum
독수리 오형제 결말 - dogsuli ohyeongje gyeolmal
1 년도s ~ 전에 . ~에 의해 CorrectWardrobe
타이어 공기압 보는 법 - taieo gong-giab boneun beob
1 년도s ~ 전에 . ~에 의해 UnknownEndangerment
정화조 20 인용 - jeonghwajo 20 in-yong
1 년도s ~ 전에 . ~에 의해 AmazingLaurels
교육청 태블릿 초기화 - gyoyugcheong taebeullis chogihwa
1 년도s ~ 전에 . ~에 의해 MockCombustion

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의

homeendejahikoptzhth
저작권 © 2024 ko.ketajaman Inc.