목록으로

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

조니니

프로필 보기 이 회원 글보기 이 회원의 댓글보기

7년 전 조회 3,426

답변 2

예시 홈페이지 주소

https://colorlib.com/demo?theme=yaseen" target="_blank">https://colorlib.com/demo?theme=yaseen

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

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

bootstrap을 기반으로했구요

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

</p>

<p><nav class="hide"></p>

<p><a href="index.html">Home</a></p>

<p><a href="generic.html">Generic</a></p>

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

<p></nav></p>

<p>

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

</p>

<p>nav {</p>

<p>  margin-right: 70px;</p>

<p>  -webkit-transition: all 0.3s ease 0s;</p>

<p>  -moz-transition: all 0.3s ease 0s;</p>

<p>  -o-transition: all 0.3s ease 0s;</p>

<p>  transition: all 0.3s ease 0s;</p>

<p>  transform-origin: 100% 50%;</p>

<p>}</p>

<p> </p>

<p>@media (max-width: 767px) {</p>

<p>  nav {</p>

<p>    margin-right: 0;</p>

<p>    position: absolute;</p>

<p>    right: 0;</p>

<p>    top: 47px;</p>

<p>    text-align: right;</p>

<p>    padding: 20px 0;</p>

<p>    z-index: 5;</p>

<p>    background: #fff;</p>

<p>  }</p>

<p>}</p>

<p> </p>

<p>nav.hide {</p>

<p>  transform: scale(0);</p>

<p>}</p>

<p> </p>

<p>nav a {</p>

<p>  font-size: 12px;</p>

<p>  font-weight: 500;</p>

<p>  text-transform: uppercase;</p>

<p>  color: #777777;</p>

<p>  margin: 0 25px;</p>

<p>  display: inline-block;</p>

<p>  margin: 0 0px;</p>

<p>  display: inline-block;</p>

<p>  padding: 34px;</p>

<p>}</p>

<p> </p>

<p>nav a:hover {</p>

<p>  color: #fff;</p>

<p>  background: #a387ff;</p>

<p>}</p>

<p> </p>

<p>@media (max-width: 767px) {</p>

<p>  nav a {</p>

<p>    padding: 15px 30px;</p>

<p>  }</p>

<p>  nav a:hover {</p>

<p>    background: transparent;</p>

<p>    color: #a387ff;</p>

<p>  }</p>

<p>}</p>

<p>

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

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

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

#html #bootstrap #드롭다운