이런 메뉴 소스는 어디서 구하나요? 채택완료
아래 사이트처럼 메뉴처럼 대메뉴 마우스 롤오버시 서브메뉴들이 전체적으로 아래로 펼쳐지는
답변 6개
심심해서 따라 만들어봤습니다.
</p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <style type="text/css"></p><p> * { font-family: "Segoe UI"; }</p><p> body { background-color: #333; }</p><p> nav { width: 80%; padding: 0 0 1.0em 0; margin: auto; }</p><p>
</p><p> nav ul {</p><p> background-color: transparent;</p><p> width: 100%;</p><p> display: table;</p><p> padding: 0;</p><p> margin: 0;</p><p> }</p><p> nav li { list-style-type: none; }</p><p> nav a { display: block; text-align: center; text-decoration: none; }</p><p>
</p><p> nav > ul > li {</p><p> display: table-cell;</p><p> background-image: linear-gradient(to right, #ddd, #ddd);</p><p> background-repeat: no-repeat;</p><p> background-size: 1px 100%;</p><p> background-position: right 4.3em;</p><p> }</p><p> nav > ul > li:last-child {</p><p> background: none;</p><p> }</p><p> nav > ul > li > a { padding: 1.5em; color: #fff; font-weight: bold; }</p><p> nav > ul > li > ul { opacity: 0; margin-top: -10.0em; }</p><p> nav > ul > li > ul > li > a { padding: 0.7em; color: #000; font-weight: normal; }</p><p>
</p><p> /* ------------------------ transition definition ------------------------ */</p><p> nav, nav * { transition-duration: 0.2s; transition-timing-function: linear; }</p><p> nav { transition-property: background; }</p><p> nav > ul > li > a { transition-property: color; }</p><p> nav > ul > li > a span { transition-property: background-size; }</p><p> nav > ul > li > ul { transition-property: opacity, margin-top; }</p><p> /* ------------------------ transition definition ------------------------ */</p><p>
</p><p> nav > ul > li > a span {</p><p> background-image: linear-gradient(to right, gray, gray);</p><p> background-repeat: no-repeat;</p><p> background-size: 0% 0.15em;</p><p> background-position: center bottom;</p><p> padding-bottom: 1.0em;</p><p> }</p><p> nav > ul > li:hover > a span {</p><p> background-size: 100% 0.15em;</p><p> }</p><p> nav:hover { background-color: #fff; }</p><p> nav:hover > ul > li > a { color: #000; }</p><p> nav:hover > ul > li > ul { opacity: 1.0; margin-top: 0; }</p><p> </style></p><p> </head></p><p> <body></p><p> <nav></p><p> <ul></p><p> <li><a href="#A"><span>A</span></a></p><p> <ul></p><p> <li><a href="#A-1">A-1</a></li></p><p> <li><a href="#A-2">A-2</a></li></p><p> </ul></p><p> </li></p><p> <li><a href="#BBB"><span>BBB</span></a></p><p> <ul></p><p> <li><a href="#BBB-1">B-1</a></li></p><p> </ul></p><p> </li></p><p> <li><a href="#CC"><span>CC</span></a></p><p> <ul></p><p> <li><a href="#CC-1">C-1</a></li></p><p> <li><a href="#CC-2">C-2</a></li></p><p> <li><a href="#CC-3">C-3</a></li></p><p> </ul></p><p> </li></p><p> </ul></p><p> </nav></p><p> </body></p><p></html></p><p><span style="font-size: 11pt;">답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
http://www.yncc.co.kr/ko/index.do" style="color: rgb(0, 0, 0); font-family: sans-serif; font-size: 13px;">http://www.yncc.co.kr/ko/index.do 를 분석해서 필요한 요소를 추출하면 됩니다.
그것이 어렵다면 제작의뢰 https://sir.kr/main/request/">https://sir.kr/main/request/ 를 이용하세요
댓글을 작성하려면 로그인이 필요합니다.
만두야닷컴백프로 똑같은걸 찾으시는건 어려워요.. 더군다나 소스 수정이 직접 어려우시면 더 그렇죠..
웹쪽에 조금만 지식 있으시면 직접 제작이나 다른분이 제작하신걸 수정 하시는걸로 똑같이 만들 수 있을 듯 하네요.
댓글을 작성하려면 로그인이 필요합니다.
bootstrap으로 반응형으로 만드는 경우 https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp">https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
샘플페이지에 네비게이션 메뉴가 나옵니다. 드롭다운메뉴는 약간 변경하면 될것 같습니다.
샘플페이지 코드 긁어왔어요.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
https://fonts.googleapis.com/css?family=Montserrat">https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
https://fonts.googleapis.com/css?family=Lato">https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Company
We specialize in blablabla
About Company Page
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Our Values
MISSION: Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
VISION: Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SERVICES
What we offer
Portfolio
What we have created
Paris
Yes, we built Paris
New York
We built New York
San Francisco
Yes, San Fran is ours
What our customers say
Pricing
Choose a payment plan that works for you
CONTACT
Contact us and we'll get back to you within 24 hours.
Chicago, US
+00 1515151515
myemail@something.com
Bootstrap Theme Made By https://www.w3schools.com">https://www.w3schools.com" title="Visit w3schools">
" target="_blank" rel="noopener noreferrer">http://www.w3schools.com">www.w3schools.com
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
다른 솔류션에 쓸건데 가능한가요?
와싸네 메뉴 솔류션에 쓰는 메뉴가 괜찮아보이기한데..확인하니 그누전용이네요.ㅡㅡ; 타 솔류션에 사용해야는데.;; 상관없이 사용가능한 소스 있을가요? 그 밑에것 소스도 괜찮긴한데 각 서브메뉴마다 분류하는 세로선들이 없네요;;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
