탑 버튼을 누르는 이유는 결국 카테고리 또는 메뉴를 보기 위함인데, 카테고리 또는 메뉴를 화면 상단에 고정해 둔다면 웹사이트 방문자의 불필요한 동작을 최소화할 수 있다.
본 글은 메뉴를 생성하고 화면 상단에 고정하는 것과 메뉴에 스크롤링 마우스 기능 및 스크롤링 버튼을 적용하는 방법에 대한 내용이다.
1] 메뉴 생성 및 설정
북클럽 뉴북 스킨에서 메뉴 위치는 아래와 같으며 메뉴 코드는 <nav id="gnb"> </nav>다.
1-1] 기존 항목으로 생성
메뉴는 '기본 메뉴', '페이지', '카테고리' 등의 '기본 항목'을 선택해서 생성할 수 있다.
기본적으로 메뉴는 '마우스 오버' 시 '언더바(under bar)'가 나타난다.
'기본 항목'으로 생성한 메뉴는 클릭(선택) 시 '마우스 오버'를 하지 않아도 '언더바'가 나타나며, '기본 항목'으로 생성한 '홈(home)'은 '언더바'가 항상 나타나 있다.
1-2] 직접 입력으로 생성
메뉴는 URL 주소를 '직접 입력'해서 생성할 수도 있으며, '직접 입력'으로 생성할 경우 '새창으로 열기'를 설정할 수 있다.
'직접 입력'으로 생성한 메뉴는 '기본 항목'으로 생성한 메뉴와는 다르게 '마우스 오버' 시에만 '언더바'가 나타난다.
1-3] 추천 생성
'새창으로 열기'가 필요 없다면 '홈(home)'은 '직접 입력'으로, 그 외의 것들은 '기본 항목'으로 생성할 것을 추천한다.
상기와 같이 생성하면 '홈(home)'에 '언더바'가 항상 나타나 있지 않으며, 그 외의 것들은 클릭(선택) 시 '마우스 오버'를 하지 않아도 '언더바'가 나타난다.
1-4] 스크롤링 기능
CSS에 들어가 보면 메뉴는 overflow-x: auto;, overflow-y: hidden; 코드로 스크롤링 기능이 적용되어 있다. 테스트를 위해 여러 개의 메뉴를 생성해 봤다.
마우스 휠 클릭 후 좌우로 움직이거나 마우스를 좌우로 드래그하면 메뉴가 스크롤링 된다.
Mobile에서도 스와이프 하면 스크롤링 된다.
참고로 스크롤이 보이지 않는 이유는 #gnb::-webkit-scrollbar {display:none;} 코드 때문이며, 해당 코드를 삭제하면 스크롤이 나타난다.
2] 스크롤링 마우스 기능
Mobile에서는 스와이프로 스크롤링하기 때문에 괜찮은데, 직접 해보면 알겠지만 PC에서는 마우스로 스크롤링하기 때문에 세밀한 이동이 안 되는 등 이용에 다소 불편함이 있다.
이에 PC 환경에서는 스크롤을 세밀하게 이동시킬 수 있는 별도의 마우스 기능이 필요하다.
2-1] 마우스 이동에 따른 스크롤링
별도의 마우스 클릭이나 드래그 없이 마우스의 이동만으로도 스크롤링을 할 수 있다. 이미지 상으로 분간하기 어려울 수 있으나 마우스를 클릭하지도 않았고 드래그하지도 않았다.
웹사이트 방문자의 불필요한 클릭을 최소화할 수 있는 것이 장점이다.
아래 코드를 HTML의 </header> 아래에 삽입하면 된다.
[ 7 ]
메뉴의 코드 <nav id="gnb">에 따라 #gnb를 삽입한다.
[ 24 ]
40의 숫자 값을 변경해서 스크롤링 길이를 설정할 수 있다.
</header>
<!-- 마우스 이동에 따른 스크롤링 시작 -->
<script>
$(function() {
scroller = $('#gnb');
last=scroller.children().last();
function recalculate() {
W = scroller.innerWidth();
left = scroller.offset().left;
right = left + W;
middle = Math.round(left + W/2);
lastLeft=last.offset().left;
lastW=last.outerWidth();
totalW=lastLeft+lastW;
factor=totalW/W;
lastX=0;
};
$(window).resize(recalculate);
function move(x) {
var delta = x-left;
var toleft = delta/right*totalW-40;
scroller.scrollLeft(toleft);
};
function move2(x) {
var delta = x-middle;
var toleft = scroller.scrollLeft() + (delta>0 ? factor : -factor);
scroller.scrollLeft(toleft);
};
function move3(x) {
var delta = x-lastX;
var toleft = scroller.scrollLeft() + (delta>0 ? (factor) : (-factor));
console.log(x,lastX, delta, toleft);
scroller.scrollLeft(toleft);
lastX=x;
};
function move4(x) {
var delta = lastX-x;
var toleft = scroller.scrollLeft() + delta;
console.log(x,lastX, delta, toleft);
scroller.scrollLeft(toleft);
lastX=x;
};
scroller.bind('touchstart',function(ev) {
ev.preventDefault();
var touch = ev.originalEvent.touches [0] || ev.originalEvent.changedTouches[0] || ev.touches[0];
lastX=touch.pageX;
});
scroller.bind('toaaauchend',function(ev) {
ev.preventDefault();
var touch = ev.originalEvent.touches [0] || ev.originalEvent.changedTouches[0] || ev.touches[0];
move3(touch.pageX);
});
scroller.bind('touchmove',function(ev) {
ev.preventDefault();
var touch = ev.originalEvent.touches [0] || ev.originalEvent.changedTouches[0] || ev.touches[0];
move4(touch.pageX);
});
scroller.bind('mousemove',function(ev) {
ev.preventDefault();
move(ev.pageX);
});
recalculate()
});
</script>
<!-- 마우스 이동에 따른 스크롤링 끝 -->
2-2] 마우스 휠에 따른 스크롤링
마우스의 휠을 위로 올리거나 아래로 내려서 스크롤링할 수 있다.
아래 코드를 HTML의 </header> 아래에 삽입하면 된다.
[ 6 ]
메뉴의 코드 <nav id="gnb">에 따라 #gnb를 삽입한다.
[ 8 ]
50의 숫자 값을 변경해서 스크롤링 길이를 설정할 수 있다.
[ 11, 13 ]
+, -로 스크롤링 방향을 설정할 수 있다.
</header>
<!-- 마우스 휠에 따른 스크롤링 시작 -->
<script>
const mouseWheel = document.querySelector('#gnb');
mouseWheel.addEventListener('wheel', function(e) {
const race = 50; // How many pixels to scroll
if (e.deltaY > 0) // Scroll right
mouseWheel.scrollLeft += race;
else // Scroll left
mouseWheel.scrollLeft -= race;
e.preventDefault();
});
</script>
<!-- 마우스 휠에 따른 스크롤링 끝 -->
2-3] 마우스 스와이프로 스크롤링
마치 Mobile에서와 같이 마우스 좌클릭 후 스와이프로 스크롤링할 수 있다.
아래 코드를 HTML의 </header> 아래에 삽입하면 된다.
[ 5 ]
hammer 자바스크립트를 삽입해야 작동한다.
[ 8 ]
메뉴의 코드 <nav id="gnb">에 따라 #gnb를 삽입한다.
[ 16, 17 ]
20의 숫자 값을 변경해서 스크롤링 길이를, +, -로 스크롤링 방향을 설정할 수 있다.
</header>
<!– 마우스 스와이프로 스크롤링 시작 -->
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script>
var $hammer_bar = document.querySelector("#gnb");
var mc = new Hammer($hammer_bar);
mc.add(new Hammer.Pan( {
direction: Hammer.DIRECTION_HORIZONTAL
}));
mc.on("panleft panright", function(e) {
if (e.type === "panleft") $hammer_bar.scrollLeft += 20;
else $hammer_bar.scrollLeft -= 20;
});
</script>
<!– 마우스 스와이프로 스크롤링 끝 -->
3] 스크롤링 버튼 생성
웹사이트 방문자가 볼 때 메뉴에 버튼이 없으면 스크롤의 존재 자체를 모를 수 있기 때문에 '스크롤링 마우스 기능'과 함께 '스크롤링 버튼'도 생성하는 것을 추천한다.
3-1] 기본 스크롤링 버튼
버튼 클릭 시 메뉴가 스크롤링된다. Mobile에서도 정상 작동한다.
아래는 HTML 코드다.
<button type="button" class="menu"><span>메뉴</span></button>
</div>
<!-- 메뉴 좌우 버튼 생성 시작 -->
<div class="gnb-box">
<button onclick="moveScrollLeft()"><i class="fas fa-arrow-circle-left" style="font-size: 18px"></i></button>
<nav id="gnb">
</nav>
<button onclick="moveScrollRight()"><i class="fas fa-arrow-circle-right" style="font-size: 18px"></i></button>
</div>
<!-- 메뉴 좌우 버튼 생성 끝 -->
<!-- 기본 스크롤링 버튼 시작 -->
<script>
moveScrollLeft = function() {
var _scrollX = $('#gnb').scrollLeft();
$('#gnb').scrollLeft(_scrollX - 300);
};
moveScrollRight = function() {
var _scrollX = $('#gnb').scrollLeft();
$('#gnb').scrollLeft(_scrollX + 300);
};
</script>
<!-- 기본 스크롤링 버튼 끝 -->
</div>
</header>
아래는 CSS 코드다.
/* 추가 */
.gnb-box {
background-color: #fff;
display: flex;
}
@media screen and (max-width:767px) {
.gnb-box {
padding: 0 20px;
}
}
.fa-arrow-circle-left:hover,
.fa-arrow-circle-right:hover {
transition: 0.3s;
transform: scale(1.3);
cursor: pointer;
}
/* 수정 */
#gnb {
height: 66px;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: none;
margin: 0 20px; /* 추가 */
}
3-2] 애니메이션 스크롤링 버튼
버튼 클릭 시 메뉴가 부드럽게 스크롤링된다. Mobile에서도 정상 작동한다.
아래는 HTML 코드이며, CSS 코드는 '3-1'의 CSS 코드와 동일.
<button type="button" class="menu"><span>메뉴</span></button>
</div>
<!-- 메뉴 좌우 버튼 생성 시작 -->
<div class="gnb-box">
<button class="moveScrollLeft"><i class="fas fa-arrow-circle-left" style="font-size: 18px"></i></button>
<nav id="gnb">
</nav>
<button class="moveScrollRight"><i class="fas fa-arrow-circle-right" style="font-size: 18px"></i></button>
</div>
<!-- 메뉴 좌우 버튼 생성 끝 -->
<!-- 부드러운 스크롤링 버튼 시작 -->
<script>
$(document).ready(function() {
$('.moveScrollLeft').click(function () {
$('#gnb').animate( {
scrollLeft: $('#gnb').scrollLeft() - 300
}, 500);
return false;
});
$('.moveScrollRight').click(function () {
$('#gnb').animate( {
scrollLeft: $('#gnb').scrollLeft() + 300
}, 500);
return false;
});
});
</script>
<!-- 부드러운 스크롤링 버튼 끝 -->
</div>
</header>
3-3] 마우스 오버 스크롤링 버튼
버튼에 마우스 오버 시 메뉴가 스크롤링된다. Mobile에서는 작동하지 않는다.
아래는 HTML 코드다. CSS 코드는 '3-1'의 CSS 코드와 동일.
<button type="button" class="menu"><span>메뉴</span></button>
</div>
<!-- 메뉴 좌우 버튼 생성 시작 -->
<div class="gnb-box">
<button class="moveScroll moveScrollLeft"><i class="fas fa-arrow-circle-left" style="font-size: 18px"></i></button>
<nav id="gnb">
</nav>
<button class="moveScroll moveScrollRight"><i class="fas fa-arrow-circle-right" style="font-size: 18px"></i></button>
</div>
<!-- 메뉴 좌우 버튼 생성 끝 -->
<!-- 마우스 오버 스크롤링 버튼 시작 -->
<script>
var step = 100;
var scrolling = false;
$(".moveScrollLeft").bind("click", function(event) {
event.preventDefault();
$("#gnb").animate( {
scrollLeft: "-=" + step + "px"
});
})
.bind("mouseover", function(event) {
scrolling = true;
scrollContent("right");
})
.bind("mouseout", function(event) {
scrolling = false;
});
$(".moveScrollRight").bind("click", function(event) {
event.preventDefault();
$("#gnb").animate( {
scrollLeft: "+=" + step + "px"
});
})
.bind("mouseover", function(event) {
scrolling = true;
scrollContent("down");
})
.bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "right" ? "-=5px" : "+=5px");
$("#gnb").animate( {
scrollLeft: amount
}, 1, function() {
if (scrolling) {
scrollContent(direction);
}
});
}
</script>
<!-- 마우스 오버 스크롤링 버튼 끝 -->
</div>
</header>
3-4] 마우스 다운 스크롤링 버튼
버튼을 클릭하는 중에만 메뉴가 스크롤링된다. Mobile에서는 작동하지 않는다.
아래는 HTML 코드다. CSS 코드는 '3-1'의 CSS 코드와 동일.
<button type="button" class="menu"><span>메뉴</span></button>
</div>
<!-- 메뉴 좌우 버튼 생성 시작 -->
<div class="gnb-box">
<button class="moveScroll moveScrollLeft"><i class="fas fa-arrow-circle-left" style="font-size: 18px"></i></button>
<nav id="gnb">
</nav>
<button class="moveScroll moveScrollRight"><i class="fas fa-arrow-circle-right" style="font-size: 18px"></i></button>
</div>
<!-- 메뉴 좌우 버튼 생성 끝 -->
<!-- 마우스 다운 스크롤링 버튼 시작 -->
<script>
$(function () {
var iv;
var div = $('#gnb');
$('.moveScrollLeft').mousedown(function () {
iv = setInterval(function () {
div.scrollLeft(div.scrollLeft() - 10);
//console.log('downLeft');
}, 20);
});
$('.moveScrollRight').mousedown(function () {
iv = setInterval(function () {
div.scrollLeft(div.scrollLeft() + 10);
//console.log('downRight');
}, 20);
});
$('.moveScroll').on('mouseup mouseleave', function () {
clearInterval(iv);
//console.log('up or leave');
});
});
</script>
<!-- 마우스 다운 스크롤링 버튼 끝 -->
</div>
</header>
3-5] 페이드인 아웃 스크롤링 버튼
버튼 클릭 시 메뉴가 부드럽게 스크롤링되며, 스크롤의 위치에 따라 버튼이 페이드인(fade in) 및 페이드 아웃(fade out) 된다. Mobile에서도 정상 작동한다.
버튼의 유무로 메뉴의 시작과 끝을 알 수 있는 것이 장점이다.
아래는 HTML 코드다. CSS 코드는 '3-1'의 CSS 코드와 동일.
<button type="button" class="menu"><span>메뉴</span></button>
</div>
<!-- 메뉴 좌우 버튼 생성 시작 -->
<div class="gnb-box">
<button class="moveScrollLeft" style="display: none"><i class="fas fa-arrow-circle-left" style="font-size: 18px"></i></button>
<nav id="gnb">
</nav>
<button class="moveScrollRight" style=""><i class="fas fa-arrow-circle-right" style="font-size: 18px"></i></button>
</div>
<!-- 메뉴 좌우 버튼 생성 끝 -->
<!-- 페이드인아웃 스크롤링 버튼 시작 -->
<script>
(function($) {
$("#gnb").on('scroll', function() {
$val = $(this).scrollLeft();
if($(this).scrollLeft() + $(this).outerWidth() + 1 >= $(this)[0].scrollWidth) {
$(".moveScrollRight").fadeOut(); // 또는 hide
}
else {
$(".moveScrollRight").fadeIn(); // 또는 show
}
if($val == 0) {
$(".moveScrollLeft").fadeOut(); // 또는 hide
}
else {
$(".moveScrollLeft").fadeIn(); // 또는 show
}
});
console.log('init-scroll: ' + $(".moveScrollRight").scrollLeft() );
$(".moveScrollRight").on("click", function() {
$("#gnb").animate( {
scrollLeft: '+=300'
}, 500);
});
$(".moveScrollLeft").on("click", function() {
$("#gnb").animate( {
scrollLeft: '-=300'
}, 500);
});
})(jQuery);
</script>
<!-- 페이드인아웃 스크롤링 버튼 끝 -->
</div>
</header>
4] 화면 상단 고정 메뉴
메뉴를 화면 상단에 고정하기 위해서는 우선 메뉴 코드가 부모 코드여야 한다.
북클럽 뉴북 스킨의 경우 <header> 코드가 부모 코드이며 메뉴 코드는 <header> 코드 안에 있는 자식 코드이기 때문에 전체 메뉴 코드를 <header> ~ </header> 밖(아래)으로 이동시켜야 한다.
4-1] position: sticky; 코드 사용
아래 코드를 HTML의 </header> 코드 아래에 삽입한다.
</header>
<!-- 메뉴 좌우 버튼 생성 시작 -->
<div class="gnb-box">
<div class="inner">
<button class="moveScrollLeft" style="display: none"><i class="fas fa-arrow-circle-left" style="font-size: 18px"></i></button>
<nav id="gnb">
</nav>
<button class="moveScrollRight" style=""><i class="fas fa-arrow-circle-right" style="font-size: 18px"></i></button>
</div>
</div>
<!-- 메뉴 좌우 버튼 생성 끝 -->
<!-- 페이드인아웃 스크롤링 버튼 시작 -->
코드 생략
<!-- 페이드인아웃 스크롤링 버튼 끝 -->
아래 코드를 CSS에 삽입한다.
.gnb-box {
position: sticky;
top: 0px;
border-bottom: 1px solid #eee;
z-index: 9999;
width: 100%;
margin: 0 auto;
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(2px);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.gnb-box .inner {
position: relative;
max-width: 1080px;
margin: 0 auto;
display: flex;
justify-content: center;
}
@media screen and (max-width:767px) {
.gnb-box .inner {
padding: 0 20px;
}
}
.fa-arrow-circle-left:hover,
.fa-arrow-circle-right:hover {
transition: 0.3s;
transform: scale(1.3);
cursor: pointer;
}
#gnb {
height: 66px;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: none;
margin: 0 20px;
}
스크롤을 내려도 메뉴가 화면 상단에 고정된다.
4-2] position: fixed; 코드 사용
'4-1'의 HTML 코드 아래에 아래 코드를 삽입한다.
<!-- 메뉴 상단 고정 시작 -->
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
var gnbOffset = $(".gnb-box").offset();
$(window).scroll(function() {
if ($(document).scrollTop() > gnbOffset.top) {
$(".gnb-box").addClass("gnb-box-fixed");
}
else {
$(".gnb-box").removeClass("gnb-box-fixed");
}
});
});
</script>
<!-- 메뉴 상단 고정 끝 -->
'4-1'의 CSS 코드에 아래 코드를 수정 및 추가한다.
/* 수정 */
.gnb-box {
border-bottom: 1px solid #eee;
z-index: 9999;
width: 100%;
margin: 0 auto;
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(2px);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
/* 추가 */
.gnb-box-fixed {
position: fixed;
top: 0px;
}
스크롤을 내려도 메뉴가 화면 상단에 고정된다. sticky 코드와 동일한 결과를 보인다.
4-3] 스크롤업 시 출력 (1)
메뉴를 스크롤을 올릴 때만 나타나게 해 보겠다.
메뉴가 화면 상단에 계속 고정되어 있지 않기 때문에 본문의 공간을 확보할 수 있는 것이 장점이다.
아래 코드를 '4-2'의 HTML 코드 아래에 이어서 삽입하면 된다. CSS 코드는 '4-2'의 CSS 코드와 동일.
<!-- 스크롤업 시 나타나는 메뉴 시작 -->
<script>
$(function () {
var lastScrollTop = 0,
delta = 15;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta) return;
if ((st > lastScrollTop) && (lastScrollTop > 0)) {
$(".gnb-box").css("top", "-66px");
}
else {
$(".gnb-box").css("top", "0px");
}
lastScrollTop = st;
});
});
</script>
<!-- 스크롤업 시 나타나는 메뉴 끝 -->
4-4] 스크롤업 시 출력 (2)
이번에는 메뉴를 보이지 않게 하고 스크롤을 올릴 때만 나타나게 해 보겠다.
'4-1'의 HTML 코드 + 아래 코드를 HTML의 </header> 코드 아래에 삽입한다.
<!-- 상단 고정 없이 스크롤업 시 나타나는 메뉴 시작 -->
<script>
$(document).ready(function() {
$(".gnb-box").hide();
var didScroll;
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if(didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
var lastScrollTop = 0;
var delta = 1;
function hasScrolled() {
var st = $(window).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return;
if($(this).scrollTop() < 1000) {
$(".gnb-box").fadeOut(); !important
}
if (st > lastScrollTop) {
$(".gnb-box").fadeOut();
}
else {
if(st + $(window).height() < $(document).height()) {
$(".gnb-box").fadeIn();
}
}
lastScrollTop = st;
}
});
</script>
<!-- 상단 고정 없이 스크롤업 시 나타나는 메뉴 끝 -->
'4-1'의 CSS 코드에 아래 코드를 수정 및 추가한다.
/* 수정 */
.gnb-box {
border-bottom: 1px solid #eee;
z-index: 9999;
width: 100%;
margin: 0 auto;
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(2px);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
display: none;
position: fixed;
top: 0px;
transition: 0.3s;
}
/* 추가 */
.gnb-box-fixed {
position: fixed;
top: 0px;
}
#gnb ul {
display: -webkit-inline-box;
margin-left: -30px;
vertical-align: top;
}
5] 헤더 및 메뉴 고정
마지막으로 헤더 안에 메뉴를 넣고 헤더를 화면 상단에 고정해 보겠다.
헤더와 메뉴를 둘 다 화면 상단에 고정하면 그만큼 본문의 공간의 줄어드는 문제가 있는데, 그에 대한 해결법이라고 생각한다.
'3-5' 코드를 <header> 코드 중 inner div 코드 안에 삽입한다.
아래 코드를 CSS에 삽입하면 된다. (수정 및 추가)
#header {
position: fixed;
top: 0px;
width: 100%;
border-bottom: 1px solid #eee;
z-index: 9999;
background-color: rgba(255,255,255,0.9);
backdrop-filter: blur(2px);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
#header .inner {
position: relative;
max-width: 1080px;
margin: 0 auto;
display: flex;
align-items: center;
}
#container {
position: relative;
margin-top: 78px;
}
.gnb-box {
width: 60%;
margin: 0 auto;
}
.gnb-box .inner {
display: flex;
justify-content: center;
}
@media screen and (max-width:767px) {
.gnb-box {
display: none;
}
}
.fa-arrow-circle-left:hover,
.fa-arrow-circle-right:hover {
transition: 0.3s;
transform: scale(1.3);
cursor: pointer;
}
#gnb {
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: none;
margin: 0 20px;
}
#gnb ul {
display: -webkit-inline-box;
margin-left: -30px;
vertical-align: top;
}
#gnb ul li {
float: left;
padding: 0px 26px;
line-height: 32px;
}
#gnb ul li a {
position: relative;
display: block;
text-decoration: none;
padding: 23px 4px;
color: #777;
height: 32px;
}
만약 화면 상단 우측에 있는 검색 및 관리 버튼이 필요 없다면 메뉴를 화면 상단 우측에 위치시킬 수 있다.
아래 코드를 CSS에 삽입하면 된다. (수정 및 추가)
/* 수정 */
#header .inner {
position: relative;
max-width: 1080px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
#header .util {
position: absolute;
top: 24px;
right: 0;
display: none;
}
/* 수정 또는 추가 */
@media screen and (max-width:1080px) {
#header .util {
display: block; !important
right: 24px;
}
}
/* 수정 */
.gnb-box {
width: 70%;
}
