그누보드 QA - 이런 메뉴 소스는 어디서 구하나요?

이런 메뉴 소스는 어디서 구하나요?

웹지기맨 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

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

2017.08.25 22:39:16 조회 1907 (116.♡.♡.112)

본문

아래 사이트처럼 메뉴처럼 대메뉴 마우스 롤오버시 서브메뉴들이 전체적으로 아래로 펼쳐지는

상단의 네비게이션(메뉴) 소스가 있는 곳이나 아시나요?

아니면 소장하고 계신분 있으신가요?

메뉴 구현이 참 어렵네요.ㅡㅡ;

http://www.yncc.co.kr/ko/index.do

#메뉴소스

답변 6

배르만 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-08-26 01:36:41 119.♡.♡.88

심심해서 따라 만들어봤습니다.


<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        * { font-family: "Segoe UI"; }
        body { background-color: #333; }
        nav { width: 80%; padding: 0 0 1.0em 0; margin: auto; }

        nav ul {
            background-color: transparent;
            width: 100%;
            display: table;
            padding: 0;
            margin: 0;
        }
        nav li { list-style-type: none; }
        nav a { display: block; text-align: center; text-decoration: none; }

        nav > ul > li {
            display: table-cell;
            background-image: linear-gradient(to right, #ddd, #ddd);
            background-repeat: no-repeat;
            background-size: 1px 100%;
            background-position: right 4.3em;
        }
        nav > ul > li:last-child {
            background: none;
        }
        nav > ul > li > a { padding: 1.5em; color: #fff; font-weight: bold; }
        nav > ul > li > ul { opacity: 0; margin-top: -10.0em; }
        nav > ul > li > ul > li > a { padding: 0.7em; color: #000; font-weight: normal; }

        /* ------------------------ transition definition ------------------------ */
        nav, nav * { transition-duration: 0.2s; transition-timing-function: linear; }
        nav { transition-property: background; }
        nav > ul > li > a { transition-property: color; }
        nav > ul > li > a span { transition-property: background-size; }
        nav > ul > li > ul { transition-property: opacity, margin-top; }
        /* ------------------------ transition definition ------------------------ */

        nav > ul > li > a span {
            background-image: linear-gradient(to right, gray, gray);
            background-repeat: no-repeat;
            background-size: 0% 0.15em;
            background-position: center bottom;
            padding-bottom: 1.0em;
        }
        nav > ul > li:hover > a span {
            background-size: 100% 0.15em;
        }
        nav:hover { background-color: #fff; }
        nav:hover > ul > li > a { color: #000; }
        nav:hover > ul > li > ul { opacity: 1.0; margin-top: 0; }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#A"><span>A</span></a>
                    <ul>
                        <li><a href="#A-1">A-1</a></li>
                        <li><a href="#A-2">A-2</a></li>
                    </ul>
                </li>
                <li><a href="#BBB"><span>BBB</span></a>
                    <ul>
                        <li><a href="#BBB-1">B-1</a></li>
                    </ul>
                </li>
                <li><a href="#CC"><span>CC</span></a>
                    <ul>
                        <li><a href="#CC-1">C-1</a></li>
                        <li><a href="#CC-2">C-2</a></li>
                        <li><a href="#CC-3">C-3</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>

↳ 웹지기맨 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017-08-26 08:02:58116.♡.♡.112

감사합니다. 님 소스로 한번 응용해봐야겠네요^^

작은별 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-08-25 22:41:58 180.♡.♡.199

https://sir.kr/g5_skin/14115

https://sir.kr/g5_skin/8455

↳ 웹지기맨 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017-08-25 22:43:24116.♡.♡.112

그누보드 솔류션에 쓸게 아니라서..
다른 솔류션에 쓸건데 가능한가요?

와싸네 메뉴 솔류션에 쓰는 메뉴가 괜찮아보이기한데..확인하니 그누전용이네요.ㅡㅡ; 타 솔류션에 사용해야는데.;; 상관없이 사용가능한 소스 있을가요? 그 밑에것 소스도 괜찮긴한데 각 서브메뉴마다 분류하는 세로선들이 없네요;;

↳ 작은별 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2017-08-25 23:57:22180.♡.♡.199

그누보드에 연동된 코드만 걷어내면 다른 곳에도 사용할 수는 있습니다.

돼지코구뇽 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-08-26 00:19:24 110.♡.♡.205

모든 소스는 훔칠수 있습니다.

김철용 홈페이지 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2017-08-26 00:40:00 118.♡.♡.190

bootstrap으로 반응형으로 만드는 경우 https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

샘플페이지에 네비게이션 메뉴가 나옵니다. 드롭다운메뉴는 약간 변경하면 될것 같습니다.

샘플페이지 코드 긁어왔어요.

<!DOCTYPE html>

<head>

<title>Bootstrap Theme Company Page</title>

<style>

body {

font: 400 15px Lato, sans-serif;

line-height: 1.8;

color: #818181;

}

h2 {

font-size: 24px;

text-transform: uppercase;

color: #303030;

font-weight: 600;

margin-bottom: 30px;

}

h4 {

font-size: 19px;

line-height: 1.375em;

color: #303030;

font-weight: 400;

margin-bottom: 30px;

}

.jumbotron {

background-color: #f4511e;

color: #fff;

padding: 100px 25px;

font-family: Montserrat, sans-serif;

}

.container-fluid {

padding: 60px 50px;

}

.bg-grey {

background-color: #f6f6f6;

}

.logo-small {

color: #f4511e;

font-size: 50px;

}

.logo {

color: #f4511e;

font-size: 200px;

}

.thumbnail {

padding: 0 0 15px 0;

border: none;

border-radius: 0;

}

.thumbnail img {

width: 100%;

height: 100%;

margin-bottom: 10px;

}

.carousel-control.right, .carousel-control.left {

background-image: none;

color: #f4511e;

}

.carousel-indicators li {

border-color: #f4511e;

}

.carousel-indicators li.active {

background-color: #f4511e;

}

.item h4 {

font-size: 19px;

line-height: 1.375em;

font-weight: 400;

font-style: italic;

margin: 70px 0;

}

.item span {

font-style: normal;

}

.panel {

border: 1px solid #f4511e;

border-radius:0 !important;

transition: box-shadow 0.5s;

}

.panel:hover {

box-shadow: 5px 0px 40px rgba(0,0,0, .2);

}

.panel-footer .btn:hover {

border: 1px solid #f4511e;

background-color: #fff !important;

color: #f4511e;

}

.panel-heading {

color: #fff !important;

background-color: #f4511e !important;

padding: 25px;

border-bottom: 1px solid transparent;

border-top-left-radius: 0px;

border-top-right-radius: 0px;

border-bottom-left-radius: 0px;

border-bottom-right-radius: 0px;

}

.panel-footer {

background-color: white !important;

}

.panel-footer h3 {

font-size: 32px;

}

.panel-footer h4 {

color: #aaa;

font-size: 14px;

}

.panel-footer .btn {

margin: 15px 0;

background-color: #f4511e;

color: #fff;

}

.navbar {

margin-bottom: 0;

background-color: #f4511e;

z-index: 9999;

border: 0;

font-size: 12px !important;

line-height: 1.42857143 !important;

letter-spacing: 4px;

border-radius: 0;

font-family: Montserrat, sans-serif;

}

.navbar li a, .navbar .navbar-brand {

color: #fff !important;

}

.navbar-nav li a:hover, .navbar-nav li.active a {

color: #f4511e !important;

background-color: #fff !important;

}

.navbar-default .navbar-toggle {

border-color: transparent;

color: #fff !important;

}

footer .glyphicon {

font-size: 20px;

margin-bottom: 20px;

color: #f4511e;

}

.slideanim {visibility:hidden;}

.slide {

animation-name: slide;

-webkit-animation-name: slide;

animation-duration: 1s;

-webkit-animation-duration: 1s;

visibility: visible;

}

@keyframes slide {

0% {

opacity: 0;

transform: translateY(70%);

}

100% {

opacity: 1;

transform: translateY(0%);

}

@-webkit-keyframes slide {

0% {

opacity: 0;

-webkit-transform: translateY(70%);

}

100% {

opacity: 1;

-webkit-transform: translateY(0%);

}

@media screen and (max-width: 768px) {

.col-sm-4 {

text-align: center;

margin: 25px 0;

}

.btn-lg {

width: 100%;

margin-bottom: 35px;

}

@media screen and (max-width: 480px) {

.logo {

font-size: 150px;

}

</style>

</head>

</button>

</div>

<li><a href="#about">ABOUT</a></li>

<li><a href="#services">SERVICES</a></li>

<li><a href="#portfolio">PORTFOLIO</a></li>

<li><a href="#pricing">PRICING</a></li>

<li><a href="#contact">CONTACT</a></li>

</ul>

</div>

</nav>

<h1>Company</h1>

<p>We specialize in blablabla</p>

<form>

<button type="button" class="btn btn-danger">Subscribe</button>

</div>

</form>

</div>

<h2>About Company Page</h2><br>

<h4>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.</h4><br>

<p>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.</p>

<br><button class="btn btn-default btn-lg">Get in Touch</button>

</div>

</div>

</div>

<h2>Our Values</h2><br>

<h4><strong>MISSION:</strong> 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.</h4><br>

<p><strong>VISION:</strong> 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.</p>

</div>

<h2>SERVICES</h2>

<h4>What we offer</h4>

<br>

<h4>POWER</h4>