그누보드 상위메뉴를 좀더 이쁘게 디자인
그누보드 기본 메뉴가 디자인이 빈약해서
그누보드 상위메뉴를 fontawesome을 사용해서 좀더 이쁘게 눈에 띄게 디자인해 봤습니다.
테마/css/default.css에 삽입하시거나
테마/head.php에 삽입하시면 됩니다.
[code]
<style>
/* Enhanced menu text styles */
.gnb_1da, .gnb_al_a {
font-size: 18px !important;
font-weight: 900 !important;
color: #333 !important;
text-transform: none !important;
letter-spacing: -0.5px !important;
transition: all 0.3s ease !important;
padding: 8px 35px 8px 12px !important; /* Increased right padding */
border-radius: 4px !important;
position: relative !important;
}
/* New stylish arrow design */
.gnb_al_li_plus .gnb_al_a:after,
.gnb_1dli.gnb_al_li_plus .gnb_1da:after {
content: '\f107' !important; /* FontAwesome arrow icon */
font-family: 'FontAwesome' !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 20px !important;
transition: all 0.3s ease !important;
}
/* Arrow animation on hover */
.gnb_1dli:hover .gnb_1da:after,
.gnb_al_li_plus:hover .gnb_al_a:after {
transform: translateY(-50%) rotate(-180deg) !important;
color: #fff !important;
}
.gnb_2da {
font-size: 16px !important;
font-weight: 600 !important;
color: #555 !important;
transition: all 0.3s ease !important;
padding: 6px 10px !important;
/*border-radius: 3px !important;*/
}
.gnb_1da:hover, .gnb_al_a:hover {
color: #fff !important;
background-color: #146eb4 !important;
box-shadow: 0 2px 5px rgba(20, 110, 180, 0.2) !important;
}
.gnb_2da:hover {
color: #146eb4 !important;
background-color: #f0f7fd !important;
padding-left: 15px !important;
}
</style>
[/code]
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기