today i learned 8/24 jQuery를 이용한 슬라이드 메뉴 만들기

8/24에는 .. 하루종일 동아리원들과 학교에서 같이 개발을 했다.. 너무 힘들었다 집에와서 바로 뻗었다 ㅋㅋ 

 

 

JS를 이용해서 슬라이드되는 메뉴

오늘 이거 하나 만드는데도 하루종일 걸렸다. JS의 문제였다기보단 CSS의 문제였는데, 어찌저찌 잘 해결됐다.

jQuery를 이용했고 ..

 

HTML

                <nav class="animated flipInX">
                    <ul>
                      <li class="sub-menu"><a href="#"><img src='images/admin.png' height=39px><i class="fa fa-angle-down"></i></a>
                        <ul style="line-height: 40%;">
                          <li> <a href="#"> 내 코스 </a> </li>
                          <li> <a href="#"> 즐겨찾는 코스 </a> </li>
                          <li> <a href="#"> 댓글 관리 </a> </li><br>
                          <li> <a href="#"> 계정 관리 </a> </li>
                          <li> <a href="#"> 도움말 </a> </li><br>
                          <li> <a href="login.html"> 로그인 </a> </li>
                        <!-- <li> <a href='#'> 로그아웃 </a> </li>
                        이건 로그인 된 상황에 넣어주세요-->
                        </ul>
                      </li>
                    </ul>
                  </nav>

같이 개발하는 백엔드 동아리원에게 넘길 때 사용한 주석이다.

 

CSS

nav {
    text-align: center;
    display: flex;
    justify-content: space-around;
    margin-left: 200px;
}

nav ul {
    text-align: center;
    background: none;
    list-style: none;
    margin: 0px 40px;
    padding: 0;
  }
  
nav ul li {
    position: relative;
    display: inline-block;
    margin-right: -4px;
    text-align: center;
}
  
nav ul li:first-child a {
    background: none;
    padding: 15px 100%;
}
nav ul li:first-child a img {
    color: white;
    margin-left: 20px;
}
nav ul li:last-child {
    margin: 0; 
}
  
nav ul li a {
    display: block;
    background: none;
    padding: 15px 20px;
    color: black;
    font-size: 14px;
    text-decoration: none;
    transition: 0.2s linear;
  }
  
  
  nav ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 120px;
  }
  
  nav ul li ul li {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  
  nav ul li ul li a {
    display: block;
    background: white;
    opacity: 0.5;
    padding: 10px 15px;
  }
  
  nav ul li ul li a:first-child {
    background: #f0f5fa;
    width: auto;
    border-left: 4px solid transparent;
    padding: 10px 15px;
    font-size: 14px;
  }

CSS 코드가 상당히 난잡하다. 일단 하드코딩으로 원하는 위치에 갖다 박았는데 추후에 수정해나가야 한다 ㅠㅠ

 

JS

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
  $(this).parent(".sub-menu").children("ul").slideToggle("200");
  $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

 

 이와 같은 코드를 사용했다.

 슬라이드를 사용할 일이 또 생길 경우 해당 코드를 수정해서 사용하려고 한다. 그래도 만들고 나니 뿌듯했다.