예시 홈페이지 주소
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개 / 댓글 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
여기 참조하세요~
답변에 대한 댓글 1개
음 보시면 지금 태그가 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> |
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.