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

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

QA

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

답변 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 추가해보고 했는데도 원하는 드롭다운 메뉴가 안나와서요..ㅠ 

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

 

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

이 질문에 댓글 쓰기 :

답변 2

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

 

<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

여기 참조하세요~

음 보시면 지금 태그가 li태그가 아니라 a태그로 나타나는 형식인데 a태그로 추가하면 문제 없이 나타날것 같아요
 

<nav class="hide">
2 <a href="index.html">Home</a>
3 <a href="generic.html">Generic</a>
4

<a href="elements.html">Elements</a>

<a href="경로">추가 메뉴</a>

5 </nav>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 27
© SIRSOFT
현재 페이지 제일 처음으로