jquery는 renders_jquery를 사용하여 2단계 탐색 메뉴를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery는 renders_jquery를 사용하여 2단계 탐색 메뉴를 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:56 PM

jquery 탐색 메뉴

인터페이스 요구 사항이 높지 않은 운영 및 유지 관리 시스템에 주로 사용됩니다. 내 페이지 디자인 능력이 매우 약하고, 상호 작용 논리가 아직 조금 더 유능하다는 것을 깊이 느낍니다.

코드 직접 게시:

1. HTML 페이지와 JS 상호 작용, Jquery 파일 소개에 주의

코드 복사 코드는 다음과 같습니다.

两级导航菜单的示例

2. CSS 파일

[css] 파생된 코드 조각 보기 내 코드 조각

div:not(#topnav, #logo){font-size:10pt!important}
*{font-family: Microsoft Yahei, Song Dynasty, san-serif!important}

/*
* 헤더 CSS
*/

a{color:#2F649A;}
a:link{text-장식:none;}
a :visited{텍스트-장식:없음;}
a:hover{text-장식:밑줄;}
a:active{text-장식:none;}

몸 {
배경 -색상: #dae7f6;
여백: -0px
}

#firstHeader {
높이: 56px; 🎜>float: 왼쪽;
글꼴 크기: 28pt;
여백: 10px 0px 10px 20px;
글꼴-가족: 공식 스크립트, Microsoft Yahei, Song Dynamite, san-serif!important; }

#target {
float: 왼쪽;
글꼴 크기: 10.5pt;
글꼴 스타일: 기울임꼴;
여백 : 25px 30px 0px 5px;
}

#toolbar {
float: right;
margin: 0px 3px;

#toolbar a {
font-size: 10pt;
}

#content {
background-color: #45b97c;
}

/* 상단 메뉴 */
#topnav {
float: 왼쪽;
배경색: #426ab3;
너비: 100%
}

#topnav .topnav_list {
float:left; 너비: 100%; 높이: 29px; 여백: 0px 0px -1px 0px;
글꼴 크기: 11pt!important;
테두리 반경: 5px >}

#topnav .topnav_list a {
display:inline-block; height:24px; padding: 2px 0 2px 18px;
vertical-align:middle; 높이:22px; *라인 높이:24px; 커서:포인터;
경계 반경: 5px; 경계 오른쪽: 2px 시작 #00BFFF;

#topnav .topnav_list
디스플레이:인라인 블록; 높이:22px;
테두리-왼쪽-반경: 8px;
테두리 -왼쪽 아래 반경:
경계-오른쪽 반경: 0px;
}

#topnav .topnav_list a:hover, #topnav .topnav_list a.select {
위치: 상대;
배경색: #fff; 텍스트 장식: 없음
테두리-왼쪽 반경: 8px; >테두리-상단-오른쪽-반경: 8px;
테두리-하단-왼쪽-반경: 0px;
테두리-하단-오른쪽-반경:
}

#topnav . topnav_list a:hover 범위, #topnav .topnav_list a.select 범위 {
배경색: #45b97c;
색상:#fff;
경계 반경: 5px; 🎜>.clear {
clear: 모두
}

/* 첫 번째 메뉴 */
#nav {
font-size: 10pt
}

#nav .nav_list {
float:left; padding: 3px 0 3px 0;font-weight:bold;height:25px;
}

#nav .nav_list a {
디스플레이:인라인 블록;
패딩:#fff; line-height:24px; 🎜>테두리 반경: 8px;
테두리 반경:
}

#nav .nav_list a 범위 {
display:inline-block; 반경: 8px;
}

#nav .nav_list a:hover, #nav .nav_list a.select {
위치:z-index:9; 없음;
경계 반경: 8px;
경계 반경:
}

#nav .nav_list a:hover 범위 {
배경색: #007d65;
색상: #fff;
}

#nav .nav_list a.select, #nav .nav_list a.select 범위 {
배경색: # fff;
색상: #ca0000;
}

3.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.