본문 바로가기
쉬운홈페이지만들기

상단메뉴영역 레이아웃 변경하기

디자인닌 2024. 4. 5. 14:26

다양한 상단메뉴영역 활용

 

상단메뉴영역에 기본값 이외에도 다양한 형태로 변형하여 사용 가능 합니다.

아래 레이아웃 변경 소스 1번 ~ 5번 중에서 적용하고자 하는 소스를 복사하셔서,

" nStyle_user.css " 파일을 열어서 하단에 소스를 추가 하시면 다양한 형태로 사용 가능 합니다.

 

 

■ 수정 파일

> nStyle_user.css

 

 

■ 수정 파일 위치

> www > bizdemoXXXXXX > img > _css > nStyle_user.css

 

 

 

 

 

 

 

 

 

 

 

01. 상단영역 레이아웃 변경 : 상단영역 배경 투명

/*****************************************************************
01. 상단영역 레이아웃 변경 : 상단영역 배경 투명
*****************************************************************/
#header {
    height: auto !important;
}
#header .gnb {
    background-color: transparent;
    border-bottom: 0px solid #fff;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.0);
}
#header .gnb.on {
    background-color: #fff;
}
#header .gnb:after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 40px;
    background-color: transparent;
    border-bottom: 1px solid transparent;
}


/* 991까지 사이즈에서 적용 */
@media screen and (max-width: 991px) {
    #header {
        height: auto !important;
    }
    #header .gnb {
        background-color: transparent;/**/
    }
    #header .gnb.on {
        top: 0px;
    }
    #header .gnb:after {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 40px;
/*
        background-color: transparent;
        border-bottom: 1px solid #eee;
*/
    }
}


/* 992이상 사이즈에서 적용 */
@media screen and (min-width: 992px) {
    
    /* 메인메뉴 & 컬러 & 사이즈 */
    .navbar-inverse .navbar-nav > li > a {
        font-weight: 700;
        font-size: 1.0em;
        color: #fff;
    }
    .navbar-inverse .navbar-nav > li:hover > a,
    .navbar-inverse .navbar-nav > li:focus > a {
        color: #095b68;
    }

    /* 서브메뉴 & 컬러 & 사이즈 */
    .dropdown-menu {
        border-top: 1px solid #095b68;
    }
    .dropdown-menu > li > a {
        font-weight: 400;
        font-size: 1.0em;
        color: #333;
    }
    .dropdown-menu > li:hover > a,
    .dropdown-menu > li:focus > a {
        background-color: #eee;
        color: #095b68;
    }
    
    /* 스크롤 : 메인메뉴 & 컬러 & 사이즈 */
    #header .gnb.on .navbar-inverse .navbar-nav > li > a {
        color: #111;
    }
    #header .gnb.on .navbar-inverse .navbar-nav > li:hover > a,
    #header .gnb.on .navbar-inverse .navbar-nav > li:focus > a {
        color: #f04a00;
    }
    
    /* 스크롤 : 서브메뉴 & 컬러 & 사이즈 */
    #header .gnb.on .dropdown-menu {
        border-top: 1px solid #f04a00;
    }

    #header .gnb.on .dropdown-menu > li > a {
        font-size: 1.0em;
        color: #333;
    }

    #header .gnb.on .dropdown-menu > li:hover > a,
    #header .gnb.on .dropdown-menu > li:focus > a {
        color: #f04a00;
    }
}


/* 서브페이지 > 상단배경이미지 */
.nt_imgArea {
    height: 400px;
}

/* 설명텍스트 */
.nt_imgArea .con h3 {
    display: none;/* none, block */
}
.nt_imgArea .con p {
    display: none;/* none, block */
}

/* de01 */
.de01 .swiper {
    height: 100vh;/* 높이값 조절 */
}

@media screen and (max-width: 991px) {
    .nt_imgArea {
        height: 200px;
    }
}

 

 

 

 

 

 

 

 

 

02. 상단영역 레이아웃 변경 : 상단높이값 고정

/*****************************************************************
02. 상단영역 레이아웃 변경 : 상단높이값 고정
*****************************************************************/
#header {
    height: 100px !important;
}
#header .gnb.on {
    top: 0px !important;
}
#header .gnb:after {
    border-bottom: 0px;
}
#header .gnb .menuArea {
    margin: 10px auto;
}

