在我的網站上，我想創建一個類似圓形導航條的東西，它應該圍繞著我的用戶頭像。我使用ul和li來創建我需要的各種選項。有沒有一種方法可以從頭像的下半部分開始，將我的所有導航項目都放在頭像周圍？最終的結果應該是這樣的:

這是我的。jsx文件:

const Profile = () => {
 const { currentUser } = useContext(AuthContext);

 return (
   <div className="profile">
     <ul className="navMenu">
       <div className="avatarContainer">
         <img
           src="https://w7.pngwing.com/pngs/81/570/png-transparent-profile-logo-computer-icons-user-user-blue-heroes-logo-thumbnail.png"
           alt=""
           className="avatarPic"
         />
       </div>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
     </ul>
   </div>
 );
};

export default Profile;

我的scss之一:

.profile {
 @include themify($themes) {
   background-color: themed("bgSoft");
   text-align: center;
   height: 100%;

   .avatarContainer {
     width: 100%;
     height: 120px;
     position: relative;
     margin-top: 90px;

     .avatarPic {
       width: 200px;
       height: 200px;
       border-radius: 50%;
       object-fit: cover;
       position: absolute;
       left: 0;
       right: 0;
       margin: auto;
       top: 20px;
     }
   }

   .navMenu {
     list-style-type: none;
   }

   .navItem {
     width: 95px;
     height: 95px;
     border: solid 2px black;
     border-radius: 50%;
     display: flex; /* Add flexbox properties */
     justify-content: center;
     align-items: center;

     transition: transform 0.3s ease; /* Add transition property */

     .navIcon {
       font-size: 3.5rem;
     }

     &:hover {
       transform: scale(1.1); /* Increase the dimension by 10% */

       .navText {
         opacity: 1; /* Show the text */
       }
     }

     .navText {
       position: absolute;
       bottom: -20px; /* Adjust the distance from the icon */
       font-size: 1rem;
       opacity: 0; /* Hide the text initially */
       transition: opacity 0.3s ease; /* Add transition property */
     }
   }
 }
}

現在我所有的導航都在頭像的左邊，我不知道如何移動它們。我還想讓它們在頁面加載時一個接一個地出現，所以我需要為每一個navItem放一個動畫，但我不知道如何做。

我想到了三四種可能的方法:

絕對定位 絕對定位或網格布局和平移定位 復雜的網格布局和用于定位的網格區域 因為我喜歡挑戰，所以我繼續前進，制作了可以微調的工作模型。(我意識到重復& quot電子郵件& quot這個項目只是為了說明，所以我只加了一個數字以示區別。)

絕對定位

ul {
  position: relative;
  width: 200px;
  margin: auto;
  padding: 0;
}

li {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: yellowgreen;
  border-radius: 50%;
}

li:nth-of-type(1) {
  width: 200px;
  height: 200px;
}
li:nth-of-type(2) {
  left: -115px;
  top: 90px;
}
li:nth-of-type(3) {
  left: -60px;
  top: 190px;
}
li:nth-of-type(4) {
  left: 50px;
  top: 225px;
}
li:nth-of-type(5) {
  left: 160px;
  top: 190px;
}
li:nth-of-type(6) {
  left: 220px;
  top: 90px;
}

<ul class="navMenu">
 <li class="avatarContainer">
     Avatar
 </li>
 <li class="navItem">
   <span class="navText">Email 1</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 2</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 3</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 4</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 5</span>
 </li>
</ul>