select 드롭다운 메뉴 위로 펼치기 (feat. HTML & CSS)

select 드롭다운 메뉴를 사용하는 경우 드롭다운은 보통 아래로 펼쳐지고, 드롭다운 메뉴가 하단 근처에 있을 경우에 아래 공간이 충분하지 않으면 위로 펼쳐지게 됩니다.

select 드롭다운 메뉴: 하단에 위치한 경우에 위로 펼쳐진다.

이 동작은 보통 브라우저에 의해 처리되기 때문에 CSS나 JavaScript를 사용하여 메뉴가 항상 위쪽으로만 펼쳐지도록 하는 것은 쉽지 않을 수 있습니다.

드롭다운 메뉴가 항상 위로 펼쳐지도록 하고 싶은 경우 몇 가지 방법을 생각해 볼 수 있는데, 여기에서는 커스텀 HTML/CSS를 사용하여 항상 위로 펼쳐지도록 하는 방법에 대하여 살펴보겠습니다.

select 드롭다운 메뉴 위로 펼치기

다음과 같은 select 드라웁도 메뉴를 사용하여 select 드롭다운 메뉴를 만들 수 있습니다.

<form>
<select onchange = "copyrtChgUrl(this.value)">
<option value="0">검색엔진 사이트 </option>
<option value="https://www.google.co.kr/">구글</option>
<option value="https://www.naver.com/">네이버</option>
<option value="https://www.bing.com/">빙</option>
<option value="https://www.daum.net/">다음</option>
</select>
</form>

드롭다운 메뉴가 펼쳐지는 방향은 브라우저에 의해 자동으로 제어됩니다. 아래에 공간이 충분한 경우 보통 아래 방향으로 펼쳐지지만, 아래에 공간이 별로 없는 경우에는 위로 표시됩니다.

select 박스를 사용하지 않고 대신 HTML/CSS를 사용하여 구현하고 싶은 경우 다음과 같은 HTML 코드와 CSS 코드를 사용할 수 있습니다.

HTML 코드:

<div class="dropdown">
    <button>검색엔진 사이트</button>
    <div class="dropdown-content">
        <a href="https://www.google.co.kr/">구글</a>
        <a href="https://www.naver.com/">네이버</a>
        <a href="https://www.bing.com/">빙</a>
        <a href="https://www.daum.net/">다음</a>
    </div>
</div>

CSS 코드:

.dropdown {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif; /* Using Arial for demonstration, but any font can be used */
}

.dropdown button {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    outline: none;
    transition: background-color 0.2s;
}

.dropdown button:hover {
    background-color: #f5f5f5;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;  /* Position it just below the button */
    width: 100%; /* Make it as wide as the button */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: auto; /* In case there are many links */
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: black;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.dropdown-content a:last-child {
    border-bottom: none; /* Remove the bottom border for the last link */
}

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

/* Show the dropdown when hovering over the .dropdown container */
.dropdown:hover .dropdown-content {
    display: block;
}


.dropdown button::after {
    content: '';                     /* Clear content */
    border-left: 5px solid transparent;   /* Left arrow slant */
    border-right: 5px solid transparent;  /* Right arrow slant */
    border-top: 5px solid #000;          /* Top border color and size */
    display: inline-block;           /* Allow it to sit next to the text */
    margin-left: 10px;   /* Space between the text and the arrow */
    margin-top: -5px;
    vertical-align: middle;          /* Vertically align the arrow */
}

.dropdown button {
    padding-right: 24px;  
}

그러면 다음과 같이 메뉴가 아래로 펼쳐지는 드롭다운을 구현할 수 있습니다.

항상 위로 펼쳐지는 드롭다운 메뉴 레이아웃을 구현하려면 다음과 같은 CSS 코드를 사용할 수 있습니다.

.dropdown {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

.dropdown button {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    outline: none;
    transition: background-color 0.2s;
}

.dropdown button:hover {
    background-color: #f5f5f5;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: auto;
    bottom: 100%;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: auto;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    color: black;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

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

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

.dropdown button::after {
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
    display: inline-block;
    margin-left: 10px;
    margin-top: -5px;
    vertical-align: middle;
}

.dropdown button {
    padding-right: 24px;
}

HTML 코드는 동일합니다. 위와 같은 CSS 코드를 적용하면 다음과 같이 항상 위로 펼쳐지는 드롭다운 메뉴를 표시할 수 있습니다.

워드프레스 네이버 카페에 이와 관련된 질문이 올라와서 정리해 보았습니다. HTML과 CSS는 적절히 응용하여 적용할 수 있습니다.

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 비교 (Cloudways vs. Bluehost)