.topArea {
    display: none;
}

/* 991까지 사이즈에서 적용 */
@media screen and (max-width: 991px) {
    #header {
        height: 60px !important;
    }
    #header .gnb .menuArea {
        margin: 0px auto;
    }
}

 

 

 

 

 

 

 

 

 

03. 상단영역 레이아웃 변경 : 상단높이값 고정 + 상단영역 배경 투명

/*****************************************************************
03. 상단영역 레이아웃 변경 : 상단높이값 고정 + 상단영역 배경 투명
*****************************************************************/
#header {
    height: auto !important;
}
#header .gnb {
    background-color: transparent;
    border-bottom: 0px solid #fff;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.0);
}
#header .gnb.on {
    background-color: #fff;
    top: 0px !important;
}
#header .gnb:after {
    border-bottom: 0px;
    background-color: transparent;
    border-bottom: 1px solid transparent;
}
#header .gnb .menuArea {
    margin: 10px auto;
}

.topArea {
    display: none;
}


/* 991까지 사이즈에서 적용 */
@media screen and (max-width: 991px) {
    #header {
        height: auto !important;/* 60px,auto */
    }
    #header .gnb {
        background-color: transparent;
    }
    #header .gnb .menuArea {
        margin: 0px auto;
    }
}


/* 992이상 사이즈에서 적용 */
@media screen and (min-width: 992px) {
    
    /* 메인메뉴 & 컬러 & 사이즈 */
    .navbar-inverse .navbar-nav > li > a {
        font-weight: 700;
        font-size: 1.0em;
        color: #fff;
    }
    .navbar-inverse .navbar-nav > li:hover > a,
    .navbar-inverse .navbar-nav > li:focus > a {
        color: #f04a00;
    }

    /* 서브메뉴 & 컬러 & 사이즈 */
    .dropdown-menu {
        border-top: 1px solid #f04a00;
    }
    .dropdown-menu > li > a {
        font-weight: 400;
        font-size: 1.0em;
        color: #333;
    }
    .dropdown-menu > li:hover > a,
    .dropdown-menu > li:focus > a {
        background-color: #eee;
        color: #f04a00;
    }
    
    /* 스크롤 : 메인메뉴 & 컬러 & 사이즈 */
    #header .gnb.on .navbar-inverse .navbar-nav > li > a {
        color: #000;
    }
    #header .gnb.on .navbar-inverse .navbar-nav > li:hover > a,
    #header .gnb.on .navbar-inverse .navbar-nav > li:focus > a {
        color: #095b68;
    }
    
    /* 스크롤 : 서브메뉴 & 컬러 & 사이즈 */
    #header .gnb.on .dropdown-menu {
        border-top: 1px solid #095b68;
    }

    #header .gnb.on .dropdown-menu > li > a {
        font-size: 1.0em;
        color: #333;
    }

    #header .gnb.on .dropdown-menu > li:hover > a,
    #header .gnb.on .dropdown-menu > li:focus > a {
        color: #095b68;
    }
}


/* 서브페이지 > 상단배경이미지 */
.nt_imgArea {
    height: 300px;
}

/* 설명텍스트 */
.nt_imgArea .con p {
    display: block;/* 사용값 : none, block */
}

/* de01 */
.de01 .swiper {
    height: 100vh;/* 높이값 조절 */
}

 

 

 

 

 

 

 

 

 

04. 상단영역 레이아웃 변경 : 로고/메뉴 상하 정렬

/*****************************************************************
04. 상단영역 레이아웃 변경 : 로고/메뉴 상하 중앙 정렬
*****************************************************************/
/* 992이상 사이즈에서 적용 */
@media screen and (min-width: 992px) {
    #header {
        height: 200px !important;
    }
    #header .gnb {
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 16;
        background-color: #fff;
        border-bottom: 0px solid #fff;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    }
    #header .gnb.on {
        background-color: #fff;
        border-bottom: 0px solid #ddd;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    }
    #header .gnb:after {
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 100%;
        height: 40px;
        z-index: -1;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.0);
    }
    #header .gnb:before {
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 100%;
        height: 120px;
        z-index: -1;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.0);
    }
    
    .menuArea .navbar .navbar-header {
        float: left;
        width: 100%;
        text-align: center;
    }
    .menuArea .navbar .navbar-collapse {
        float: left;
        width: 100%;
        border: 0px solid #f00;
    }
    
    .menuArea .navbar .navbar-header .n_logo {
        justify-content: center;
    }
}

 

 

 

 

 

 

 

 

 

