| « prev next » |
당신은 나의 blog의 우두머리에 있는 변화를 주의했는가? 이 기사 끝에 이 영화 촬영을 보십시오.
어제, 나는 나의 blog에 세계적인 항법적인 메뉴를 추가했다. 나는 이 변화를 대단히 사랑하고, 사람들에게 어떤 페이지든지에서 특정한 종류로 - 다만 빨리 깊은 곳에서 급강하하는 방법을 준다. 당신이 디자인 및 좋아하는 경우에 당신을 당신이 당신의 MovableType에 의하여 역행된 위치에 있는 동일한 것을 어떻게 창조할 수 있는지 생각해 본 일지모른는가? 빠른 지침서는 여기에서 있다.
HTML
이것은 나가 나의 템플렛 (나는 seperate 우두머리 단위로 그것을 끼워넣었다)에서 사용한 부호이다.
<div id= " nav " ><MTTopLevelCategories> <ul id= " nav_menu " ><li class= " 정상 " ><a class= " 정상 " href= " <$MTCategoryArchiveLink$> " ><$MTCategoryLabel$> </a> <ul><MTSubCategories> <li><a class= " nav " href= " <$MTCategoryArchiveLink$> " > <$MTCategoryLabel$></a></li></MTSubCategories></ul></ul></MTTopLevelCategories> </div>
여기에서 열쇠는 I.D nav를 가진 DIV, 및 그 후에 I.D nav_menu를 가진 몇몇 ul가 있는이고, 그 후에 이 꼬리표 안쪽에 최고 메뉴 항목을 뒀다. 그 후에 다른 fewl ul가 있고 그것에 있는 이하 메뉴 항목을 두십시오. 저것은 아주 간단하다.
CSS
당신의 CSS (나의 케이스에 있는 jianshuowangstyle.css)에서는, 뒤에 오는 부호를 추가하십시오. 신용은 감흥과 견본 부호를 위한 납빛 그리고 그의 V2EX에 간다.
div#nav {국경: 1px 단단한 #CC9900; 국경 정상: 0px; 공간: 둘 다; 고도: 21px; 배경 색깔: #F0F8FF; 한계 바닥: 10px; 배경 색깔: #EAEFF4; 공간; 둘 다; 패딩: 0px}
div#nav a: 연결, div#nav a: 방문하는 {색깔: #000; 원본 훈장: 아무도;}
div#nav a.top: 망설임 {배경 색깔: #F0F8FF}
#nav_menu a.top {전시: 구획; 패딩 정상: 5px; 패딩 좌: 15px; 패딩 바닥: 0px;}
#nav_menu a 의 #nav_menu a: 방문하는 {원본 훈장: 아무도; 색깔: 333}
#nav_menu, #nav_menu ul {패딩: 0; 한계: 0; 명부 작풍: 아무도;}
#nav_menu a.nav {전시: 구획; 패딩 정상: 2px; 고도: 17px; 폭: 14em;}
#nav_menu 리튬 {부유물: 좌;}
#nav_menu 리튬 ul {전시: 구획; 위치: 절대; 폭: 14em; 좌측: -999em;
불투명: .99; 여과기: 알파 (opacity=99); 배경 색깔: #FFF;
패딩 정상: 3px; 패딩 바닥: 3px;
국경 바닥: 1px 고체 #CCC; 국경 맞은: 1px 고체 #CCC; 국경 좌: 1px 고체 #CCC; z 색인: 99;}
div#nav a.nav: 망설임 {색깔: #FFF; 원본 훈장: 아무도; 배경 색깔: #667;}
div#nav a.nav: active {색깔: #FFF; 원본 훈장: 아무도; 배경 색깔: #333;}
#nav_menu 리튬: 망설임 ul, 남겨두는 #nav_menu li.sfhover ul {: 자동;}
원본?
이것에서 포함된 아무 JavaScript도 없다. 괴괴망측한? 간계는 스크린 가장자리의 그리고 망설임에 좌측에 먼, -999 em에 자동차에 이고, 좌 재산을 놓았다 그것을 놓았다.
당신이 부호 (CSS, 및 HTML를) 이용하게 자유로운 기능, 정당한 느낌, 및 좋아하는 경우에 당신을 그것을 얻으십시오.
나의 독자를 위해, 당신 좋아한다 이 조금 개선을?