상단메뉴 우측변경및 검색창 위치변경

간단설명

1. 상단메뉴를 최소화하여 우측으로 이동하고 검색창도 상단 메뉴바로 위치 변경 해본다
2. skin.html에서 우측으로 보낼 메뉴를 <ul> ~ </ul>태그로 만든다
3. 기존메뉴 <ul>태그 아래에 추가한다
4. <ul> 태그에는 nav-right와 같은 이름의 클래스를 지정해주고 float:right;를 설정한다
5. 검색창도 <ul>태그의 <li>부분에 삽입한다
6. 모든 소스의 # # 는 ##로 수정 사용한다

 

▶ 다음과 같이 기존메뉴가 형성되어 있다

 

▶ 기존메뉴 ul 태그 아래에 우측으로 옮길 ul 태그를 작성 넣어준다

 

▶ 검색창도 마지막 li 부분에 넣어준다
검색창은 구버전용을 사용 하였고 기존의 검색창은 삭제 해주어야 한다

 

▶ <ul> 태그에 클래스로 nav-right 를 지정해 주었는데 css에 float:right;를 설정한다

 

▶ 미디어쿼리 767px 이하 모바일에서는 nav-right의 값을 없애야 한다

 

다운로드

다운로드 : 상단메뉴 우측이동.txt