그누보드 QA - 홈페이지 예제에서 드롭다운메뉴 추가방법

홈페이지 예제에서 드롭다운메뉴 추가방법

조니니 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.05.24 11:29:59 2919 (219.♡.♡.170)

답변 2

본문

예시 홈페이지 주소

https://colorlib.com/demo?theme=yaseen

이게 모바일로 사이즈를 줄일때 특이한 모형으로 나와서..

지금 바꾸고있는데.. 초보인 저한테 너무 어려워서요ㅠ

bootstrap을 기반으로했구요

------------------------html-----------------------


<nav class="hide">
<a href="index.html">Home</a>
<a href="generic.html">Generic</a>
<a href="elements.html">Elements</a>
</nav>

----------------------------css-----------------------------------


nav {
  margin-right: 70px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  transform-origin: 100% 50%;
}
 
@media (max-width: 767px) {
  nav {
    margin-right: 0;
    position: absolute;
    right: 0;
    top: 47px;
    text-align: right;
    padding: 20px 0;
    z-index: 5;
    background: #fff;
  }
}
 
nav.hide {
  transform: scale(0);
}
 
nav a {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: #777777;
  margin: 0 25px;
  display: inline-block;
  margin: 0 0px;
  display: inline-block;
  padding: 34px;
}
 
nav a:hover {
  color: #fff;
  background: #a387ff;
}
 
@media (max-width: 767px) {
  nav a {
    padding: 15px 30px;
  }
  nav a:hover {
    background: transparent;
    color: #a387ff;
  }
}

입니다. 제가 nav li 추가해보고 했는데도 원하는 드롭다운 메뉴가 안나와서요..ㅠ

이렇게 기존에 만들어져있는데 추가가 가능할까요?

이게 모바일로 볼때는 메뉴가 오른쪽 사이드에 나와서요... 더 복잡해질까요?

#html #bootstrap #드롭다운

답변 2

ilruo 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-05-24 14:00:04 182.♡.♡.178

아 기능 변경을 말씀하시는거였네요

<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>

부트스트랩이라면 이런신으로 사용하시면 될듯합니다.

http://www.w3im.com/ko/bootstrap/bootstrap_ref_js_dropdown.html

여기 참조하세요~