아주대학교 구 사이트 메뉴 반응형 전환

README.md

구버전 아주대학교 페이지 메뉴 반응형 전환

Problem

구버전 아주대 홈페이지의 좌측 메뉴(lnb)와 네비게이션 메뉴가 모두 이미지로 되어 있어 메뉴 이름 변경 시 일일히 이미지를 수정해야 함

Solution

간단한 설정 변경으로 이미지 없이 메뉴 이름이 자동 적용되도록 함

BEFORE	AFTER

스타일

nav	lnb1	lnb2	bullet

방법

1. 에디터에서 반응형으로 전환할 아이템 선택

2. 아이템 속성 창에서 설정 변경

1. 추가 style class에 클래스(스타일 이름. ex: lnb1, lnb2, nav, bullet 등) 추가
   _a처럼 기존 내용이 있다면 그 뒤에 띄어쓰기한 후 추가합니다.

2. 텍스트 표시를 예로 변경
   변경하면 자동으로 이미지 앵커 여부가 아니오로 바뀌고 제목/텍스트에 메뉴 이름이 표시됩니다.

3. 이미지 경로, 마우스오버 이미지, 클릭 후 선택된 이미지 내용 삭제

3. 결과

이미지 없이도 사이트 개발 - 프로그램 관리 - 메뉴관리 - 메뉴등록의 메뉴 이름이 자동으로 적용됨

user.css

/* Custom */
.nav {
  background-color: #fdad00;
  color: white!important;
  font-size: 15px;
  font-weight: bold;
  font-family: NanumSquare, Arial, sans-serif;
  text-decoration: none!important;
  padding: 0 20px;
  height: 37px!important;
  line-height: 37px;
  background-image: none!important;
  //box-shadow: 0px -20px 10px -10px #E1A52E inset;
}
.nav:hover, .nav.jw_selected {
  background-color: #d98800;
}

.lnb1 {
  background-color: #278199;
  color: white!important;
  font-size: 14px;
  font-weight: bold;
  font-family: NanumSquare, Arial, sans-serif;
  text-decoration: none!important;
  padding-left: 15px;
  width: 185px!important;
  height: 34px!important;
  line-height: 34px;
  background-image: none!important;
}
.lnb1:hover {
  background-color: #a53e1e!important;
}
.lnb1:after {
  float: right;
  margin-right: 15px;
  content: '+';
}
.lnb1:hover:after, a.lnb1.jw_selected:after {
  float: right;
  margin-right: 15px;
  content: '-';
}
a.lnb1.jw_selected {
  background-color: #a53e1e!important;
}

.lnb2 {
  color: #111!important;
  font-size: 12px;
  font-weight: bold;
  font-family: NanumSquare, Arial, sans-serif;
  text-decoration: none!important;
  width: 170px!important;
  height: 11px!important;
  line-height: 11px;
  background-image: none!important;
}
.lnb2:hover, .lnb2.jw_selected {
  color: #a53e1e!important;
}
.lnb2:before {
  color: #111;
  content: "-";
  margin-right: 6px;
}

.bullet {
  color: #adadad!important;
  font-size: 13px;
  font-weight: bold;
  font-family: NanumSquare, Arial, sans-serif;
  text-decoration: none!important;
  width: 210px!important;
  height: 31px!important;
  line-height: 31px;
  background-image: none!important;
}
.bullet:hover, .bullet.jw_selected {
  color: #515050!important;
}
.bullet:before {
  background-color: #adadad;
  color: white;
  content: "‣";
  padding: 0 .3em;
  margin-right: 6px;
}
.bullet:hover:before {
  background-color: #515050!important;
}