[CSS] 메뉴버튼 위로 마우스가 올라가면 옆에 안내바 나타내기

 
html

<nav>
    <ul>
        <li>
            <!-- 인덱스페이지 이동 -->
            <div class="menu-item">
                <a href="index.html">
                    <img src="https://img.icons8.com/?size=100&id=86527&format=png&color=767676" alt="인덱스로 이동">
                </a>
                <div class="hover-menu">
                    <p>홈이동</p>
                </div>
            </div>
        </li>
        <li>
            <!-- 글쓰기버튼 -->
            <div class="menu-item">
                <a href="write.html">
                    <img src="https://img.icons8.com/?size=100&id=59864&format=png&color=767676" alt="글쓰기">
                </a>
                <div class="hover-menu">
                    <p>글쓰기</p>
                </div>
            </div>
        </li>
        <li>
            <!-- 다크모드&라이트모드 전환 -->
            <div class="menu-item" id="modeToggle">
                <a href="#">
                    <img src="https://img.icons8.com/?size=100&id=101342&format=png&color=767676" alt="다크모드 전환">
                </a>
                <div class="hover-menu">
                    <p id="modeText">다크모드</p>
                </div>
            </div>
        </li>
        <!-- 로그인한 경우 로그아웃 -->
        <!-- 
        <li>
            <div class="menu-item">
                <a href="logout.html">
                    <img class="logout" src="https://img.icons8.com/?size=100&id=BvRKVanAagI0&format=png&color=767676" alt="로그아웃">
                </a>
                <div class="hover-menu">
                    <p>로그아웃</p>
                </div>
            </div>
        </li> 
        -->
        <!-- 관리자의 경우 신고내역확인 -->
        <!--
        <li>
            <div class="menu-item">
                <a href="complain.html">
                    <img src="https://img.icons8.com/?size=100&id=8773&format=png&color=767676" alt="관리자 신고 관리">
                </a>
                <div class="hover-menu">
                    <p>신고관리</p>
                </div>
            </div>
        </li> -->
    </ul>
</nav>

 
 
css

nav {
    width: 5%;
    height: 90%;
    background-color: white;
    float: left;
    /* border: 1px solid black; */
}