05. 상단영역 레이아웃 변경 : 로고/메뉴 상하 정렬 + 상단영역 배경 투명

/*****************************************************************
05. 상단영역 레이아웃 변경 : 로고/메뉴 상하 중앙 정렬 + 상단영역 배경 투명
*****************************************************************/
@media screen and (min-width: 992px) {
    #header {
        height: auto !important;
    }
    #header .gnb {
        -webkit-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 16;
        background-color: transparent;
        border-bottom: 0px solid #fff;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    }
    #header .gnb.on {
        background-color: rgba(0, 0, 0, 0.9);
        border-bottom: 0px solid #ddd;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    }
    #header .gnb:after {
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 100%;
        height: 40px;
        z-index: -1;
        background-color: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.0);
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.0);
    }
    #header .gnb:before {
        position: absolute;
        content: '';
        top: 0px;
        left: 0px;
        width: 100%;
        height: 120px;
        z-index: -1;
        background-color: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.0);
    }
    
    .menuArea .navbar .navbar-header {
        float: left;
        width: 100%;
        text-align: center;
    }
    .menuArea .navbar .navbar-collapse {
        float: left;
        width: 100%;
        border: 0px solid #f00;
    }
    
    .menuArea .navbar .navbar-header .n_logo {
        justify-content: center;
    }
}


/* 992이상 사이즈에서 적용 */
@media screen and (min-width: 992px) {
    
    /* 메인메뉴 & 컬러 & 사이즈 */
    .navbar-inverse .navbar-nav > li > a {
        font-weight: 700;
        font-size: 1.0em;
        color: #000;
    }
    .navbar-inverse .navbar-nav > li:hover > a,
    .navbar-inverse .navbar-nav > li:focus > a {
        color: #f04a00;
    }

    /* 서브메뉴 & 컬러 & 사이즈 */
    .dropdown-menu {
        border-top: 1px solid #f04a00;
    }
    .dropdown-menu > li > a {
        font-weight: 400;
        font-size: 1.0em;
        color: #333;
    }
    .dropdown-menu > li:hover > a,
    .dropdown-menu > li:focus > a {
        background-color: #eee;
        color: #f04a00;
    }
    
    /* 스크롤 : 메인메뉴 & 컬러 & 사이즈 */
    #header .gnb.on .navbar-inverse .navbar-nav > li > a {
        color: #fff;
    }
    #header .gnb.on .navbar-inverse .navbar-nav > li:hover > a,
    #header .gnb.on .navbar-inverse .navbar-nav > li:focus > a {
        color: #095b68;
    }
    
    /* 스크롤 : 서브메뉴 & 컬러 & 사이즈 */
    #header .gnb.on .dropdown-menu {
        border-top: 1px solid #095b68;
    }

    #header .gnb.on .dropdown-menu > li > a {
        font-size: 1.0em;
        color: #333;
    }

    #header .gnb.on .dropdown-menu > li:hover > a,
    #header .gnb.on .dropdown-menu > li:focus > a {
        color: #095b68;
    }
}



/* 서브페이지 > 상단배경이미지 */
.nt_imgArea {
    height: 400px;
}

/* 설명텍스트 */
.nt_imgArea .con p {
    display: none;/* 사용값 : none, block */
}

/* de01 */
.de01 .swiper {
    height: 100vh;/* 높이값 조절 */
}

 

 

 

 

위 활용 소스 파일은 화이트/블랙으로 배열 되었지만.

기업의 아이덴티티에 맞는 컬러 배열로 변경 가능합니다.

 

 

 

 

 

 

'쉬운홈페이지만들기' 카테고리의 다른 글

페이지메뉴 레이아웃 변경하기  (0) 2024.04.05
하단영역 레이아웃 변경하기  (0) 2024.04.05
도메인 뒤에 default 사용, 보안인증서 https  (0) 2024.04.03
sns로 홈페이지주소 전송시 보여지는 이미지  (0) 2024.04.03
네이버 웹마스터 도구에 홈페이지 등록하기  (2) 2024.04.03

'쉬운홈페이지만들기' Related Articles

티스토리툴바