nav ul{
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
nav li{
    width: 200px;
    text-align: center;
    margin-top: 20px; /* 이미지들 간의 간격 조절 */
}

nav li div {
    border: 2px solid #BFBFBF;
    border-radius: 50%;
    width: 3.5vw; /* div의 너비 */
    height: 3.5vw; /* div의 높이 */
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    margin-left: 35%; 
    margin-top: 5%; 
}

nav li img {
    width: 2.3vw; /* 화면 너비의 2.3%에 해당하는 크기 */
    height: 2.3vw; /* 화면 너비의 2.3%에 해당하는 크기 */
    display: block;
    margin: 0;
}

nav li div:hover{
	background-color: #EEEEEE;
	border: 2px solid #EEEEEE;
}

/* nav 설명박스 */
.menu-item {
    position: relative;
}

.hover-menu {
    display: none;
    position: absolute;
    top: 7px;
    left: 90%;
    color:white;
    background-color: #767676;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    justify-content: center; /* 가로 가운데 정렬 */
    align-items: center; /* 세로 가운데 정렬 */
/*     width: 80px;
    height:20px; */
    width: 4vw; /* 화면 너비의 20%로 설정 */
    height: auto; /* 내용에 맞게 높이를 자동 설정 */
    font-size: 2.5vw;
    white-space: nowrap; /* 줄바꿈하지 않음 */
    overflow: hidden; /* 박스를 넘는 글자를 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 말줄임표(...) 처리 */
}

.menu-item:hover .hover-menu {
    display: block;
}

.hover-menu p {
    margin: 0;
    font-size: 16px;
    cursor: pointer;
}

body.dark-mode .hover-menu{
	background-color: white;
	color: #333333;
}

 
 
라이트모드

 
 
다크모드

 
 

---

설명

float: left;

• float: left는 nav가 왼쪽에 고정되게 하는 역할을 합니다.

 

nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

• display: flex;는 ul 요소를 플렉스 컨테이너로 만들어, 그 안의 항목(li)들이 플렉스 아이템으로 작동하도록 설정합니다.
• flex-direction: column;은 플렉스 아이템을 세로 방향으로 배치합니다. 즉, 리스트 항목들이 세로로 나열됩니다.
• justify-content: center;는 세로 방향에서 항목들을 부모 요소(ul)의 중앙에 배치합니다.
• align-items: center;는 가로 방향에서 항목들을 중앙에 배치합니다.

 
 

nav li div {
    border: 2px solid #BFBFBF;
    border-radius: 50%;
    width: 3.5vw;
    height: 3.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 35%; 
    margin-top: 5%; 
}

 

• li 안에 있는 div 요소는 각 아이콘을 감싸는 원형 모양의 컨테이너입니다.
• border-radius: 50%는 원형으로 만들기 위한 속성입니다.
• display: flex를 사용하여 아이콘이 가운데에 정렬되도록 설정합니다.
• width: 3.5vw;   height: 3.5vw; 를 사용하여 전체화면 대비 3.5% 의 크기로 div의 크기를 설정합니다

 

nav li div:hover {
	background-color: #EEEEEE;
	border: 2px solid #EEEEEE;
}

 

• 사용자가 마우스를 아이콘이 포함된 div 위에 올렸을 때(hover), 배경색과 테두리 색이 회색(#EEEEEE)으로 변경됩니다. 이로 인해 마우스를 올렸을 때 시각적으로 변화가 생깁니다.
• border 2px을 준 이유는 hover 전의 div에 2px이 있어서 border가 없을 경우 원의 사이즈가 달라지면서 위치가 살짝 변경되는것을 막기위해서 입니다

 

.hover-menu {
    display: none;
    position: absolute;
    top: 7px;
    left: 90%;
    color: white;
    background-color: #767676;
    padding: 10px;
    border-radius: 5px;
    font-size: 2.5vw;
    white-space: nowrap;
}

 

• hover-menu는 처음에는 display: none으로 설정되어 있어 보이지 않습니다.
• position: absolute로 설정되어 있어 menu-item 내부에서의 위치가 지정됩니다. top: 7px과 left: 90%로 설정되어 있어 아이콘 오른쪽에 설명 박스가 나타납니다.
• 설명 박스의 배경색은 어두운 회색(#767676)이고, 텍스트는 흰색입니다.
• white-space: nowrap 속성으로 인해 텍스트가 줄바꿈되지 않고 한 줄로 표시됩니다.
•  font-size: 2.5vw; 를 사용하여 글자크기가 전체 화면의 2.5% 크기가 되도록 설정합니다

 

.menu-item:hover .hover-menu {
    display: block;
}

 

• 사용자가 menu-item에 마우스를 올리면(hover), 그 안에 있는 hover-menu가 display: block으로 바뀌면서 화면에 표시됩니다.

 

<li>
    <div class="menu-item">
        <a href="index.html">
            <img src="..." alt="인덱스로 이동">
        </a>
        <div class="hover-menu">
            <p>홈이동</p>
        </div>
    </div>
</li>

 

• 각 li 요소 안에 menu-item이라는 div가 있고, 그 안에 이미지(img)와 설명 박스(hover-menu)가 포함되어 있습니다.
• 사용자가 아이콘을 감싸는 div 위에 마우스를 올리면 설명 박스(hover-menu)가 나타납니다.

 

전체 작동 과정

1. 사용자가 nav의 아이콘 위에 마우스를 올리면 해당 아이콘의 부모 요소인 menu-item에 hover 상태가 적용됩니다.
2. hover 상태가 발생하면 .menu-item:hover .hover-menu 규칙에 따라 해당 menu-item의 자식 요소인 hover-menu가 display: block으로 바뀌어 화면에 나타납니다.
3. 설명 박스는 아이콘 오른쪽(left: 90%)에 나타나며, 설명 박스 안의 텍스트는 사라지지 않고 한 줄로 유지됩니다(white-space: nowrap).